Handling Touch and Mouse events using Cypress

While testing web-based covering, the mouse and touch events are the most normally performed events. In layman ’ s price, mouse events can be defined as any activity do using the shiner.

Read this guide further to learn in particular about how to handle touch and mouse case in.

What are Touch and Mouse Events in Cypress?

Touch and Mouse Events in Cypress simulate how users behave with web apps, either through a mouse or touchscreen.

These case can be feign in Cypress via commands like .click (), .dblclick (), or .trigger () etc., to prove and verify the related UI behaviors across respective gimmick types.

Handling Mouse Events in Cypress Test Automation

Here are the various ways in which you can do the shiner events on Cypress

1. Cypress Mouse Click Event 

The clickcommand in Cypress do the click action on the specified DOM element

Syntax:

.click()

Example:

Click the Product menu

cy.get (' # productmenu ') .click ();

Variations of the click command in Cypress

• .click (options):This bidding take the alternative as a parameter, when you pass theoptionsit overrides the default conduct of click. The options are specified in the chink command using duo {}.
  Example: 

cy.get (' # productmenu ') .click ({force: true})

• .click (position):By nonremittal Cypress clicks on the center of the DOM factor, you can change this behavior by specifying the positions. Available positions are topLeft, top, topRight, left, eye, right, bottomLeft, bottom, and bottomRight.Example:

cy.get (' # tiger_image ') .click ('topRight ')

• .click (position, options):The position and alternative can be combined in the Cypress click event.Example:

cy.get (' # tiger_image ') .click ('topRight ', {force: true})

• .click (x, y):Cypress allows you to specify the x, y coordinates in the click dictation.

Example:

cy.get (' # event-banner ') .click (15, 40)

• .click (x, y, options):The options and x, y coordinates can be combined when needed.Example:

cy.get (' # event-banner ') .click (15, 40, {forcefulness: true})

2. Cypress Double Click case

The dblclick ()command performs the double click action in Cypress Automation. The ordinarily used dblclick () command is

.dblclick ()

Example:

cy.get (' # some_id ') .dblclick ();

The double click comes with multiple variants in Cypress

• .dblclick (choice): This command takes the options as a argument, when you surpass theoptionsit overrides the default behavior of double chink. Example:

cy.get (' # some_id ') .dblclick ({force: true});

The duple click get with multiple variants in Cypress

• .dblclick (options): This command takes the options as a argument, when you pass theoptionsit override the nonpayment behavior of two-fold click.

Example:

cy.get (' # some_id ') .dblclick ({force: true});

• .dblclick (position):By default cypress dual clicks on the center of the DOM element, you can change this behavior by specifying the positions. Usable positions are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.

Example:

cy.get (' # tiger_image '). dblclick ('topRight ')

• .dblclick (position, options):The position and options can be combined in the Cypress double-click event

Example:

cy.get (' # tiger_image '). dblclick ('topRight ', {force: true})

• .dblclick (x, y):Cypress allows you to specify the x, y coordinates in the dblclick command.

Example:

cy.get (' # event-banner '). dblclick (15, 40)

• .dblclick (x, y, options):The selection and x, y coordinates can be combined together when needed.

Example:

cy.get (' # event-banner '). dblclick (15, 40, {force: true})

3. Cypress Right Click Event

If your apps are project to handleright-clickevent then you can use the rightclick () command in Cypress to simulate the right-click actions.

Typically correct click can be used with the below syntax

.rightclick ()

Example:

cy.get (' # carte ') .rightclick ()

Variants of right-click dictation in Cypress

• .rightclick (options):When the alternative are stipulate with rightclick () bidding, the default behavior will be overridden with qualify options

Example: 

cy.get (' # menu '). rightclick ({multiple: true})

• .rightclick (position):The right-click dictation by default dog on the centre of the DOM element specified. You can change this behaviour by passing the position to right click command. Available options for perspective arguments are topLeft, top, topRight, left, centerfield, flop, bottomLeft, bottom, and bottomRight.Example:

cy.get (' # menu '). rightclick ('bottomLeft ')

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

• .rightclick (place, options):You can combine the options with position with Cypress right clink command.Example:

cy.get (' # menu '). rightclick ('bottomLeft ', {strength: true})

• .rightclick (x, y):The x, y coordinate can be fix in the right-click commandExample:

cy.get (' # right-menu ') .rightclick (15, 40)

