Found 30 Articles for Cypress

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

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