Skip to content

Iptv Assist

Learn More from us

Menu
  • HOW TO
  • Firestick
  • Chromecast
  • PC Apps
  • Lg Smart TV
  • IPTV Services
  • Automation Testing
  • Smart TV
  • Software Testing Tools
  • Contact Us
Menu

How to Use CSS Selector for Identifying Web Elements for Selenium Scripts – Selenium Tutorial #6

Posted on February 5, 2023

Best Iptv Service Provider 2023 With 40k+ Channels And 100k+ VOD . 24/7 Suppport . Paypal Supported

In our previous Selenium tutorial, we learned different types of locators. We also learned how to use: ID, ClassName, Name, Link Text, and XPath locators for identifying web elements on a web page.

Best Iptv Service Provider 2023 With 40k+ Channels And 150k+ VOD . Hurry Up

In continuation with that, today we will learn how to use CSS Selector as a Locator. This is our 6th tutorial in our free Selenium Training series.

Recommended IPTV Service Providers

  1. IPTVGREAT – Rating 4.8/5 ( 600+ Reviews )
  2. IPTVRESALE – Rating 5/5 ( 200+ Reviews )
  3. IPTVGANG – Rating 4.7/5 ( 1200+ Reviews )
  4. IPTVUNLOCK – Rating 5/5 ( 65 Reviews )
  5. IPTVFOLLOW -Rating 5/5 ( 48 Reviews )
  6. IPTVTOPS – Rating 5/5 ( 43 Reviews )

 

Using CSS Selector as a Locator:

CSS Selector is the combination of an element selector and a selector value which identifies the web element within a web page. The composite of an element selector and selector value is known as Selector Pattern.

CSS Selector Selenium Locator

Selector Pattern is constructed using HTML tags, attributes and their values. The central theme behind the procedure to create CSS Selector and Xpath are very much similar underlying the only difference in their construction protocol.

Like Xpath, CSS selector can also locate web elements having no ID, class or Name.

So now gearing ahead, let us discuss the primitive types of CSS Selectors:

Using CSS Selector as a Locator

 

What You Will Learn:

  • CSS Selector: ID
  • CSS Selector: Class
  • CSS Selector: Attribute
  • CSS Selector: ID/Class and attribute
  • CSS Selector: Sub-string
  • CSS Selector: Inner text

CSS Selector: ID

In this sample, we would access “Email” text box present in the login form at Gmail.com.

The Email textbox has an ID attribute whose value is defined as “Email”. Thus ID attribute and its value can be used to create CSS Selector to access the email textbox.

Creating CSS Selector for web element

Step 1: Locate/inspect the web element (“Email” textbox in our case) and notice that the HTML tag is “input” and value of ID attribute is “Email” and both of them collectively make a reference to the “Email Textbox”. Hence the above data would be used to create CSS Selector.

Using CSS Selector as a Locator 2

Verify the locator value

Step 1: Type “css=input#Email” i.e. the locator value in the target box in the Selenium IDE and click on the Find button. Notice that the Email Text box would be highlighted.

Using CSS Selector as a Locator 3

Syntax

css=<HTML tag><#><Value of ID attribute>

  • HTML tag – It is the tag which is used to denote the web element which we want to access.
  • # – The hash sign is used to symbolize ID attribute. It is mandatory to use hash sign if ID attribute is being used to create CSS Selector.
  • Value of ID attribute – It is the value of an ID attribute which is being accessed.
  • The value of ID is always preceded by a hash sign.

Note: Also applicable for other types of CSS Selectors

  • While specifying CSS Selector in the target text box of Selenium IDE, always remember to prefix it with “css=”.
  • The sequence of the above artifacts is inalterable.
  • If two or more web elements have the same HTML tag and attribute value, the first element marked in the page source will be identified.

CSS Selector: Class

In this sample, we would access “Stay signed in” checkbox present below the login form at gmail.com.

The “Stay signed in” checkbox has a Class attribute whose value is defined as “remember”. Thus Class attribute and its value can be used to create a CSS Selector to access the designated web element.

Locating an element using Class as a CSS Selector is very much similar to using ID, the lone difference lies in their syntax formation.

Creating a CSS Selector for web element

Step 1: Locate/inspect the web element (“Stay signed in” checkbox in our case) and notice that the HTML tag is “label” and value of ID attribute is “remember” and both of them collectively make a reference to the “Stay signed in checkbox”.

Verify the locator value

Step 1: Type “css=label.remember” i.e. the locator value in the target box in the Selenium IDE and click on the Find Button. Notice that the “Stay signed in” checkbox would be highlighted.

Using CSS Selector as a Locator 4

Syntax

css=<HTML tag><.><Value of Class attribute>

  • . – The dot sign is used to symbolize Class attribute. It is mandatory to use dot sign if a Class attribute is being used to create a CSS Selector.
  • The value of Class is always preceded by a dot sign.

CSS Selector: Attribute

In this sample, we would access the “Sign in” button present below the login form at gmail.com.

The “Sign in” button has a type attribute whose value is defined as “submit”. Thus type attribute and its value can be used to create a CSS Selector to access the designated web element.

Creating a CSS Selector for web element

Step 1: Locate/inspect the web element (“Sign in” button in our case) and notice that the HTML tag is “input”, the attribute is type and value of type attribute are “submit” and all of them together make a reference to the “Sign in” button.

Verify the locator value

Step 1: Type “css=input[type=’submit’]” i.e. the locator value in the target box in the Selenium IDE and click on the Find Button. Notice that the “Sign in” button would be highlighted.

Using CSS Selector as a Locator 5

Syntax

css=<HTML tag><[attribute=Value of attribute]>

  • Attribute – It is the attribute we want to use to create CSS Selector. It can value, type, name etc. It is recommended to choose an attribute whose value uniquely identifies the web element.
  • Value of attribute – It is the value of an attribute which is being accessed.

CSS Selector: ID/Class and attribute

In this sample, we would access the “Password” text box present in the login form at gmail.com.

The “Password” text box has an ID attribute whose value is defined as “Passwd”, type attribute whose value is defined as “password”. Thus ID attribute, type attribute and their values can be used to create CSS Selector to access the designated web element.

Creating a CSS Selector for web element

Step 1: Locate/inspect the web element (“Password” text box in our case) and notice that the HTML tag is “input”, attributes are ID and type and their corresponding values are ”Passwd” and “password” and all of them together make a reference to the “Password” textbox.

Verify the locator value

Step 1: Type “css=input#Passwd[name=’Passwd’]” i.e. the locator value in the target box in the Selenium IDE and click on the Find Button. Notice that the “Password” text box would be highlighted.

Using CSS Selector as a Locator 5

Syntax

css=<HTML tag><. Or #><value of Class or ID attribute><[attribute=Value of attribute]>

Two or more attributes can also be furnished in the syntax. For example, “css=input#Passwd[type=’password’][name=’Passwd’]”.

CSS Selector: Sub-string

CSS in Selenium allows matching a partial string and thus deriving a very interesting feature to create CSS Selectors using substrings. There are three ways in which CSS Selectors can be created based on the mechanism used to match the substring.

Types of mechanisms

All the underneath mechanisms have symbolic significance.

  • Match a prefix
  • Match a suffix
  • Match a substring

Let us discuss them in detail.

Match a prefix

It is used to correspond to the string with the help of a matching prefix.

Syntax

css=<HTML tag><[attribute^=prefix of the string]>                

  • ^ – Symbolic notation to match a string using prefix.
  • Prefix – It is the string based on which match operation is performed. The likely string is expected to start with the specified string.

For Example: Let us consider “Password textbox”, so the corresponding CSS Selector would be:

css=input#Passwd[name^=’Pass’]

Match a suffix

It is used to correspond to the string with the help of a matching suffix.

Syntax

css=<HTML tag><[attribute$=suffix of the string]>                

  • # – Symbolic notation to match a string using suffix.
  • The suffix – It is the string based on which match operation is performed. The likely string is expected to ends with the specified string.

For Example, Lets again consider “Password textbox”, so the corresponding CSS Selector would be:

css=input#Passwd[name$=’wd’]

Match a substring

It is used to correspond to the string with the help of a matching substring.

Syntax

css=<HTML tag><[attribute*=sub string]>                

  • * – Symbolic notation to match a string using sub string.
  • Sub string – It is the string based on which match operation is performed. The likely string is expected to have the specified string pattern.

For Example, lets again consider “Password textbox”, so the corresponding CSS Selector would be:

css=input#Passwd[name$=’wd’]

CSS Selector: Inner text

The inner text helps us identify and create CSS Selector using a string pattern that the HTML Tag manifests on the web page.

Consider, “Need help?” hyperlink present below the login form at gmail.com.

The anchor tag representing the hyperlink has a text enclosed within. Thus this text can be used to create a CSS Selector to access the designated web element.

Syntax:

css=<HTML tag><:><contains><(text)>

  • : – The dot sign is used to symbolize contains method
  • Contains – It is the value of a Class attribute which is being accessed.
  • Text – The text that is displayed anywhere on the web page irrespective of its location.

This is one of the most frequently used strategies to locate web element because of its simplified syntax.

Owing to the fact that creating CSS Selector and Xpath requires a lot of efforts and practice, thus the process is only exercised by more sophisticated and trained users.

Next Tutorial #7: Proceeding ahead with our next tutorial, we would take the opportunity to introduce you with an extension of locating strategies. Thus, in the next tutorial, we would study the mechanism to locate web elements on Google Chrome and Internet Explorer.

We are covering Selenium Locators in more details as it is an important part of Selenium Script creation.

Let us know your queries/comments below.

Related

Best Iptv Service Provider 2023 With 40k+ Channels And 150k+ VOD . Hurry Up

Leave a Reply Cancel reply

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

Recent Posts

  • IPTV List: Best iptv lista 2023
  • IPTV Premium: Best Premium IPTV Service Provider List And Benefits
  • Nikon IPTV Review: Over 10,000 Live Channels for $12/Month
  • Iptvwings. Com Review: +18000 Live IPTV Channels ,+70000 Movies, +40000 TV show For $15/1 month
  • IPTVUNO Review: More Than 16000 Live TV channels, 55,000 Movies & VOD For $15/Month

Recent Comments

  1. IPTV List: Play lista iptv 2022 - Iptv Assist on Best IPTV Player in 2023 for Watching Live TV
  2. Cola IPTV – Over 18,000 Live Channels for $12/Month - Iptv Assist on FileLinked – How to Install on Firestick/Fire TV and Android Devices
  3. Cola IPTV – Over 18,000 Live Channels for $12/Month - Iptv Assist on 50+ Best IPTV Service Providers for Streaming Live TV 2023
  4. XoomsTV IPTV – Over 11,000 Channels & VOD for Under $13/Month on Best VPN for IPTV in 2023 and How to Install on Firestick/Android
  5. Voodoo Streams IPTV Review – Over 12,000 Channels for $11/Month - Iptv Assist on Dynasty TV IPTV Review – Over 6,000 Channels for $10/Month

Archives

  • February 2023

Categories

  • Activate
  • Agile Testing
  • Alternatives
  • Android
  • APK
  • Apple TV
  • Automation Testing
  • Basics of Software Testing
  • Best Apps
  • Breakfast Hours
  • Bug Defect tracking
  • Career in Software Testing
  • Chromebook
  • Chromecast
  • Cross Platform
  • Database Testing
  • Delete Account
  • Discord
  • Error Code
  • Firestick
  • Gaming
  • General
  • Google TV
  • Hisense Smart TV
  • HOW TO
  • Interview Questions
  • iPhone
  • IPTV
  • IPTV Apps
  • Iptv Service SP
  • IPTV Services
  • JVC Smart TV
  • Kodi
  • Lg Smart TV
  • Manual Testing
  • MI TV
  • Mobile Testing
  • Mod APK
  • newestiptv.com
  • News
  • Nintendo Switch
  • Panasonic Smart TV
  • PC Apps
  • Performance Testing
  • Philips Smart TV
  • PS4
  • PS5
  • Python
  • QA Certifications
  • QA Leadership
  • QA Team Skills
  • Quality Assurance
  • Reddit
  • Reviews
  • Roku
  • Samsung Smart TV
  • Screenshot
  • Selenium Tutorials
  • Sharp Smart TV
  • Skyworth Smart TV
  • Smart TV
  • Soft Skills For Testers
  • Software Testing Templates
  • Software Testing Tools
  • Software Testing Training
  • Sony Smart TV
  • Sports
  • Streaming Apps
  • Streaming Devices
  • Tech News
  • Test Management Tools
  • Test Strategy
  • Testing Best Practices
  • Testing Concepts
  • Testing Methodologies
  • Testing News
  • Testing Skill Improvement
  • Testing Tips and Resources
  • Toshiba Smart TV
  • Tutorials
  • Twitch
  • Types of Testing
  • Uncategorized
  • Vizio Smart TV
  • VPN
  • Web Testing
  • What is
  • Xbox
©2023 Iptv Assist | Design: Newspaperly WordPress Theme