Learn How To Automatically Capture CssSelector in Cypress

Tutorial 6 –​​ How to capture css selector automatically​​ in Cypress

What you will Learn :
Automatically capture css selectors​​ instead of creating them manually

Automatically capture css selectors instead of creating them manually

So far, we have been creating css selectors manually. If you want to automatically capture the css selectors instead of constructing them manually, there are 3 ways:

  • Right click and inspect element ->​​ Copy -> Copy selector

  • SelectorsHub plugin​​ 

  • Selector playground in Test Runner

Copy selector

So let us​​ first​​ see​​ ‘Copy selector’.​​ 

Launch​​ http://demo.nopcommerce.com/​​ and inspect nopCommerce image

Now right click the corresponding tag in the html page >Copy >Copy selector

Paste it in notepad. So this is the css selector for this image

body > div.master-wrapper-page > div.header > div.header-lower > div.header-logo > a > img

If you search for this css selector, you would see it points to the image​​ 

The below syntax is interpreted as:​​ body​​ tag contains​​ div​​ tag with a class​​ ‘master-wrapper-page’. This div tag further contains ‘div’ tag with a class ‘header’. This div tag further contains ‘div’ tag with a class ‘header-lower’. This div tag further contains ‘div’ tag with a class ‘header-logo’. This div tag further contains anchor ‘a’ tag. The ‘a’ tag contains ‘img’ tag.
body > div.master-wrapper-page > div.header > div.header-lower > div.header-logo > a > img

SelectorsHub plugin

Let us now see second way to automatically generate css selector using ‘SelectorsHub​​ plugin.​​ SelectorsHub​​ plugin​​ can be​​ used​​ with​​ chrome/firefox browsers to inspect web elements. To install this plugin, follow below steps:

 

  • As you can see above, this plugin can be​​ used with various browsers: CHROME, FIREFOX, EDGE, OPERA

 

  • Click CHROME

 

 

  • Click ‘Add to Chrome’, the following pop-up comes

 

  • Click ‘Add extension’, the plugin gets added in chrome browser

 



So this is how we add the plugin. Let us now see how to use this plugin.

 

Open chrome browser & launch​​ https://www.facebook.com/​​ 

 

Press the F12 key​​ and click ‘Elements’ section

Next, see below. Click the double arrow mark >>

You would see ‘SelectorsHub’ option

 

Click ‘SelectorsHub’ option, you would now see a section below

 

On the facebook page,​​ we will​​ now​​ inspect​​ the​​ username​​ field​​ ‘Email address or phone number’

To do that, click the arrow mark​​ . This will help us in​​ inspecting any element on the page​​ 


Click the​​ username field ‘Email address or phone number’

 

Notice above, cssSelector​​ gets​​ generated​​ automatically​​ as #email

 

Click​​ ‘click to copy​​ relative cssSelector’​​ 

 

Paste it in Selectors text field​​ 

 

Hit ‘Enter’ key. You would see​​ ‘1 element matching’ gets displayed and dotted line appears around username field textbox, see below

This is how we can generate the cssSelector automatically using SelectorsHub plugin.

So far we have seen 2 ways to automatically generate css selector.​​ Let us now see the 3rd​​ option.

Selector playground in Test Runner

Let us​​ now​​ see the 3rd​​ option in cypress Test runner itself.​​ Let us launch the test runner

Click​​ ‘MyFirstTestScript.js’ to run the test

Wait for the test execution to get complete. Once complete, look for the ‘Open Selector Playground’ icon

Click the icon, the entire page gets highlighted on the right hand side

Click any field you want to inspect, you would see css selector gets generated that you can use in the cy.get method

​​ 

Similarly you can inspect another element

To disable the selector playground, just click the​​ playground​​ icon​​ ​​ again.

So these are the 3 methods to automatically​​ generate the css selector.

These selectors can​​ be​​ used​​ along with the cy.get method.​​ Recall that cy.get method​​ gets​​ you the element based on the selector we have passed.

This is how we use css selector to locate the elements in cypress.

Thanks for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024