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.