Skip to main content

AUTOMATICALLY CAPTURE CSS SELECTOR IN CYPRESS

 Adding the PDF link as the images are not fully loaded:

https://docs.google.com/document/d/17XTzUZDT1set4VwpK5ULWw7jndcMwGEkfApFo5jyA84/edit?usp=sharing



Tutorial 6 – Capture css selector automatically

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 iconagain.

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!


Labels:

Comments

Post a Comment

Popular posts from this blog

Add, remove, search an item in listview in C#

Below is the C# code which will help you to add, remove and search operations on listview control in C#. Below is the design view of the project: Below is the source code of the project: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace Treeview_control_demo {     public partial class Form2 : Form     {         public Form2()         {             InitializeComponent();             listView1.View = View.Details;                   }         private void button1_Click(object sender, EventArgs e)         {             if (textBox1.Text.Trim().Length == 0)...
Post a Comment
Read more

MySQL practical Tutorials part 9- SQL not operator, SQL Not Like, SQL greater than, SQL less than greater than operator

 ========================================================================= Not Equal SELECT title FROM books WHERE released_year = 2017;   SELECT title FROM books WHERE released_year != 2017;   SELECT title, author_lname FROM books;   SELECT title, author_lname FROM books WHERE author_lname = 'Harris';   SELECT title, author_lname FROM books WHERE author_lname != 'Harris'; ========================================================================= Not Like SELECT title FROM books WHERE title LIKE 'W';   SELECT title FROM books WHERE title LIKE 'W%';   SELECT title FROM books WHERE title LIKE '%W%';   SELECT title FROM books WHERE title LIKE 'W%';   SELECT title FROM books WHERE title NOT LIKE 'W%'; ========================================================================= Greater Than SELECT title, released_year FROM books ORDER BY released_year;   SELECT title, released_year FROM books  WHERE released_year > 2000 ORDER BY release...
Post a Comment
Read more

MULTIPLEXER , Design & Implement the given 4 variable function using IC74LS153. Verify its Truth-Table

TITLE: MULTIPLEXER   AIM: Design & Implement the given 4 variable function using IC74LS153. Verify its Truth-Table.   LEARNING OBJECTIVE: ·        To learn about IC 74153 and its internal structure. ·        To realize 8:1 MUX and 16:1 MUX using IC 74153.   COMPONENTS REQUIRED: IC 74153, IC 7404, IC 7432, CDS, wires, Power supply. IC PINOUT:            1)     IC 74153 2)      IC 7404:                                              3) IC 7432 THEORY:   ·        Multiplexer is a combinational circuit that is one of the most widely used in digital design. ·        The multiplexer is a data selector which gates one out of several inputs to a sin...
Post a Comment
Read more