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

display files and directories in Listview

Below is the C# code which displays all files and directories in listview control with their file size and creation date. If it is file then it also displays the extension of the file e.g. .txt, .jpg etc Below is the design view of the project: Listview to display files and directories with size and date created 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; using System.IO; namespace search_in_listview {     public partial class Form1 : Form     {         public Form1()         {             InitializeComponent();                   }         private void button1_Click(object sender, EventArgs ...
Post a Comment
Read more

Add worklog in Jira using Python

 Below is the Python code to add the worklog in Jira. You need to install a request library for this. Here is the code: import requests from requests.auth import HTTPBasicAuth import json url = "https://your jira address here/rest/api/2/issue/ticket_number/worklog" auth = HTTPBasicAuth("username", "jira access token") headers = {     "Accept": "application/json",     "Content-Type": "application/json" } payload = json.dumps({     "comment": {         "content": [             {                 "content": [                     {                         "text": "This is for QA Testing",                         "type": "text"                     } ...
Post a Comment
Read more