Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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');
});
});
2K+ Views
