Strategies to handle Dynamic Web Element using CSS Selectors

Overview:

To find an element in selenium, we use, element finding strategies. Selenium is providing some locators, we can use those locators to find element on the web page. Selenium provides 8 locators: ID, name, ClassName, Tagname, LinkText, PartialLinkText, Xpath and CSS selector. If we want to identify any element in the web page uniquely by just using those basic locators ID, name, ClassName, Tagname, LinkText and PartialLinkText. We might not need any require CSS or Xpath because we are good to go in that case itself. We have unique elements and we can perform the operations on that element but what if we are not able to identify that unique element, then we have to combine multiple properties/attributes or we have to take help of other elements. So using reference of other element we can find this element. In that case we go for two types of locators, those are Xpath and CSS selectors. This Xpath and CSS selector helps us in combining the properties and helps to find unique element or finding the element based on reference of other element.

Why CSS Selector?

We are going to use CSS selector because selenium is providing this CSS selector as one finding element strategy. So using this also we can able to identify the elements in the webpage. If we don’t have any unique elements in the web page, obviously we have to go for Xpath or CSS selector. If you are not familiar with Xpath then you have the only option to use CSS selector. Also for some basic thing like finding an element just with an ID, Classname so those things can be achieved very easily by CSS selector. So people may feel Xpath is a difficult one and CSS selector is a easiest one. People who are coming from development background they feel CSS selector is a easiest one because they might have already worked with CSS, there they are going to use CSS selector. So those people feel CSS selector is the easiest way to handle the web elements.

What is CSS Selector?

CSS selectors is a pattern used to locate elements in the HTML web page. We can able take absolute CSS selector in chrome.

Simple way to take absolute CSS selector from browser:

Steps:

1. Place your and the target element on the webpage.

2. Right click from your mouse and click “Inspect”.

3. Click right click on the code it is pointing.

4. Click “Copy”.

5. Click “Copy selector”.

Relative CSS Selectors:

We can also write relative CSS selectors manually. Let discuss on various strategies to identify CSS selectors. CSS selectors will be divided into 4 categories.

1. Simple CSS selectors:

1) ID

• Locate the elements based on ID.
• Syntax: #idname.
• Eg: #emailId this will match the element with ID emailId.

2) Class

• Locate the elements based on class attribute. Sometimes, class attribute may have space in between, replace the space with single dot(“.”).
• Syntax: .classname
• Eg: .sc-bRBYWo.jrwcqm this will match the element with class name sc-bRBYWo jrwcqm

3) Attributes

• Locate the elements based on attributes and its value.
• Syntax: [attributename=value]
• Eg: alt=”email logo” this will match the element with attribute name “alt” and it will match elements having [alt=”email logo”] attribute set to given value.

4) Universal selectors

• Locate all the elements. Optionally, this might restricted to a specific or all namespaces.
• Syntax: ns |*, *|*, |*
• Eg: *.sc-cMljjf.ilbRNt — will locates all the web elements whose class name is sc-cMljjf.ilbRNt

2. Wildcards:

1) Wildcard selectors using “ ^ ”:

• Locates the elements based on prefix value of the attribute. “ ^ ” represents prefixed (preceding) value.
• Syntax: tagname[attribute^=prefix value] or [attribute^=prefix value]
• Eg: a[href^=”https”] or [href^=”https”] — locates the href attribute whose value has prefix “https”.

2) Wildcard selectors using “*”:

• Locates the elements based on at least one occurrence of value of the attribute.
• “ * ” represents at least one occurrence of value of the attribute.
• Syntax: tagname[attribute*=value] or [attribute*=value]
• Eg: [class*=”sc”] — locates all the classname whose occurrence of the value is at least one time.

3) Wildcard selectors using “ $ “:

• “$” Locates the elements based on suffixed value of the attribute.
• Syntax: tagname[attribute$=suffix value] or [attribute$=suffix value]
• Eg: [class$=”bQENkS”] — locates all the classname whose suffix value of the class attribute is “bQENkS”.

3. Multiple selectors:

• Locates single web element using multiple locators.
• Syntax:[attr1=value][attr2=value]
• Eg: div#super-wrapper div#super-container — “div#super-wrapper” and “ div#super-container” locates the single web element.

4. Combinators:

1) Child combinators:

• “>” locates the nodes that point the direct children of the first element.
• Syntax: A>B
• Eg: div#super-wrapper>div#super-container.
• div#super-wrapper>div#super-container will match all div#super-container elements that are nested directly inside a div#super-wrapper.

2) Descendant combinators:

• “ ” (space) locates nodes that are descendants(children, grandchildren and more) of the first element.
• Using first web element will locates all the children and grandchildren.
• Syntax: A B
• Eg: div#super-wrapper [class=”sc-b1h692–2 bSKSgr”] — “div#super-wrapper” locates the grand children “[class=”sc-b1h692–2 bSKSgr”]”.

3) Adjacent sibling combinator:

• “ + “ locates the adjacent sibling i.e., the second element directly follows the first, and both share the same parent and in same hierarchy.
• Syntax: A+B
• Eg: div[class=”sc-17itb6m-1 sc-17itb6m-2 dREPUw”]+div[class=”sc-133848s-2 sc-b1h692–4 gHrdsr”] — class=”sc-17itb6m-1 sc-17itb6m-2 dREPUw” and class=”sc-133848s-2 sc-b1h692–4 gHrdsr” both share the same parent and in same hierarchy.

4) General sibling combinator:

• “ ~ “ locates not only immediate sibling also other siblings i.e., the second element follows the first (though not necessarily immediately), and both share the same parent.
• Syntax: A~B
• Eg: #modal-root~ #fb-root — will match all #fb-root that follows #modal-root.

Pro’s:

• CSS selectors will be compatible with most browsers to date.
• CSS selectors will be faster than XPath. Here is the link which provides stats for reference http://elementalselenium.com/tips/34-xpath-vs-css-revisited-2
• Has high chance of finding your web elements.
• Easier to implement.
• Enhanced readability.

Con’s:

• Allows only directional flow which means the traversal is done only from parent to child.
• Does not allows to locate visible text appearing on the screen/webpage.