Working with Mouse Actions in Cypress
We all know that with automation, software testing has come a long way due to its multiple benefits, such as time saving, early bug catching, etc. With time, various test frameworks have been introduced for different platforms. One such is Cypress, which is used for automation of web applications test cases.
Cypress helps QA engineers write test cases faster and in a more reliable way, and it’s also very easy and quick to set up. Cypress has made automation easier in many ways. There is almost always a plugin for almost every task that traditional frameworks would require users to write themselves.
One such area made easier by Cypress is mouse functions such as drag and drop. Cypress comes with a built in function called trigger. Trigger helps users perform mouse actions without hassle. It uses a few attributes for this purpose:
- Event name
- X coordinates
- Y coordinates
- Other options
Let’s discuss a few of these.
Mouseover & Mouseup
A combination of Mouseover and Mouseup are used to imitate a number of different actions.
For example, users can perform long presses or click for a particular duration of time.
cy.get(locator).trigger(‘mousedown’)
cy.wait(‘3000’)
cy.get(locator).trigger(‘mouseup’)
What the above three methods are doing is that firstly, the user clicks a particular element using mousedown. Next, the user waits for 3000 ms or 3 seconds holding the click, or in this case press. Then finally, it is released with mouseup.
Element Position
Users can also specify where exactly the action needs to be performed by specifying the position of the element. For example,
cy.get(locator).trigger(‘mousedown’,’top’)
The position can be mentioned as a second parameter. The nine positions that are valid for this example are:
- top
- topRight
- topLeft
- center
- left
- right
- bottom
- bottomLeft
- bottomRight
Coordinates of Position
Similar to specifying the position, the user can also specify the exact coordinates in order to perform the actions. This is done by providing x and y coordinates. For example:
cy.get(locator).trigger(‘mousedown’,100,200)
The 2nd parameter is the x coordinate and the third parameter is the y coordinate.
Drag and Drop
There are a number of different ways to use these functions, and it is up to the users’ creativity as to how they utilize them as per their needs. Using the two basic functions, users can perform drag and drop using the mouse as well.
Similar to mouseover and mousedown, mousemove also exists which, as the name specifies, moves the mouse.
For example take two elements having locators loc1 and loc2. User needs to drag the element having loc1 to the area having locator loc2. This can be performed in the following way.
cy.get(loc1).trigger(‘mousedown’)
cy.get(loc2).trigger(‘mousemove’).trigger(‘mouseup’)
Here we have chained two trigger functions with parameters mouse move and mouse up. What this does is, it clicks loc1, moves it to loc2, and lifts; in a way performing what we’d call Drag and Drop.
Drag and Drop using Plugin
Users can perform drag and drop using Cypress’ plugin for this purpose. It is available on the official documentation website under plugins.
Using it is very simple. First of all, install the plugin using terminal by entering the following command.
npm install — save-dev @4tw/cypress-drag-drop
Import it in your command.js file.
And that’s it, you can start using this plugin. For example:
cy.get(loc1).drag(‘.className’, { clientX: 250, clientY: 100, force: true })
Here, we are basically taking the element having loc1, and dragging it to a location having class className. clientX specifies the x coordinates and clientY specifies the y coordinates. Force true is a check that we need to use with this plugin to forcibly fire the event at the element.
This is basically the same as using trigger() to drag and drop; the only difference is that it performs the action in one command instead of two.
The rest is up to the user, how he or she wishes to utilize these actions in order to perform their tasks.
More content at PlainEnglish.io.
Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
