Web Element Locator Strategies: CSS Selectors

CSS Selectors have been favored over XPaths for two main reasons: simplicity and speed, though I doubt both. I usually go with XPath. Any element on a Web page can be uniquely located using XPath, and I find XPaths the strongest locator type.

CSS Selectors are not powerful, but most web developers already know how to use them. They cannot uniquely identify any given element on the page. CSS Selectors can never select elements by text context, and they cannot always select elements by index.

CSS Selectors are expressions that use pattern matching to find elements on a webpage.

Because I have abandoned CSS selectors, now I took the time to play with it more, and this is rather a memo to myself.

The most basic type of CSS Selector is simply a tag name. I could type “body” or “div”, and that would be a valid CSS Selector.

Putting a dot in front of the class name will select all elements that contain a class.

If I search for a tag with a class, I can do it like <tagName>.<className> In case of the class name contains a space, replacing the space to a dot works.

Screenshot 2020-04-08 at 12.25.28

I can search by id using hashtag character in.

Let’s see ancestor-descendant relationships. Arrow forces a direct parent-child relationship. 

Screenshot 2020-04-08 at 12.52.41

div.UUbT9 > div ends in 3 results.

Without arrow I can see all the descendants.

Screenshot 2020-04-08 at 12.54.12

div.UUbT9 div returns with 73 results.

I can find all elements that contained a style attribute via using square angle brackets, or

can locate by tag with attribute equality as well.

Screenshot 2020-04-08 at 13.06.28

I searched for [data-ved] here

I can search for attribute value, but if I’m not sure in the exact attribute value, I can look if it contains a certain value using the asterisk with the equal sign operator.

If I want to get all elements that match this selector or that match this selector, I can use comma. Comma like a logical OR.

Now let’s take a look at pseudo classes, which ones can I use for defining selectors?

 

Pseudo class is a keyword added to a selector that specifies a special state of the selected element(s).

For searching an element that doesn’t fulfil a certain condition with using the :not() pseudo class. Not excludes anything that matches the criteria defined in the brackets.

For finding the nth item for I also can use a pseudo class: :nth-child()

Pretty much that’s it for now.

 

Summary

  • Tag name:<tagName>
  • Class name: .<className>
  • Tag and class name: <tag>.<className>
  • ID: #<id>
  • Descendants:<tag>.<className> <tag>.<className>
  • Direct children:<tag>.<className> > <tag>
  • Multiple selectors: <tag>, <tag>
  • Attribute existence: [<attribute>]
  • Tag with attribute:<tag>[<attribute>]
  • Tag with attribute equality: <tag>[<attribute>='<attributeValue>’]
  • Tag with attribute contains: <tag>[<attribute>*='<attributeValue>’]
  • Logical not pseudo class: <tag>.<className>:not(.<className>)
  • Nth child pseudo class: <tag>.<className>:nth-child(5)

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s