Write Dynamic CSS Selector in Selenium using multiple ways – Part 2

In real project we need more way to find out the locators. We have already discussed the common ways provided at Dynamic CSS Locator Part-1

Let’s start exploring that.

Example

1. Direct Child : Here 3 (div type=opensource), (div class=anotherdivchile) and (div type=licensed) are direct child of div
> symbol is used to identify the direct Child
e.g.

This will found the below 3 direct Child of div

2. Sub Child: It will result in all the div under the parent div.

e.g.

It will result in all the div present

3. Nth-child :

e.g.

3.a.

– Above all 7 li are the direct Child of ul tag. Suppose we want the first li then below css locator will work for that

Locator :

Explanation

3.b. first-child – This is equivalent to

3.c. last-child – This is equivalent to

3.d. – If we say

then it’s looks only for li. It is possible that we have different tag in the list.

3.e.

– If we say

then it’s looks only for li from last. It is possible that we have different tag in the list.

Find Siblings – Use “+” and “~” symbol. + will help to get the next sibling and ~ will give the all next siblings.

Locator :

helps to get the list of all checked box on the page.

How to use JavascriptExecutor in Selenium or Appium

Below is the way to use JavascriptExecutor in Selenium or Appium.

Write Dynamic CSS Selector in Selenium using multiple ways

Selenium supports 8 locators, please check below screenshot.

Symbol used while writing CSS selector in Selenium Webdriver

Different ways to write CSS selector in Selenium to identify Dynamic elements

1. Find CSS Selector using Single Attribute

2. Find CSS using Multiple attributes.

3. Find CSS using id and Class name

The class name generally will not be unique so always try class name with some other attributes.

4. Find CSS using contains

In CSS we will use * symbol to check particular attribute contains that value or not

In below example, it will partially check if link title contains “Password lost ” if yes then it will match.

I have taken the only link in this example but you can take any tag and any attribute.

5. Find CSS using Start-with

In below example, I have taken the only link but you can take any element.

6. Find CSS using ends-with

Now you must be having a clear picture in mind for CSS Selector in Selenium and I would recommend trying all technique at least once using same or some other applications.

Click link CSS Selector Part 2 CSS Selector Part 2

Check link for Dynamic XPath

Please give your suggestions at online.nimit@gmail.com