Handling Touch And Mouse Events In Cypress [Tutorial]

Cypress UI Interaction Commands

The Cypress framework provides a number of commands that let you interact or trigger some events in the DOM. These Cypress events are fired similarly as the web browser would fire. We would cover Cypress touch and mouse events and examples of how you can use them in your Cypress test scripts.

You can go through the following video to learn Cypress commands that can help you write tests that interact with the user interface of an application. However, you can also visit the TestMu AI YouTube channel for videos that will guide you through the Cypress testing journey.

Get the best out of your Cypress tests with TestMu AI’s online Cypress automation tool. Check out how you can test your Cypress test scripts using TestMu AI’s online cloud.

Cypress Trigger Command

The trigger command in Cypress helps trigger an event on the DOM element. X, Y positions can also be supplied to the trigger command. Shown below is the syntax of the trigger command:

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

You can have log, force, bubbles, timeout, and cancelable as the options in the trigger command. Here are some of the ways in which Cypress trigger command can be used to perform events on the WebElement:

cy.get('a').trigger('mousedown')
    cy.get('sample_button').trigger('mousedown', 'topLeft')
    cy.get('sample_button').trigger('mouseover', { bubbles: false })
    cy.get('sample_button').trigger('mouseup', 20, 30)

Let’s look at some of the in-depth examples that demonstrate the usage of Cypress mouse events so that you can perform the relevant mouse operations using the Cypress framework.

Mouse Down Events using Cypress

Mouse interactions such as mouse down and mouse up are some of the most common operations you would normally perform with a mouse. For demonstration, we perform a mouse down event on the Admin tab available on the OrangeHRM website.

Step Definition

When('I move mouse down on admin tab section', () => {
      homeOrangehrmPage.mousedownAdminTab()
    })

Function

mousedownAdminTab () {
        cy.xpath('//a[@id="menu_admin_UserManagement"]')
          .invoke('show')
          .should('be.visible')
          .trigger('mousedown')
      }

As seen above, the admin menu is located using the XPath locator. Once the element is located, the invoke method is used to call the JQuery method ‘show’ on the element. The corresponding WebElement should be visible.

On detecting the desired element’s visibility, a mouse down event is triggered on the element.

Mouse Over Events using Cypress

Using the trigger command, you can also perform Cypress mouse over Event. The only prerequisite is that the DOM element must be in an ‘interactable’ state before this Cypress event is triggered. Interactable means that the button must be visible and should not be disabled.

To showcase the usage of Cypress mouse over event, we use the same HRM website example:

Step Definition

When('I mouseover on first row of results table of admin tab', () => {
        homeOrangehrmPage.mouseOverAdminResultTableR1C2()
    })

Function

mouseOverAdminResultTableR1C2 () {
        cy.xpath('//a[@id="menu_admin_UserManagement"]')
          .invoke('show')
          .should('be.visible')
          .trigger('mouseover')
    }

As seen above, the desired element is located using the XPath locator. Once the element is located and checked for its visibility, the mouse over event is invoked to interact with the corresponding element.

Mouse Leave Events using Cypress

Once the mouse over event is performed, mouseleave event helps in going back to the earlier stage of the UI display.

We demonstrate the mouseleave option using the OrangeHRM website.

Step Definition

When('I mouseleave on first row of results table of admin tab', () => {
        homeOrangehrmPage.mouseleaveAdminResultTableR1C2()
    })

Function

mouseleaveAdminResultTableR1C2 () {
        cy.xpath('//a[@id="menu_admin_UserManagement"]')
          .invoke('show')
          .should('be.visible')
          .trigger('mouseleave')
    }

Mouse Move Events using Cypress

If you are new to this particular mouse event, I would recommend trying out the mouse move event. Try the sample code here: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove

Function to perform mouse left and mouse right events:

mousActionsonDashboardGraph () {
        cy.xpath('//*[@id="div_graph_display_emp_distribution"]')
          .as('graph')
          .trigger('mousedown')
          .trigger('mousemove')
          .trigger('mouseup')
          .trigger('mouseleft', { which: 1, pageX: 600, pageY: 100 })
          .trigger('mouseright', { which: 1, pageX: 600, pageY: 600 })
          .trigger('mouseleave')
    }