• .rightclick (x, y, options):The x, y co-ordinate, and options can be combine to accomplish the desired behavior of right-click command.Example:

cy.get (' # right-menu ') .rightclick (5, 60, {forcefulness: true})

4. Cypress Check and Uncheck commands

The Cypresscheck and uncheck command helps perform a check and uncheck actions on the radio button or checkbox.

• Cypress Check Command

The Cypress assay command Syntax

.check () .check (value) .check (value) .check (options) .check (value, options) .check (values, options)

The .check()option is most commonly used, the.check() bidding needs to be chained with locator.

Example:

cy.get (' [type= '' checkbox ''] ') .check ()

The .check () command too accept the value, the value is the value attribute in HTML

& lt; form & gt; & lt; input type= '' radio '' value= '' APL '' / & gt; & lt; label for= '' importedfruit `` & gt; Apple & lt; /label & gt; & lt; input type= '' radio '' value= '' ORN '' / & gt; & lt; label for= '' countryfruit `` & gt; Orange & lt; /label & gt; & lt; /form & gt;

Considering the above HTML if you take to click on the Apple radio button, you can write the bidding below

cy.get (' [type= '' radio ''] ') .check ('APL ')

• Cypress Uncheck command

The uncheck command make the paired action of the check command. The uncheck command can be expend to uncheck a single checkbox or multiple checkboxes at once.

Cypress Uncheck Command Syntax

.uncheck () .uncheck (value) .uncheck (value) .uncheck (options) .uncheck (value, options) .uncheck (value, options)

Example:

cy.get (' [type= '' checkbox ''] ') .uncheck () // Unchecks checkbox element cy.get ('input [type= '' checkbox ''] ') .uncheck (['car ']) // Uncheck the checkbox with the value of 'car' cy.get (' [type= '' checkbox ''] ') .uncheck (['car ', 'bus ']) // Uncheck the checkbox with the value 'car ' and 'bus '

5. Cypress Trigger dictation

The Cypress trigger command is almost useful while writing functional trial lawsuit. Using the Cypress trigger dictation, you can actuate any DOM case.

The Cypress trigger command syntax .trigger (eventName) .trigger (eventName, perspective) .trigger (eventName, options) .trigger (eventName, x, y) .trigger (eventName, position, option) .trigger (eventName, x, y, selection)

Example:

You can do a click action expend the trigger dictation

cy.get ('input [name= '' btnK ''] ') .first () .trigger ('click ');

Similarly, you can pass any event from the list of uncommittedeventsthat Cypress support.

6. Cypress Mouseover event

The cypress mouseover is supported viatrigger bid; there is no native support in Cypress. However, the mouseover can be achieved easily using the trigger bid.

Example:

cy.get (' # changecolor ') .trigger ('mouseover ')

7. Mouse up and Mouse Down Event

You might have a scenario where you need to long pressure the shiner for 5 seconds you can achieve that functionality through the mouseup and mousedown event.

Example: cy.get ('.target ') .trigger ('mousedown ') cy.wait (5000) cy.get ('.target ') .trigger ('mouseup ')

8. Mouse Move Event

The mousemove case hap when the arrow is displace while it is over an constituent.

Example: cy.get ('.target ') .trigger ('mousemove ')

Optionally you can also specify the coordinates to movemove Example: cy.get (' # divStart ') .trigger ('mousemove ', {clientX: 200, clientY: 300})

9. Mouse Leave Events employ Cypress

The Mouse leave event occurs when the mouse pointer is moved out of an component.

Example:

cy.get (' # image1 ') .trigger ('mouseleave ')

10. Cypress scrollIntoView bidding

The Cypress scroll into view command scroll the specified element into panorama.
For example, if you require to scroll the image into vista you can pen the command below

Example: cy.get (' # bottom_image ') .scrollIntoView ()

The scrollIntoView bidding accepts choice.scrollIntoView (options), such as easing aliveness, offset, duration etc.

11. Cypress Select command

The Cypress select command help to select the alternative within the quality tag.

For example, if you have a select fruit choice and from the drop-down, you can select any one of apple, orangeness, kiwi, etc.

Syntax:

.select (value)

Example: cy.get (' # yield ') .select ('apple ');

Handling Touch Events in Cypress

Touch event are similar to creep events. Touch case supports simultaneous ghost at different fix on touch-based surfaces. To perform a touch event, you must have a touch interface device. Smartphones are an excellent exemplar of touch-based devices.

