Cypress web automation 39-.trigger() common mouse operation events

preface

Mouse events often encountered on web pages include: mouse hover operation, right mouse button, mouse long press, drag and so on

trigger()

Trigger method is used to trigger events on DOM elements

Examples of grammar usage

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

Correct usage

cy.get('a').trigger('mousedown') // Trigger mousedown event

Incorrect usage

cy.trigger('touchstart')             // Wrong, can't be used directly in cy
cy.location().trigger('mouseleave')  // Error, 'location' does not generate DOM element

Requirement:. trigger() needs to be linked to the command that produces the DOM element.

Parameter description

eventName (string)

The name of the event to trigger on the DOM element.

position (string)

Where the event should be triggered. The center location is the default location. Valid locations top left, top, top right, left, center, right, bottomLeft, bottom, and bottomRight.

x (number)

The distance, in pixels, from the left side of the element to the trigger event.

y (number)

The distance, in pixels, from the top of the element to the trigger event.

options

Pass the option object to change the default behavior of. trigger().

option default describe
log true Show commands in command log
force false Force operation, disable wait operability
bubbles true Is the event bubbling
cancelable true Can the activity be cancelled
timeout defaultCommandTimeout Time to resolve before waiting for timeout. trigger()

You can also have any event attribute (such as clientX, shiftKey) that will be attached to the event. Transferring coordinate parameters (clientX, pageX, etc.) will override the location coordinates.

Mouse events

Mouse over operation

Trigger mouseover event, mouse over operation. The DOM element must be in an interactive state (it must be visible and cannot be disabled) before the trigger event occurs

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

Mouse long press operation

First trigger mousedown, press the mouse, wait for the event, and then mouseleave releases the mouse

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

Special mousedown event

// 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

To simulate drag and drop using the jQuery UI sortable, you need the pageX and pageY properties as well as 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')

Reference case: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__drag-drop

Trigger position

Trigger the

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

Specify explicit coordinates relative to the upper left corner

cy.get('button').trigger('mouseup', 15, 40)

Mouse over case

Case: Baidu - Settings - (mouse over pop-up option) search settings

/**
 * Created by dell on 2020/6/9.
 * Author: Shanghai youyou communication QQ group: 939110556
 */

describe('baidu setting', function() {

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


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

        // Mouse over
        cy.get("#s-usersetting-top").trigger('mouseover')
        cy.contains("Search settings")
            // Judge that the setting options are visible
            .should('be.visible')
            .click()

    })
 })

More introduction to trigger https://docs.cypress.io/api/commands/trigger.html

Tags: Attribute JQuery github

Posted on Thu, 11 Jun 2020 00:19:39 -0400 by AndrewJ1313