Once we are inside the Employee Distribution chart, we use the mouseleft and mouseright options offered with the trigger command to move the mouse to the desired X and Y coordinates.

Watch this video to learn how Cypress can be used to automate accessibility testing.

Cypress Click Command

In case you want to perform a Cypress mouse event like click, you can use the .click() method offered by the Cypress framework. It lets you click on any DOM element. Like the .trigger() method, the .click() method can also be invoked in different ways.

.click()
    .click(options)
    .click(click_pos)
    .click(click_pos, options)
    .click(x, y)
    .click(x, y, options)

Click position (i.e. click_pos) could be center, topLeft, topRight, left, right, bottom, bottomLeft, bottomRight, etc. The possible values of options are log, force, multiple, and timeout.

Here is a sample demonstration of the click method in Cypress using the Orange HRM website:

const admin_tabxPath_Homepage = '//*[@id='menu_admin_viewAdminModule']'
    clickAdminTab () {
        cy.xpath(admin_tabxPath_Homepage)
          .invoke('show')
          .should('be.visible')
          .click()
    }

Once the required WebElement is visible, then the click() method is used for clicking on that element.

Cypress Double Click Command

The .dblclick() method in Cypress is used for double clicking on a DOM element. Like the .click() method, the .dblclick() method can also be used in a number of ways:

.dblclick()
    .dblclick(options)
    .dblclick(dblclick_pos)
    .dblclick(dblclick_pos, options)
    .dblclick(x, y)
    .dblclick(x, y, options)

The method accepts the same options as mentioned in the .click() method.

Shown below is the demonstration of .dblclick() method that double clicks on the Admin module of the OrangeHRM website:

const admin_tabxPath_Homepage = '//*[@id='menu_admin_viewAdminModule']'
    dblclickAdminTab () {
        cy.xpath(admin_tabxPath_Homepage)
          .invoke('show')
          .should('be.visible')
          .dblclick()
    }

Cypress Right Click Command

The .rightclick() method in Cypress is used for right clicking on a DOM element. It will not open context menus that are native to the web browser. The method can also be invoked in a number of ways:

.rightclick()
    .rightclick(options)
    .rightclick(click_pos)
    .rightclick(click_pos, options)
    .rightclick(x, y)
    .rightclick(x, y, options)

Shown below is the demonstration of .rightclick() method that opens up the context menu when right clicked on the Admin module of the OrangeHRM website:

const admin_tabxPath_Homepage = '//*[@id='menu_admin_viewAdminModule']'
    rhtclickAdminTab () {
        cy.xpath(admin_tabxPath_Homepage).rightclick()
    }

Cypress Check/Uncheck Commands

The .check() and .uncheck() method in Cypress is used for checking and unchecking the checkboxes and radio buttons respectively. This method can also be invoked in a number of ways:

.check()
    .check(value)
    .check(values)
    .check(check_ops)
    .check(value, check_ops)
    .check(values, check_ops)

Shown below is the syntax of the .uncheck() method:

.uncheck()
    .uncheck(value)
    .uncheck(values)
    .uncheck(uncheck_ops)
    .uncheck(value, uncheck_ops)
    .uncheck(values, uncheck_ops)

The possible value of options (i.e. check_ops/uncheck_ops) are log, force, and timeout. Shown below is the demonstration of check and uncheck methods of the Cypress framework:

const selectAll_pimTab = '//*[@id='ohrmList_chkSelectAll']'
    /* Check the radio button if the tab is enabled */
    checkEmployees () {
        cy.xpath(selectAll_pimTab).not('[disabled]').check()
    }
    /* Check if the appropriate radio options are checked or not */
    allEmployeesSelected () {
        cy.xpath(selectAll_pimTab).not('[disabled]').should('be.checked')
    }
    /* Uncheck if the options are checked */
    uncheckEmployees () {
       cy.xpath(selectAll_pimTab).not('[disabled]').should('be.checked').uncheck()
    }

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Apart from these methods that let you perform Cypress operations, Cypress also supports Type, Clear, and Select commands.