Cypress web自动化39-.trigger()常用鼠标操作事件

摘要:
位置(字符串)应触发事件的位置。选项传递选项对象以更改trigger()的默认行为选项默认描述logtrue在命令日志中显示命令forcefalse以强制执行操作。禁用等待操作性气泡。cancelabletrue是否可以取消timeoutdefaultCommandTimeout您还可以在触发器()之前使用任何事件属性,该属性将附加到事件。鼠标事件鼠标悬停操作触发鼠标悬停事件,鼠标悬停操作。
前言

在web页面上经常遇到的鼠标事件有:鼠标悬停操作,鼠标右键,鼠标长按,拖拽等操作

trigger()

trigger 方法用于在 DOM 元素上触发事件

语法使用示例

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, options)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, x, y, options)

正确用法

cy.get('a').trigger('mousedown') // 触发 mousedown 事件

不正确的用法

cy.trigger('touchstart')             // 错误,不能直接用在cy.
cy.location().trigger('mouseleave')  // 错误, 'location' 不生成 DOM 元素

要求:.trigger() 需要链接到产生 DOM 元素的命令。

参数说明

eventName(字符串)

event 在DOM元素上要触发的的名称。

position(字符串)

应该触发事件的位置。该center位置是默认位置。有效的位置topLeft,top,topRight,left,center,right,bottomLeft,bottom,和bottomRight。

Cypress web自动化39-.trigger()常用鼠标操作事件第1张

x(数字)

从元素左侧到触发事件的距离(以像素为单位)。

y (数字)

从元素顶部到触发事件的距离(以像素为单位)。

options

传递选项对象以更改的默认行为.trigger()。

选项默认描述
logtrue在命令日志中显示命令
forcefalse强制执行操作,禁用等待操作性
bubblestrue事件是否起泡
cancelabletrue活动是否可取消
timeoutdefaultCommandTimeout等待超时.trigger()之前解决的时间

您还可以任意事件属性(例如clientX,shiftKey),他们会被附加到事件。传递坐标参数(clientX,pageX等)将覆盖位置坐标。

鼠标事件

鼠标悬停操作

触发 mouseover 事件,鼠标悬停操作。在触发事件发生之前,DOM元素必须处于interactable(可交互)状态(它必须可见并且不能禁用)

cy.get('button').trigger('mouseover') // yields 'button'

鼠标长按操作

先触发 mousedown 按下鼠标,wait等待事件,再 mouseleave 释放鼠标

cy.get('.target').trigger('mousedown')
cy.wait(1000)
cy.get('.target').trigger('mouseleave')

特殊的 mousedown 事件

// Main button pressed (usually the left button)
cy.get('.target').trigger('mousedown', { button: 0 })
// Auxiliary button pressed (usually the middle button)
cy.get('.target').trigger('mousedown', { button: 1 })
//Secondary button pressed (usually the right button)
cy.get('.target').trigger('mousedown', { button: 2 })

拖拽 drag and drop

要使用jQuery UI sortable模拟拖放,需要pageX和pageY属性以及 which:1

cy.get('[data-cy=draggable]')
  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
  .trigger('mouseup')

参考案例:https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__drag-drop

触发位置

触发mousedown按钮右上方的

cy.get('button').trigger('mousedown', 'topRight')

指定相对于左上角的明确坐标

cy.get('button').trigger('mouseup', 15, 40)
鼠标悬停案例

案例:百度-设置-(鼠标悬停弹出选项)搜索设置

/**
 * Created by dell on 2020/6/9.
 * 作者:上海-悠悠 交流QQ群:939110556
 */

describe('baidu setting', function() {

    before( function() {
        cy.visit("https://www.baidu.com/")
    })


    it('mouseover event', () => {

        // 鼠标悬停 mouseover
        cy.get("#s-usersetting-top").trigger('mouseover')
        cy.contains("搜索设置")
            // 判断设置选项可见
            .should('be.visible')
            .click()

    })
 })

Cypress web自动化39-.trigger()常用鼠标操作事件第2张

trigger 更多介绍文档https://docs.cypress.io/api/commands/trigger.html

免责声明:文章转载自《Cypress web自动化39-.trigger()常用鼠标操作事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C#打印机操作类informatica简易教程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

在WPF中如何使用RelativeSource绑定

在WPF绑定的时候,指定绑定源时,有一种办法是使用RelativeSource。 这种办法的意思是指当前元素和绑定源的位置关系。 第一种关系: Self 举一个最简单的例子:在一个StackPanel中,有一个TextBlock。 <TextBlock FontSize="18" FontWeight="Bold" Margin="10"...

SwiftUI:视图修饰

前言 SwiftUI的视图修饰包含了 Controls修饰  控件修饰 Effects修饰   效果修饰 Layout修饰   布局修饰 Text修饰    文本修饰 Image修饰   图像修饰 List修饰    列表修饰 Navigation Bar  导航修饰 Styles修饰    风格修饰 Accessibility   访问修饰 Event...

bootstrap基本标签总结2

[布局]bootstrap基本标签总结2  缩略图 <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="https://tool.4xseo...

dojo(五):Dijit-基本组件

转自:http://blog.csdn.net/trendgrucee/article/details/12679949 1、简介 Dijit是Dojo的UI框架,包含一系列丰富的组件以帮助你快速开发Web程序。考虑到大部分Web页面都是表单元素(指允许用户输入的组件,通常会被传送到服务器进行处理)。Dijit有很多基于表单的组件,包括按钮、文本框、可校验...

vue 公用组件开发 确认框confirm

文件目录: github地址:https://github.com/xingkongwuyu/vue-spa-experience/tree/master/src/components 最终的效果:  组件的源码解析: confirm :  confirm的框架 ./index.js import confirmBox from './src/inde...

iOS开发基础框架

---恢复内容开始--- //appdelegate //// AppDelegate.m// iOS开发架构//// Copyright © 2016年 Chason. All rights reserved.//#import "AppDelegate.h"#import "ViewController.h"#import "CYCTabBarView...