Cypress Dashboard is an option that enables us to see the recorded tests and gives us detail on the events that took place during execution. It gives a visual display of the test execution, their reports and status of the runs. It is a useful tool while we are executing tests in the CI environment.Benefits of Cypress Dashboard are listed below −It gives information on the count of the number of test cases that passed, failed or skipped during execution.It gives full information on stack trace of the tests that got failed.It captures screenshots for failed test cases or when ... Read More

Cypress in its earlier versions was not capable of handling frames. However in its latest version, they have given us the solution to automate scenarios with frames. A frame is an html structure which resides inside another html structure.If we want to access an element which is inside a frame, first of all Cypress has to move its focus from the entire web page to the frame and then it interacts with the elements inside that frame. We have to install a plugin to work with frames in Cypress.We shall run the command npm install –D cypress-iframe from the project ... Read More

Sometimes on clicking a link or button, it opens to another window often known as the child window. Cypress has a unique way of handling child windows unlike other automation tools like Selenium and Protractor. It basically keeps no information on the child window by shifting its focus from the parent to the child window.Now let us understand why a link or a button opens a new webpage on a different tab considered as a child. This is due to the attribute target set in the html for that element. If omitted, it shall open in the same window.Cypress cannot ... Read More

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 ... Read More

Web tables can be handled with Cypress. A web table can be of two types − static and dynamic. A static web table has a fixed number of rows and columns. A dynamic web table on the other hand has rows and columns whose numbers do not remain fixed.In order to identify a particular column value in a table we need the help of css selector. A table structure has an html consisting of tag followed by and finally tag. The rows are represented by and the column values are represented by .With the help of ... Read More

Sometimes on clicking a link or button, it opens to another tab in the same browser. Cypress has a unique way of handling child tabs unlike other automation tools like Selenium and Protractor. It basically keeps no information on the child tab by shifting its focus from the parent to the child tab.Now let us understand why a link or a button opens a new webpage on a different tab considered as a child. This is due to the attribute target set in the html for that element. If omitted, it shall open in the same window.Cypress cannot directly handle ... Read More

Cypress has a unique way of working with alerts unlike other automation tools like Selenium or Protractor. Cypress basically automatically accepts alerts and we don’t have to write logic to handle them.There are two types of pop up, the alert pop up (with only OK button) and confirmation pop up (with OK and Cancel buttons). Cypress is designed in such a way that it shall click on the OK button on the pop up without needing any manual intervention. It has the feature of firing browser events.ExampleCode Implementation to handle alerts.describe('Tutorialspoint Test', function () {    // test case   ... Read More

There are numerous types of dropdowns on the webpage. The types of dropdowns are static and dynamic. While the static dropdowns have with the tag, the dynamic dropdowns generally have the or tags.The static dropdowns having the tag is handled in Cypress with the help of the in built command called the select(). The dynamic dropdowns are mostly the auto suggestive dropdown where on typing the first few letters of our search, a list of suggested items get displayed.The logic is to type a few characters inside the dynamic dropdown. Based on that a list of ... Read More

Cypress handles static dropdowns with the help of its in built commands. For a static dropdown, the tagname of the element should be and its child elements should have the tagname .The command used is select(). This command needs to be chained with a command that gives DOM elements having tagname as select. The various usage of select commands are listed below −select(value) − The select() command with argument value selects the option with that value. The get method should have the css selector of the static dropdown when chained with select().cy.get('select').select('value1')select(text) − The select() command with argument text ... Read More

Cypress handles checking and unchecking of checkbox with the help of its in built functions. For a checkbox, the tagname of the element should be input and the type attribute in the html code should be checkbox.The command used is check(). This command needs to be chained with a command that gives DOM elements and the element should be of type checkbox. The various usage of check commands are listed below −check() − The check() command without argument checks all the checkboxes. The get method should have the [type="checkbox"] as the css selector when it is chained with check() method.cy.get('[type="checkbox"]').check()check() ... Read More