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:
Open chrome browser & launch https://selectorshub.com/
As you can see above, this plugin can be used with various browsers: CHROME, FIREFOX, EDGE, OPERA
Click CHROME
You would be redirected to https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh/
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!