One Element Can Have Many Selector Expressions

A selector can be built in many different ways. You can include all attributes. You can include only one attribute or some of the attributes. You can include attributes but no value (in the rare cases where the attributes are so unique in themselves). You can add a hierarchy (you will learn what hierarchy is in one of the next sections Hierarchy). For example, the search button on Wikipedia can be expressed in many ways, and it will be addressed by any of the below:

button[class='pure-button pure-button-primary-progressive'][type='submit']

button[type='submit']

button[class='pure-button pure-button-primary-progressive']

button[class*='button'][type='submit']

button[class*='button']

button[class][type]

Will these selectors really work and address the same button? Yes!

One element - many ways to express its corresponding CSS selector!

So which should you choose? To get an answer to this question, read on 👇

Adhere to Best Practices

• Try to create lean, short selectors. The more attributes your selectors contain, the more prone they are to fail in case something changes on the website.

• Try to not use any 'cryptic' text within the value of the attributes such as random letter combinations. Instead, try to identify unique values inside the attributes' values. A unique value is often descriptive of what the element is. If there are no descriptive values and unique attributes at all, then it might be better to only use hierarchy (more about hierarchy here: Hierarchy) and discard all attributes and values.

• The more strict your hierarchy is (using many times ">" within your selector), the more prone your selector is to fail in case some element is removed from that hierarchy. If you are not sure what hierarchy is, continue reading this guide and come back to review this page at the end.

Examples

Based on these rules, let's examine reliability of the above list of selectors. To be clear, all of the above selectors are valid and your TaskBot will run successfully with any of them. In this section, we are only evaluating how robust these selectors are over time.

❌ button[class='pure-button pure-button-primary-progressive'][type='submit']

Why not:

• Other selectors are shorter. Lean, short selectors tend to be more robust

• The value pure-button pure-button-primary-progressive appears more 'cryptic' and less descriptive compared to submit or button.

❌ button[class='pure-button pure-button-primary-progressive']

Why not:

• The value pure-button pure-button-primary-progressive appears more 'cryptic' and less descriptive compared to submit or button.

❌ button[class*='button']

Why not:

• This might be too generic because there can be many buttons with value button in their class attribute on a page, so we should add an additional attribute or use a different attribute altogether to make this selector more unique, if possible.

❌ button[class][type]

Why not:

• This might be too generic, too, because attributes type and class are very common, so we should add values to these attributes or add additional attributes.

✅ button[class*='button'][type='submit']

Why yes:

• This selector uses two attributes with two concise, descriptive and well-identifiable values.

✅ button[type='submit']

Why yes:

• While this selector might be a bit too generic and has some risk of not being unique, it's not common for a website to have multiple submit buttons on the same page, so this selector is a good choice, too.