Cypress Commands – UI Interaction Commands

Each UI automation tool provides some APIs or methods to interact with the web elements, so the designated operation can be performed on the UI element. In addition to this, these methods also assist in the needed user journey simulation. Continuing the same practice, Cypress also provides Cypress Commands – UI Interaction Commands which can simulate the user’s interaction with the application.

Subsequently, in this article, we will be covering details of all those commands. Additionally, we will also know how cypress processes these commands on each element, in the following sections:

• What are the UI interaction commands provided by Cypress?
  • Click Command
  • Double Command
  • Right Click Command
  • Type Command
  • Clear Command
  • Check/UnCheck Command
  • Select Command
  • Trigger Command
• What Cypress performs checks/Actions for each UI action?

 

 

Cypress Commands – UI Interaction Commands?

There are multiple commands which Cypress provides, which fires the events a browser would fire. Moreover, they simulate the user’s behavior of interacting with the application under test. Some of these commands are:

 

 

Cypress – Click Command

.click() command: The click() command clicks any DOM element. Moreover, one can invoke it using the following syntaxes:

Where,

Options: The possible values for the “Option” parameter are:

Option	Default	Description
log	true	It prints the command in the command log.
force	false	It forces the action.
multiple	false	Serially click multiple elements
timeout	defaultCommandTimeout	Time to wait for .click() to resolve before timing out.

 

Positions: The possible values for the “Position” parameter are:

• • center (Default value)
  • topLeft
  • top
  • topRight
  • left
  • right
  • bottomLeft
  • bottom
  • bottomRight

 

Let’s understand the details and usage of click method with the help of the following examples:

For Example:

 

Cypress – Double Click Command

.dblclick() command: The dblclick() command double clicks on a DOM element. Additionally, one can invoke it using the following syntaxes:

Where,

Options: It accepts the same options, as mentioned in the “.click()” command above.

Positions: It accepts the same options, as mentioned in the “.click()” command above.

 

Let’s understand the details and usage of “dblclick” method with the help of the following examples:

For Example:

 

Cypress – Right Click Command

.rightclick() command: The rightclick() command right-clicks a DOM element. Moreover, one can invoke it using the following syntaxes:

Where,

Options: It accepts the same options, as mentioned in the “.click()” command above.

Positions: It accepts the same options, as mentioned in the “.click()” command above.

 

Let’s understand the details and usage of “rightclick()” method with the help of the following examples:

For Example:

 

Cypress – Type Command

.type() command: The type() command types into a DOM element. Additionally, one can invoke it using the following syntaxes:

Where,

Options: The possible values for the “Options” parameter are:

Option	Default	Description
log	true	Displays the command in the Command log.
delay	10	Delay in secs after each keypress
force	false	Forces the action. Additionally, it disables waiting for actionability.
parseSpecialCharSequences	true	Parse special characters for strings surrounded by {}, such as {esc}. Set to false to type the literal characters instead.
release	true	Keep a modifier activated between commands.
timeout	defaultCommandTimeout	Time to wait for .type() to resolve before timing out.

 

Let’s understand the details and usage of “type()” method with the help of the following examples:

For Example:

 

Cypress – Clear Command

.clear() command: This command clears the values of input or text-area. Additionally, the invoking of clear() command happens using the following syntaxes:

Where,

Options: The possible values for the “Options” parameter are:

Option	Default	Description
log	true	Displays the command in the Command log
force	false	Forces the action, disables waiting for actionability
timeout	defaultCommandTimeout	Time to wait for .clear() to resolve before timing out

 

Let’s understand the details and usage of “clear()” method with the help of the following examples:

For Example:

 

Cypress – Check/UnCheck Command

.check()/.uncheck command: These methods are used to check/uncheck checkboxes and radio buttons. Moreover, following syntaxes invoke these commands:

Where,

Options: The possible values for the “Options” parameter are:

Option	Default	Description
log	true	Displays the command in the Command log
force	false	Forces the action, disables waiting for actionability
timeout	defaultCommandTimeout	Time to wait for .check() to resolve before timing out

 

Let’s understand the details and usage of “check() and uncheck()” methods with the help of the following examples:

For Example:

 

Cypress – Select Command

