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
Cypress plugin for locators
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 Cypress command cy.get inside Test Runner.
Now let us implement a Cypress test case and identify the element with the help of the Open Selector Playground plugin.
Example
Code Implementation.
// test suite
describe('Tutorialspoint Test', function () {
// test case
it('Test Case1', function (){
// test step to launch a URL
cy.visit("https://www.tutorialspoint.com/index.htm");
// enter test in the edit box
cy.get("#gsc-i-id1").type("Cypress")
// wait for some time
cy.wait(3000)
});
});In the above code, cy is a global command which enables us to invoke any Cypress command. This cy does not require any object declaration and it comes automatically on downloading node modules. The visit() method is used to launch any web application.
Next get() method is used to find the element matching with the css value provided in the argument of the get() method and then enter text by the type() method. The text to be input is passed as an argument to the type() method.
Finally, we have given some wait time with the help of the wait() method. Though Cypress automatically handles synchronization issues, here we have provided a wait here since there is no action to be performed on the browser after entering the text in the edit box.
The wait() method has the parameter defined in milliseconds.
507 Views
