Mouse over Actions with Cypress

The mouseover actions are very common in web pages where a list of elements becomes visible once we hover on it. Cypress does not support mouse over actions like other automation tools like Selenium as it considers it to be flaky.

Cypress shall manipulate DOM elements to perform mouse over actions. Cypress takes the help of show() method in JQuery. The show() method displays the elements which are hidden [ having the CSS property display:none] and selected. Also, the show() method only works with the immediate parent in the DOM of the hidden element.

Now to invoke any JQuery function, Cypress takes the help of the invoke() command which is used to invoke a function. The invoke() method cannot be chained directly with cy.

Syntax

.invoke(name of function)
.invoke(options, name of function)
.invoke(name of function, arguments..)
.invoke(name of function, arguments..)
.invoke(options, name of function, arguments…)

The name of the function refers to the function that has to be invoked. Also, we can have additional arguments to the function call and there is no restriction on the count of the number of arguments.

There can be of two types of options as listed below which can modify the default behavior of .invoke() −

• log − The default value of log is true.

• timeout − The default value of timeout parameter is defaultCommandTimeout (4000 milliseconds). This the duration to wait for .invoke() to conclude.

cy.get('#txt').invoke('show')

Example

Coding Implementation with JQuery show() method.

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case5', function (){
      // launch the application
      cy.visit("https://www.amazon.com/");
      // to display hidden element with invoke() with show
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click on the hidden element
      cy.contains('Sign').click();
      //assert to verify the url
      cy.url().should('include','signin');
   });
});

Cypress has another workaround to click on the hidden elements that appear only on mouse over action on the page. This is done by passing an option as an argument to the click() command in Cypress.

click({ force: true }) − The click() command with the option force set to true [force:true ] modifies the default behavior of the hidden element and we can click on it.

Syntax

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

Example

Coding implementation with force option for hidden element.

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case5', function (){
      // launch the application
      cy.visit("https://www.amazon.com/");
      //click on the hidden element with option force set to true
      cy.contains('Sign').click({force:true});
      //assert to verify the url
      cy.url().should('include','signin');
   });
});