.select command: The select() command selects an option within <select> tags. Additionally, one can invoke it using the following syntaxes:

Where,

Options: It accepts the same options, as mentioned in the “.click()” command above.

 

Let’s understand the details and usage of “select()” method with the help of the following examples:

For Example:

 

Cypress – Trigger Command

.trigger command: The trigger() command triggers an event on a DOM element. Additionally, one can invoke it using the following syntaxes:

Where,

 Options: The possible values for the “Options” parameter are:

Option	Default	Description
log	true	It displays the command in the Command log.
force	false	Forces the action. Additionally, it disables waiting for actionability.
bubbles	true	Whether the event bubbles
cancelable	true	Whether the event is cancelable
timeout	defaultCommandTimeout	Time to wait for .trigger() to resolve before timing out

 

Let’s comprehend the details and usage of “trigger()” method with the help of the following examples:

For Example:

 

 

What Cypress performs Checks/Actions for each UI action?

Cypress performs some pre-checks and actions before it issues any of the commands, as mentioned above. Additionally, these pre-checks and actions ensure that the element is ready for receiving the planned action. Few of these checks and actions are:

• Firstly, it ensures that no element is hidden.
• Secondly, it ensures that the element is not disabled.
• Thirdly, it ascertains that the element is not detached.
• Fourthly, it ensures that the element is not read-only.
• In addition to the above, it ensures that the element is not animating.
• Sixthly, it makes sure that the element is not covered.
• Moreover, it scrolls the element in port-view.
• Finally, it scrolls the element to fix the position if covered by another element.

So, these are few of the validations and actions that Cypress tries in-built to ensure that the element is actionable. Still, if Cypress is not able to interact with the element, it will raise an error mentioning the exact reason why the element was not actionable.

 

Let’s understand the usage of all these UI interaction commands with the help of following code snippet :

For Example,

In the above code, we covered the below cases :

1. In the first case, we are opening the website and typing an email address in one text box. Additionally, we are doing an assertion of the same as well.  Moreover, there have been multiple options practiced with type command for typing particular character sequences or special keys. After that, there are assertions to check the disabled of any input.
2. The second case is about focussing on a web element. Additionally, it verifies the assertion for the same and also its properties.
3. Thirdly, the case is about blur-off a DOM element and verifying the assertion for the same. Moreover, it also verifies its properties.
4. Fourthly, we are learning a clear command of how we can clear the input or text area element. Moreover, we verify that it should have an empty value.
5. The fifth case is “it” block, where we are checking how we can submit a form. Additionally, we also verify the contain assertion along with it.
6. Sixthly, we are checking how we can use click command for a DOM element along with different options of clicking it on different positions.
7. In the seventh case, we are verifying the double click command for an element. Additionally, we also carry out the assertions.
8. Eighthly, the case involves checking how to check a checkbox or radio element. Additionally, it verifies that the desired action has taken place and ensures the accomplishment of the work.
9. In the ninth case, we are verifying how to uncheck a checkbox or radio element. Moreover, we ensure the necessary verifications.
10. The tenth case explains how to work with a dropdown where we have to select an option from <select> tag.
11. In the 11th case of “it” block, the scrollIntoView( ) command is explained. Additionally, it also includes different usages of what options we can use for scrolling.
12. After that, the “it” block explains how we can trigger an event on a DOM element.
13. Lastly, we have the scrollTo( ) command and its different usages that how we can scroll on a specific DOM element.

 

Finally, let’s run the complete test case. Subsequently, it will show the result as follows:

 

Consequently, as highlighted in the above screenshot, we can see that all test cases we run to cover the UI interaction and its actions have passed. Additionally, I would suggest, please take out some time here to expand through every test and see on the test runner how every command performed on the designated website. The reason being, you will find different situations in your automation journey.

 

 

Key Takeaways

• Cypress provides various commands like click(), dblclick(), rightclick(), type() etc. Additionally, these commands simulate user actions on the UI elements.
• Moreover, Cypress internally performs various pre-checks to ensure that the UI element is in the interactable state, before firing the command for the element.

Conclusively, let’s move to the next article. We will understand various Cypress and JQuery commands, which, in turn, will be handy during the automation using Cypress.