Keyboard simulation in CypressIO

In CypressIO, we can also interact with the keyboard functions with the help of the command type(). Let us understand it with the help of a simple program.

Example program: In this program, we are interacting with the enter key in the keyboard.

describe("keyboard simulation", () => {
  it("should submit search box by pressing enter", () => {
    cy.visit("http://google.com");
     //enter is given within the type().Which means after typing the text hits enter key
    cy.get("input[name=q]").type("type something{enter}");
  });
});

Output :

keyboard-simulation-cypress-io

Just like the ENTER key, other keys also can be passed inside the type(), they are

Sequence Notes
{{} Types the literal { key
{backspace} Deletes character to the left of the cursor
{del} Deletes character to the right of the cursor
{downarrow} Moves cursor down
{end} Moves cursor to the end of the line
{enter} Types the Enter key
{esc} Types the Escape key
{home} Moves cursor to the start of the line
{insert} Inserts character to the right of the cursor
{leftarrow} Moves cursor left
{movetoend} Moves cursor to the end of the typeable element
{movetostart} Moves cursor to the start of the typeable element
{pagedown} Scrolls down
{pageup} Scrolls up
{rightarrow} Moves cursor right
{selectall} Selects all text by creating a selection range
{uparrow} Moves cursor up

Text passed to .type() may also include any of these modifier character sequences:

Sequence Notes
{alt} Activates the altKey modifier. Aliases: {option}
{ctrl} Activates the ctrlKey modifier. Aliases: {control}
{meta} Activates the metaKey modifier. Aliases: {command}, {cmd}
{shift} Activates the shiftKey modifier.

Mouse hover[Mouse move] in CypressIO

Sometimes we may need to hover[moving the mouse] on submenus then only we may get the options for the submenu. To perform hover, we should get the CSS of the element and invoke the jQuery method called invoke("show") in Cypress IO.

For example, Sub-menu in the below image shows the option only when you hover your mouse.
hidden-options-cypress
In the below example, we are hovering on a sub-menu and selecting the option CherCher Tech, the submenu has class name='dropdown-content'

Example program :

describe("Mouse Hover on submenu", () => {
  it("should show submenu options", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    //show method can be applied only for the immediate parent
    cy.get("div.dropdown-content").invoke("show");
    cy.contains("CherCher Tech").click();
    cy.url().should("include", "chercher.tech");
  });
});

Output: The program successfully executes and re-directs to another URL.

mouse-hover-cypress

Click action in CypressIO

Single-click

.click() is the command used to perform, single-click action on a specified element.

Example program :

describe("Handling alerts ", () => {
  it("should handle the alerts automatically", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    cy.get('[name="alert"]').click();
  });
});

Output :

single-click-cypressio

Double-click

.dblclick() is the command used to perform the double click on a specified element.

Syntax :

get("").dblclick()
get("").dblclick(options)
get("").dblclick(position)
get("").dblclick(position, options)
get("").dblclick(x, y)
get("").dblclick(x, y, options)
  • x (Number, String): The distance in pixels from the element’s left to issue the double click.
  • y (Number, String): The distance in pixels from the element’s top to issue the double click.

Example program :

describe("Mouse simulation", () => {
  it("should load website with selectbox", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    cy.get("#double-click").dblclick();
  });
});

Output :

doubleclick-cypressio

Right-click in CypressIO

.rightclick() is the command used to perform the right-click action on a specified element.

Syntax :

.rightclick()
.rightclick(options)
.rightclick(position)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)
  • x (Number, String): The distance in pixels from the element’s left to issue the right click.
  • y (Number, String): The distance in pixels from the element’s top to issue the right click.

Example program :

describe("Mouse simulation", () => {
  it("should load website with selectbox", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("http://swisnl.github.io/jQuery-contextMenu/demo.html");
    cy.get(".context-menu-one").rightclick();
  });
});

Output :

right-click-cypress

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions