How to use CSS Selector to identify Web elements in Selenium scripts

Before going into details, let’s find out:

What is CSS Selector?

In CSS, the selector is a template (predefined) for selecting the HTML elements you want to define styles for. Any web element that wants to follow the style of this template simply assigns this template selector name to them. For example:

• Header elements h1, h2 …
• The id and class properties of the elements: (#commonID, .commonClass …). Note that in a layout, the id attribute is unique, when there is more than one element, the class attribute should be used.
• Elements are based on relationships with other elements in the document hierarchy. For example:

Use CSS Selector as a Locator:

CSS Selector is a combination of element selector and selector value; used to identify web components. The sum of an element selector and the selector value is called the Selector Pattern.

Pattern selectors are built using HTML tags, their properties and values. The procedure for creating CSS Selector and XPath is very similar, both based on the only difference in their construction protocol.

Like XPath, the CSS selector can also locate web elements that don’t have: ID, class, or Name.

Types of CSS selectors:

CSS Selector: ID

In this example, we will access the “Email” text box in the login form at Gmail.com .

The Email text box has an ID attribute with the value “Email”. Therefore, the ID attribute and its value can be used to create a CSS Selector to access the email text box.

Create CSS Selector for web component:

Step 1: Locate / inspect the web element (in this case, the “Email” text box): the HTML tag is “input” and the value of the ID attribute is “Email”, both refer to the “Email” textbox . Therefore, this data will be used to create the CSS Selector (image below)

Verify (confirm) the locator value

Step 1: Enter the value of the locator – text “css = input # Email” in the Target field of the Selenium IDE and then click “Find” => Textbox “Email” will be highlighted (image below)

Syntax:

• HTML tag – is the tag used to indicate the web element we want to access (in the example above, the input tag)
• # – Hash sign is used to represent ID attribute (identifier of ID). This # sign is required if you are creating a CSS Selector by ID.
• Value of ID attribute – value ID of the element being accessed.
• ID values ​​always start with #

Note: Applies to all other CSS Selector types:

• While specifying the CSS Selector in the Selenium IDE target text box, always remember to prefix it with “css =”.
• The order of the sections in the above syntax cannot be changed.
• If two or more web elements have the same HTML tag and attribute value, the first element highlighted in the page’s source will be specified.

CSS Selector: Class

In this example, we will access the “Stay signed in” checkbox below the login form at gmail.com .

This “Stay signed in” checkbox has a class attribute value of “remember.” Therefore, the class attribute and its value can be used to create a CSS Selector to access this checkbox.

Locating an element using the same class as using an ID differs slightly in syntax:

Create CSS Selector for web component:

Step 1: Locate / inspect the web element (in this case, the “Stay signed in” checkbox): the HTML tag is “label” and the value of the class attribute is “remember”, both refer to the “Stay signed” checkbox print”. Therefore, this data will be used to create the CSS Selector.

Verify (confirm) the locator value

Step 1: Enter the value of locator – text “css = label.remember” in the Target field of Selenium IDE, and then click “Find” => Checkbox “Stay signed in” will be the highlight up (image below)

Syntax:

• HTML tag – is the tag used to indicate the web element we want to access (in the example above, the label tag)
• . – The dot is used to symbolize the class attribute (the hallmark of the class). Must use “.” This if creating CSS Selector by class.
• Value of ID attribute – value class of the element being accessed (in the above example, “remember”).
• Class values ​​always start with a dot.

CSS Selector: Attribute

In this example, we will access the “Sign in” button displayed below the login form at gmail.com .

The “Sign in” button has a type attribute with the value “submit”. Therefore, this type attribute and its value can be used to create CSS Selector to access this node.

Create CSS Selector for web component:

Step 1: Locate / inspect the web element (in this case the “Sign in” button): the HTML tag is “input”, the attribute is “type” and the value of this type attribute is “submit”, they are all Refer to the “Sign in” button. Therefore, this data will be used to create the CSS Selector.

Verify (confirm) the locator value

Step 1: Enter the value of locator – text “css = input [type = ‘submit’]” in the Target field of Selenium IDE, and then click “Find” => button “Sign in” will be the highlight up (Figure down here)

Syntax:

• HTML tag – is the tag used to indicate the web element we want to access (in the example above, the input tag)
• Attribute – This is the attribute you want to use to create the CSS Selector. It could be: type, value, name … It is recommended to select an attribute that uniquely identifies the web component (in this example, Attribute = “type”)
• Value of ID attribute – value of the attribute of the element being accessed (in the above example, “submit”).

CSS Selector: ID / Class and attribute (Combine ID / Class and attribute)

In this example, we will access the “Password” textbox in the login form at gmail.com .

The “Password” textbox has an ID attribute with the value “Passwd” and the “type” attribute with the value “password”. Therefore, the ID and type properties and their values ​​can be used to create a CSS Selector to access this textbox password.

Create CSS Selector for web component:

Step 1: Locate / inspect the web element (in this case the textbox “Password”): the HTML tag is “input”, the attribute is the ID and “type”, and the corresponding value of these properties is “Passwd” and “password”, they all refer to the “Password” textbox. Therefore, this data will be used to create the CSS Selector.

Verify (confirm) the locator value

Step 1: Enter the value of locator – text “css = input # passwd [name = ‘passwd’]” in the Target field of Selenium IDE, and then click “Find” => textbox “Password” will be the highlight up ( picture below)

Syntax:

• The parameters are similar to the syntax above

Can combine 2 or more attributes easily according to the above syntax. For example: “css = input # Passwd [type = ‘password’] [name = ‘Passwd’]”

CSS Selector: Sub-string

The CSS in Selenium allows partial string matching and thus has a very interesting feature to create CSS Selector sets using sub-strings. There are three ways to create CSS selectors based on the mechanism used to match substrings:

• Match a prefix (match prefix)
• Match a suffix
• Match a substring

Match a prefix

Syntax:

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

• ^ – Symbolic symbols to match a string using a prefix.
• Prefix – This is the string based on which match method is performed. Finds an element whose properties start with the specified string.

Example: css = input # Passwd [name ^ = ‘Pass’] (access to input with ID “Passwd”, name prefixed with “Pass”)

Match a suffix

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

• $ – Symbolic symbols to match a string using the suffix.
• Suffix – This is the string based on which match method is performed. Finds an element whose attributes end with the specified string. For example, css = input # Passwd [name $ = ‘wd’] (access to input with ID “Passwd”, name with suffix “wd”)

Match a substring

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

• Stars – Symbolic symbols to match a substring string.
• Sub string – This is the string based on which match method is performed. Finds an element whose value contains the specified string.

For example, css = input # Passwd [name * = ‘ssw’] (access the input with ID “Passwd”, the name contains substring “ssw”)

CSS Selector: Inner text

Inner text helps us identify and create CSS Selectors using the string pattern the HTML tag denotes on a webpage.

For example, the link “Need help?” Below the login form at gmail.com .

The anchor tag that represents the link has an accompanying text. Therefore, this text can be used to create a CSS Selector to access the specified web element.

Syntax :

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

• : – The colon is used to denote the container method (contains)
• contains – The value of the class method of the element being accessed.
• text – The visible text of the currently accessed element.

For example, css = href: contains (“Need help?”) (Access href with text as “Need help?”)

Epilogue

The above are just some of the common ways to create CSS Selector, you can learn more other ways.

Article translated from: https://www.softwaretestinghelp.com/css-selector-selenium-locator-selenium-tutorial-6/