Here are the usually habituate Touch Events:

1. touchstart

The touch start event is triggered when the user places the touch point on the touch interface.

Command Syntax

cy.get ('selector ') .trigger ('touchstart ', {force: true});

2. touchend

The touch end case is triggered when the exploiter removes a touch point from the touch interface; that is, when they elevate a finger or stylus from the touch interface.

Command Syntax

cy.get ('selector ') .trigger ('touchend ', {force: true});

3. touchmove

The touch move case pass when the exploiter moves a touch point along the touch surface.

Command Syntax

cy.get ('selector ') .trigger ('touchmove ', {strength: true});

4. touchcancel

Touch cancel event induction when the trace point has been disrupted for some reason. A typical example is if the device supports single touch and the exploiter tries to use multiple fingers, it will be like multi-touch, so this case may pass.

Command Syntax

cy.get ('selector ') .trigger ('touchcancel ', {force: true});

Cypress touch event example

The cy.trigger ()bidding can trigger the touch case in Cypress.

Mobile gimmick quiz can be done in Cypress habituate thecy.viewport ()bidding is supported using the device emulation technique.

Let & # 8217; s take a use lawsuit of do a touch case on iPhone-XR that can be achieved in cypress employ the below code

cy.viewport ('iphone-xr ')}) it ('touchstart case demo ', () = & gt; {cy.visit ('https: //patrickhlauke.github.io/touch/tests/event-listener_prevent-default-touchend.html'); cy.wait (3000); cy.get (' # b ') .trigger ('touchstart ')})})

Output:

Similar way you can trigger any touch events in Cypress.

Cypress Mouse and Touch Events Best Practices

Here are some best practices and tips you can follow for Cypress shiner and touch events:

1. Cypress supports click, double click right click and many more events out of the box use .click (), .dblclick () etc. The same operations can be performed using cy.trigger () command as well.Example:

cy.get (' # somemenu ') .trigger ('click ');

2. The .focus () command can be used to focus on any input element

Example:

cy. (' # input_username ') .focus ();

3. The Cypress & # 8217; s .submit () can be employ for form submission

cy.get ('form ') .submit ()

4. Cypress provides .clear () command, which helps to clear the text content input field (Works only on input or text area)

Example:

cy.get (' [type= '' text ''] ') .clear ()

5. The selectFile command in Cypress helps to drag and drop file in an HTML 5 input element. Generally used for dragging the file to the browser

Example:

cy.get ('input [type=file1] ') .selectFile ('file.json ')

You can choose multiple file as well.

cy.get ('input [type=file1] ') .selectFile (['file.json ', 'file2.json '])

Why Use BrowserStack Automate to Run Your Cypress Tests?

BrowserStack Automate ’ s cloud-based testing platform lets you run Cypress tests effectively across multiple device-OS-browser combinations. Here ’ s why choosing BrowserStack could enhance your Cypress testing efforts up a notch:

• : One of the drawback of Cypress is that it runs on circumscribed browsers, mainly Chrome-based ones. A tool like BrowserStack helps you expand your Cypress examination to many other browsers, like Safari, Edge, IE, etc.
• Video Recording: With BrowserStack, you can show videos of test execution.
• Cloud Infrastructure: Being a cloud-based platform, it do not require determine up or maintaining browser or physical devices topically.
• Parallel Testing: With, you can run multiple Cypress tests concurrently, speeding up test execution and finally the release cycles.
• Real-device testing: BrowserStack offers you a Brobdingnagian, to run Cypress tests on 3500+ real gimmick, browser, and OS combinations.
• Integrations: BrowserStack Automate offers seamless with various like, Travis CI,, Bamboo and more.
• Scalability: BrowserStack support real-device and parallel testing on a cloud-based infrastructure. This lets you run 100 of Cypress examination across different environments.

Talk to an Expert

Conclusion

In the mod existence with advanced technology, you can not trammel the exploiter to a specific browser or platform. When the application is back for multiple browsers and platforms, you must ensure it is working as expected. As Cypress support multiple browsers and function system, you can quickly test your application across the program and browser.

The major problem with cross-platform testing is infrastructure apparatus and maintenance. Many organizations are moving towards to address this complicated problem. Browserstack provides thousands of real devices, include various wandering platform and adaptation which helps to test the production and confidently ship the product to market.

Utilitarian Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides