ST LAB 15 (1).docx

Experiment 15
Performing Testing by using CSS Selector Locators in Selenium IDE
CLO-1: Construct the experiments/projects of varying complexities
CLO-2: Use modern tools to solve problems of varying complexities in software
testing.
CLO-3: Construct the projects of varying complexities using different software
testing techniques
CLO-4: Demonstrate a unique solution of problem under discussion

CSS Selector Locator in Selenium IDE
It used to identify the web element based on HTML tag, id, class, and attributes.
To describe the look and formatting of a document written in the markup language are known as CSS
[Cascading Style Sheets].
CSS has capabilities to locate an element having no ID, class, or name, just like Xpath.
It works in six different scenarios to identify and locate the web elements.
1. Locating by ID
2. Locating by Class
3. Locating by Attribute
4. Locating by ID/Class & Attribute
5. Locating by Sub-string
6. Locating by inner text
1: CSS Selector: ID
The id attribute is used to identify the web element uniquely in the web pages.
Syntax of ID Attribute:
[HTML tag][#][Value of ID attribute]
The hash sign (#): it is mandatory while using the ID attribute to create a CSS Selector.
Always remember that the prefix with ‘css=’ is usedto specify a CSS Selector in the target text box
of Selenium IDE.
We will take an example of Email text box present in login form at facbook.com
 The email text box has an id attribute whose value defined as an id=email.
 ID attribute and value can be used to create a CSS Selector to access the email textbox.
 Launch the browser.
 And type https://www.facebook.com in Google search box; it will redirect you to the
Facebook login page.
 When we are inspecting the web element of an email text box, and its html tag value is input,
and the value of id attribute is email.

To verify the locator:
 Open the Test Script Editor Box in Selenium –IDE and click on the command text box.
 And write command as:
Command =verify element present
Value = css=input#Email
 Click on the Find button.
 To verify that the value of a locator is correct or not, you can also check in the browser
that the Email Text box is highlighted or not.
2: CSS Selector: Class
Identify a web element with the help of Class as a CSS Selector is like using id attribute. The only
difference between Class and id is in their syntax.
The value of a class attribute is used to access the web element.
Syntax of Class Attribute:
css= [HTML tag][.][Value of class attributes]

[.]: Itis mandatory while using a Class attribute to create a CSS Selector.
We will take an example of an Email text box present in the login form of facbook.com
 Where you inspect the email text box web element and notice that the html tag is input and
the value of the class attribute is input.login_form_input_box
To verify the locator
 Open the Test Script Editor Box in selenium IDE and click on the command text box,
And write command as:
Value = css=input.login_form_input_box
 Click on the Find button.
 To verify that the value of a locator is correct or not, you can check in a browser that the
Email Text box is highlighted or not.

NOTE: When multiple elements have the same HTML tag and name, then only the first element in
source code will be considered.
For example, both email and the password text box have the same class name as: “input text
login_form_input_box.”
In this case, the email text box is the first element, so the source code of this element would be
considered first.

3: CSS Selector: Attribute
 Locating the attribute of a CSS selector, we would access the Password textbox,
which is present in the login form of Facebook.
 The Password textbox has a type attribute whose value defined as pass.
 To create a CSS Selector attribute, we can use value, type, and name.
Syntax of CSS Selector Attribute:
css=<HTML tag>< [attribute=Value of attribute]>
Value of attribute: It denotes the value which accesses at the time of using the attribute.
Let see an example of an Attribute:
We are locating a web element by defining the CSS Selector for that particular web element.
 Open the browser.
 And you can inspect the password text box’s web element and notice that the html
tag value is input and the value of name attribute is pass.
To verify the locator value:

 Open the Test Script Editor Box in selenium IDE and click on the command text box,
and write command as:
Value = css=input [name=’pass’]
 To verify the value of a locator is correct or not, click on the Find button in the
selenium IDE interface and check in a browser that the password Text box
highlighted.
4:CSS SELECTOR: ID/Class and Attribute
The Id, class, and attribute of CSS selector are used to identify the web element to access
the web pages.
Syntax for Id/Class and Attribute:
css=<HTML tag><./#><value of Class / ID attribute> {[attribute=Value of attribute]}
[#]: It is used to present an ID attribute. It is mandatory while using the ID attribute to
create a CSS selector.
[.]: It is used to display a Class attribute. It is necessary while using a class attribute to create
a CSS Selector.
Value of Class or ID attributes: It access by the value of ID/Class and attribute.
In this section, < [attribute=Value of attribute]> we can use value, type and name as an
Attribute.

Value of attribute: It denotes the value of an attribute which is used to locate the web
element.
Let see an example of an ID/ Class and Attribute
Locating ID/Class and attribute of CSS selector, we would access the Password textbox
present in the login form at the Facebook.
 And type https://www.facebook.com in Google search box.
 It will redirect you to the Facebook login page.
Where HTML tag value is [input], attributes are ID and type, and their parallel values
are [Pass] and [password], and all of them together make a reference to
the [Password] textbox.
Verify the locator value:
 Type css=input#Pass[name=’Pass’] i.e. the locator value in the target box in the
Selenium IDE.
 To verify the value of a locator is correct or not, click on the Find button in the
selenium IDE interface.

 And check in a browser that the password Text box is highlighted or not.
5: CSS Selector: Sub String
CSS Selector Sub-string is used to match a partial string to locate a particular web element.
There are three ways to match a substring using a CSS Selector.
 Match a prefix
 Match a suffix
 Match a substring
Now we will discuss each of them in details with an example,
MATCH A PREFIX:
 It will access a particular string using a ‘match a prefix’.
Syntax of Prefix:
css= [HTML tag]{[attribute^=prefix of the string]}.
[^]: It is a symbolic notation to match a string using a prefix.
A prefix of the string: matching operation performed based on a string.
 For example, we will define the CSS Selector for the Email text box of a Facebook login
page as css=input#email[name^=’em’]
 Click on the Find button to verify whether the defined CSS Selector locates the desired
element or not.

MATCH A SUFFIX:
 It will access a particular string using a ‘match a suffix’.
Syntax of Suffix:
css= [HTML tag]{[attribute$=suffix of the string]}
[$]: This is a symbolic notation to match a string using a suffix.
Suffix of the string: matching operation performed based on a string.
 For example, we will define the CSS Selector for the Email text box of the Facebook login
page.
css=input#email[name*=’ail’]
element or not.
MATCH A SUBSTRING:
 It will access a particular string using a ‘match a substring’.
Syntax of substring:
css=<HTML tag><[attribute*=sub string]>
[*]:It is Symbolic notation to match a string using substring.
Substring: matching operation is performed based on a string

 For example, we will define the CSS Selector for the Email text box of the Facebook login
page as css=input#email[name*=’ail’]
element or not.
6: CSS Selector: Inner text
The inner text is used to identify and create a CSS Selector using a string pattern of the HTML tag
which is displayed on the web page.
Syntax of inner text:
css=[HTML tag]<[:][contains][(inner text)]
[:]:- It is used to symbolize contains method.
Contains: It will include the value of a Class attribute.
Text: The text that is displayed anywhere on the web page irrespective of its location.
Inner text is one of the most frequently used locating technique to identify the web element because
of the simplified syntax.
Task :
Use the inner text to identify and create a CSS Selector using a string
pattern of the HTML tag displayed on the web page.(you can use any web
page )

ST LAB 15 (1).docx

Recommended

Recommended

More Related Content

Similar to ST LAB 15 (1).docx

Similar to ST LAB 15 (1).docx (20)

Recently uploaded

Recently uploaded (20)

ST LAB 15 (1).docx