Cypress can work on JQuery objects and call its methods. Thus Cypress can act upon both Cypress and non- Cypress commands. Cypress is asynchronous in nature. It is handled by resolving promises for every Cypress command. This whole process is taken care of by Cypress internally and wrapped and hidden from the end user.However while dealing with JQuery methods, the promise cannot be resolved internally by Cypress and we need to manually resolve them with the help of the then() method in the code.Let us take the example of text() method which is a non-Cypress command and is based on ... Read More

Cypress is built on node.js server and it works with Javascript programming language. Anything which is dependent on node.js is asynchronous in nature and so Cypress commands work in that mode.When we have a group of test steps in a test case, all the steps start executing in parallel without waiting for the previous step to complete. In a synchronous execution, each test step runs in sequence and we move to the next step only if the previous step execution is done.Thus in asynchronous execution like Cypress, each test step is independent to each other even though the test steps ... Read More

Cypress can validate the text on an element with the help of jQuery text() method. This method shall help us to fetch the text content on the selected element. We can also put assertions on the text content of the element.cy.get('.product').should('have.text', 'Tutorialspoint');We can do validations on the text like verify what it contains or matches with the help of the Javascript methods match(), include() and so on. Thus Cypress commands can work on non-Cypress methods with the help of jQuery objects and invoke methods on them.ExampleCode Implementation with the text() method.// test suite describe('Tutorialspoint Test', function () { // test ... Read More

Cypress has the get() and find() methods to find elements based on locators on the page. The objective achieved by these two methods are almost identical. The get() method fetches one or a list of web elements with the help of the css locators specified as a parameter to that method.Syntaxcy.get(selector, args)The second parameter of the get() method is optional. There can be of three types of parameter as listed below −log − The default value of log parameter is true. This determines if there will be logging of the command on the console.cy.get('.product', { log: false });withinSubject − The ... Read More

After a test case is run on Cypress, we need to debug and understand the logs in case of a failure. Cypress has the feature to provide information to the user on what incident took place before and after the failure had happened.The above screenshots show a full log of the test cases executed with pass/ fail results. If we investigate more into the step by clicking on it, the element on which an action has been performed gets highlighted with a red circle. For example the type command in the screenshot.On further investigation we found out that we have ... Read More

Cypress has a list of common assertions that can be applied to any element on the browser. Assertions are the checkpoints that confirm if a test step of the automated test case passed or failed. Thus it checks the expected state of the application under test.Cypress bundles the Chai, JQuery and Sinon libraries for assertions. Some of the assertions are associated with the element along with the parent command and cannot be used as a standalone command. For example, should().However there are some assertions which act upon directly on the elements and not dependent upon other commands. For example, expect(). ... Read More

Apart from the css selector that Cypress uses for unique identification of elements, there is a Cypress plugin which automatically provides the css for each element. This plugin is called Open Selector Playground and comes with the Cypress Test Runner.This plugin appears in the left upper section of the Test Runner window. We need to click on that and next spy on the element that we want to identify. On spying on that element, css selector value gets populated by default.To identify the element, spy on that element. Please note the css value gets populated as #gsc-i-id1 along with the ... Read More

Cypress has to identify elements on the page to perform actions on them. The unique identification of the elements is done in Cypress with the help of jQuery selectors which is basically derived from css selectors.Other automation tools like Selenium supports locators like id, name, classname, link text, partial link text, xpath and css selector.The rules for writing css selector are listed below −With the help of class name attribute. The selection of elements based on the unique class name is done with the help of (.) symbol. The customized css expression should be (.classname).Let us consider the below html ... Read More

Cypress supports Chrome, Firefox, Microsoft Edge and Electron browsers for running the test cases. Cypress automatically bundles the Electron browser once we download it in our machines.The browsers get updated with newer versions regularly. To match with this, Cypress also fixes issues in the latest versions of the released browsers. However with each Electron browser version, Cypress is thoroughly tested and all test cases are expected to pass.While running the test case from the test runner, we have to choose the browser in which we want to run from the dropdown appearing from the upper right corner of the Test ... Read More

Once Cypress installation is done and the test runner is successfully set up we shall create a JavaScript file under the examples folder. This comes under the integration folder provided by the Cypress framework template.In order to create a Cypress test, we need to follow any of the Javascript testing frameworks like Jasmine or Macha. We have to implement our Cypress test and make it runnable with the help of these frameworks.Mocha framework gets by default bundled with the Cypress installation. We shall follow the rules listed below as supported by Mocha or Jasmine framework −First we should have a ... Read More