How to handle Click Events in Cypress

Cypress framework is a well-architected automation framework that furnish many options for users to handle events.

This article furnish a step-by-step guide onhow to address click events in Cypress and the importance of running Cypress tests on existent devices.

What is an Event?

An Event is a signal for a user-generated initiation. DOM elements yield such signals, nevertheless, signals are not limited merely to DOM elements. For example, when a user chink on the push, it generates a click event.

You can delimit what should bechance on a click event (i.e. once the user tick a button) using case handlers. There are many different types of events such as:

• click
• doubly click
• right-click
• key down
• key up

This article mainly focuses on care a Click case through.

Understanding Cypress Click Method

The click()method in simulates a user clicking on a specific element on a web page. This command is essential for interacting with UI components like buttons, links, checkboxes, and early clickable elements during.

Key Uses of pawl () in Cypress:

• Triggers a click case on a targeted element.
• Mimics existent user interaction with web page elements.
• Helps verify UI behavior and functionality during end-to-end testing.

Syntax:

cy.get (& # 8216; selector & # 8217;) .click ()

Handling Click Event in Cypress

There are different ways to handle click event in Cypress as seen below:

1. Cypress Click with No Arguments

Cypress Click simply triggers a click case on the DOM ingredient. There are many variations with contestation in click events in Cypress. The most used click event is the Click on DOM component without any arguments.

In most cases the click event will be triggered on the DOM ingredient so, first, it is required to get the Element and perform click operations.

cy.get (& lt; locater & gt;)gets the locater and so.click()is used to spark the click event.

Example:

Click on the button with id#mybuttonusing the below command

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

2. Force Click of Elements

In some cases, DOM elements might restrict from performing or interacting with the elements. This happens when some necessary checks are hap in the ground to formalise the element & # 8217; s interactive potentiality.

However, these checks are not ever necessary so you can hop these checks and force the events to happen. In Cypress, this can be done by passing simple arguments toclick(). i.e {strength: true}

Example:

cy.get (' # mybutton ') .click ({strength: true});

3. Cypress Click on Positions of Elements

When you trip the click case using Cypress, the cypress tries to click on the centerfield of the ingredient by nonremittal however you can alter this default behavior by passing the position argument toclick().

List of validclick()perspective in Cypress is as follows:

• topLeft
• top
• topRight
• left
• center
• right
• bottomLeft
• bottom
• bottomRight

For example, to click on the top right of the image using Cypress clink, using the below dictation

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

As seen in the above exampletopRightposition is passed toclick()office, similarly, you can pass any valid positions that are refer above.

4. Cypress Click employ Co-ordinates

You can also pass the x and y coordinates to the Cypress click events. The coordinates are with wish to the pixels that apply to the constituent boundary.

Consider having an Image that you want to tick on15pxfrom the left, and30pxfrom the top, then you can pass(15, 30)to the cypress click case utilize the below command.

cy.get (' # myImage) .click (15, 30);

cy.get (' # button1 ') .click ('topRight ', {forcefulness: true})

5. Clicking on Multiple Elements With Cypress Click

By default Cypress allows solely clicking on a individual element, if you try to click multiple elements at once, the Cypress results in an mistake. The Cypress argument{multiple: true}allows clicking on multiple factor.

Consider thecy.get()returns multiple elements, then when you can pass the contention{multiple: true} to the click()case habituate the below command.

Example:

cy.get (' [id^=react-btn] ') .click ({multiple: true})

As a outcome, Cypress iteratively clicks on each element.

6. Cypress Click with Keyboard Key Combinations

In real use case scenario, at times one has to chatter an element by holding Alt, Ctrl, or any early key. Cypress allows these activeness where click and keyboard combinations are required.

Here is the list of valid key combinations that is support by Cypress click events:

• altKey or optionKey:Alt key for windows. Option Key for Mac
• ctrlKey or controlKey:Control Key for both Windows and Mac
• metaKey or commandKey or cmdKey:Windows Key for Windows OS or Command Key in for Mac
• shiftKey:Shift Key for both Windows and Mac

Any of the above keys can be combined with Cypressclick() as realize in the model below. In this example, clicking on checkbox, while pressing shiftkey

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

cy.get (' input [type=checkbox] [id='vehicle1 '] ') .click ({shiftKey: true,})

Handling Double Click Event in Cypress Test Automation

Cypress supports double click event withdblclick (), the syntax and variations are similar to the Cypressclick()event discussed in the old section. Similar to the click event, the double click also accepts different argument.

1. Cypress Double Click with No Arguments

To double click on a DOM element, use the below command:

cy.get (' # mydblclicklink ') .dblclick ()

2. Cypress Double Click on Position of Elements

By nonremittal the double click is performed on the center of the element. However, you can alter this default behavior by passing an argument to thedblclick () function.

List of valid twofold click place in cypress is as postdate:

• topLeft
• top
• topRight
• left
• center
• right
• bottomLeft
• bottom
• bottomRight

For representative, to double click on the bottom of the image using Cypress click, using the below command

cy.get (' # myImage ') .dblclick ('bottom ')

3. Cypress Double Click with Co-ordinates

The coordinates can be surpass to thedblclick ()with respect to the ingredient boundary in Cypress, For model,30pxfrom the left and10pxfrom the top can be fix as seen in the command below:

cy.get (' # button1 ') .dblclick (30, 10)

4. Force Double Click in Cypress

Similar to the Force Click, Cypress also allows force double click event on a DOM element as seen in the model below:

cy.get (' # button1 ') .dblclick ({strength: true})

cy.get (' # button1 ') .dblclick ('topRight ', {forcefulness: true})

5. Cypress Double Click on Multiple Elements

By default, Cypress will iteratively utilise the doubled click to each factor. To disable this characteristic we can use{multiple: false}as seen in the exemplar below.

cy.get (' # mybutton ') .dblclick ({multiple: false})

6. Cypress Double Click with Key Combinations

Similar to the Click Events, Cypress allows Double Click with Key Combinations action where click and keyboard combinations can be triggered together. Here is the list of valid key combinations that is supported by Cypress double click case:

• altKey or optionKey:Alt key for window. Option Key for Mac
• ctrlKey or controlKey:Control Key for both Windows and Mac
• metaKey or commandKey or cmdKey:Windows Key for Windows OS or Command Key in for Mac
• shiftKey:Shift Key for both Windows and Mac

Any of the above keys can be combined with Cypressdblclick ()as seen in the illustration below. In this example, doubled clicking on the checkbox, while pressing Shift key.

cy.get (' input [type=checkbox] [id='vehicle1 '] ') .click ({shiftKey: true,})

Right-click employ Cypress Test Automation Tool

The right-click is not used lots in terms of automation. The right-click syntax is very similar to how click and double click work in Cypress.

1. Cypress Right-click with No Arguments

You can right-click in Cypress using the below code:

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

2. Cypress Right-click on Position of Elements

While the list of valid positions remain the same for rightclick () as that of click () and dblclick (), you can rightclick using the dictation below

cy.get (' # open-menu ') .rightclick ('topRight ')

3. Right-click with coordinate in Cypress

The coordinates can be passed to the rightclick () with respect to the element boundary in Cypress, For example,15pxfrom the left and40pxfrom the top can be specified as seen in the dictation below:

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

4. Force Right-click in Cypress

To force right-click in cypress use the following command:

cy.get (' # open-menu ') .rightclick ({force: true})

5. Cypress Right-click on Multiple Elements

By default Cypress let only right-clicking on a single element, if you try to click multiple elements at erst, the Cypress results in an error. The Cypress argumentation{multiple: true}allows right-clicking on multiple ingredient.

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

6. Cypress Right-click with Key Combinations

While the list of valid key combinations remain the same forrightclick ()as that ofclick() and dblclick (), you can rightclick while pressing a key using the command below

cy.get ('.menu-item ') .rightclick ({metaKey: true,})

Trigger Event in Cypress

The trigger()is a special type of low-level utility available in the Cypress that aid dispatch the different types of mouse events. It triggers the specified event using.trigger ().

This utility supports many different types of events as follows:

1. Trigger mouse click in Cypress

In the above subdivision,cy.get () .click ()was employ for clicking element. An alternative way to click element in Cypress is by usingcy.get () .trigger ()to trigger mouse click case as seen below

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

Similarly you can pass mouseup, mousedown, mousemove, and mouseover, as events just like click, as seen in the instance below.

cy.get (' # mybutton ') .trigger ('mousedown ');

Just like click()the trigger besides takes contention such as position, coordinates, and options like bubbles, etc.

2. Trigger event with Position in Cypress

While the list of valid positions rest the same for initiation () as that of click (), rightclick (), and dblclick (), you can trigger a mouse event with postion using the command below:

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

3. Trigger case with Coordinates in Cypress

The coordinates can be passed to thetrigger()with esteem to the top left corner in Cypress. For example,15pxfrom the left and40pxfrom the top can be specified as understand in the bid below

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

4. Specify the clientX and clientY for the event in Cypress

The clientX and clientYoverride the default auto-positioning found on the element itself.

cy.get ('button ') .trigger ('mousemove ', {clientX: 200, clientY: 300})

Run your Cypress Tests with Events in BrowserStack

BrowserStack countenance you to execute your Cypress test scripts or specs on multiple platforms and multiple browser edition. Interestingly you do not feature to change Cypress eyeglasses, all you have to do is a bare configuration set up as shown in the next measure:

Step 1: Install

Step 2: Create a browserstack.jsonfile using thebrowserstack-cypress init command

Step 3:Enter the below code to thebrowserstack.json file

{'' auth '': {'' username '': `` & lt; my_username & gt; '', '' access_key '': `` & lt; my_access_key & gt; ''}, '' browsers '': [{'' browser '': `` chrome '', '' os '': `` Windows 10 '', '' versions '': ['' latest '', '' late - 1 '']}], '' run_settings '': {'' cypress_config_file '': `` ./cypress.json '', '' cypress_version '': `` 9 '', '' project_name '': `` My sandbox project '', '' build_name '': `` Build no. 1 '', '' latitude '': `` 2 '',}}

Step 4:Configure the cypress.json file to include the .js files.

{'' testFiles '': [`` * .js '']}

Step 5:Execute your BrowserStack Test by using the below command

browserstack-cypress run –sync

Talk to an Expert

Conclusion

Bear in mind that must be executed on real browsers for accurate results. Start running tests on 30+ versions of the modish browsers across Windows and macOS with BrowserStack. Use instant, hassle-free Cypress parallelization to and get fast event without compromising on accuracy.

Detect bugs before exploiter do by testing software in with BrowserStack.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides