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

前言

在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。

x（數字）

從元素左側到觸發事件的距離（以像素為機關）。

y （數字）

從元素頂部到觸發事件的距離（以像素為機關）。

options

傳遞選項對象以更改的預設行為.trigger()。

選項	預設	描述
log	true	在指令日志中顯示指令
force	false	強制執行操作，禁用等待操作性
bubbles		事件是否起泡
cancelable		活動是否可取消
timeout	defaultCommandTimeout	等待逾時.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)      

滑鼠懸停案例

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()

    })
 })