CSS selectors and their application in software testing automation

Good to all!

We have already revealed this topic at the webinar, which was conducted by our teacher, but decided to add a little text (and many, as it turned out, are more convenient). In general, we present an article on the topic “CSS Selectors” , which Pavel Popov worked out as part of our course “Automation in Testing” .

Go.

Each course or article for beginners is about a convenient and versatile tool for finding Web page elements, like XPath. This type of element locators was created in 1999 to indicate elements in XML files. Using built-in functions, XPath has become a very popular tool for finding elements on a Web page. If the HTML code of your application looks something like this:

…
Нажми меня
…

and you can’t find a decent XPath for the “Click Me” button, don’t immediately run to the side of the developer asking for help. There is a great opportunity to use the CSS selector, it will look like this:

.button_submit

Welcome to the world of CSS .



It is generally accepted that in CSS selectors everything is tied to classes. This is not entirely true, but if the Web application uses an “optimizer” or “obfuscator” of HTML code, and looks like this:

…

(all names of css classes are reduced using the optimizer)

, then you won’t be able to get a short CSS selector - as a rule, after each new build, css classes are changed to new ones. But still, the CSS selector may turn out to be simpler in this case: css: form button[type=‘submit’]instead XPath: //form//button[@type=‘submit’]

, let's say that we have not installed HTML optimizers and the developers do not plan to use it on the project (check this fact!).

As you might have guessed, a symbol. is used instead of the word class and will look for the occurrence of a given class in any element, regardless of the number of classes of this element.

See:

css for an element button: .button_submit, and the class .wrapper_buttonis optional, but if it is necessary to refer to our class, we can add it as soon as the first indication css class: css: .button_submit.wrapper_button. The order of the classes does not matter, so you can swap them:

 .wrapper_button.button_submit .

The next indispensable tool in finding HTML elements are Tags. Writing a css selector pointing to a button tag is very simple, especially since it has already been written in this sentence. CSS selector for button -

css: button.

And you don’t need to specify anything else if your goal is tagging. Combining tags and classes we get:

button.button_submit

and this is also a css selector to our element.

In addition to tags, attributes also help uniquely identify an element on a page. Often, developers create additional attributes instead of adding new “identifiers”, for example, they can create additional data-id or auto-id attributes for each element with which further action is planned. For example, developers can add an attribute data-idto our button button. Then the attributes using css selector can be accessed through braces [data-id=‘submit’]. Additionally, you can omit the attribute value after the equal sign [data-id]. Such a selector will find you all the elements that have an attribute data-idwith any value inside. You can also specify the class attribute to search for our button:[class=‘button_submit’]But in CSS, as you already know, you can be lazy and write: .button_submit. Putting it all together is also quite simple:

button[type=‘submit’].button_submit
тег   атрибут        класс

But this is a great success if we manage to find an element using a selector indicating only one element, such as using the [data-id] attribute that uniquely finds one element on a page. Very often we have to use the ancestors of an element to find a descendant. And this can also be done quite simply in CSS:

css:form > div > div > div > button.button_submit

and the sign >allows you to find the element exclusively from the ancestor inside. But writing all the elements is unnecessary, because CSS has the ability to search in all descendants, this character is a space “ “. Using this pointer, we can quickly find the element inside the form:

It was: css: form > div > div > div > button.button_submit
It became: css: form button,button_submit

It is also convenient to find the next “relative” through the previous one. We supplement our example with one more span:

Ссылка

[data-id=‘link’] + button will find buttonone that has one level higher with a relative with an attribute data-id=”link”. This pointer can be used when the previous element has an id or a unique attribute, and the element that is next after the desired one does not have such identifiers. So, using the + css character, the selector will find the next sibling.

NOTE:

div + span[data-id=‘link’] + button

Additionally, you can collect a “train” from the following elements using the + pointer, but I do not advise doing this because of a possible change in the location of the elements.

Do not miss the search option for part of the attribute. This is done simply: button[class*=‘submit’] - from the long name of the class button_submit we take only the right part submit and add to the sign = symbol *. You can also search by keyword cell from the class values div[class*=‘cell’].

There is another feature css selectors, which will allow you to find all the links or file extensions, this is ^=and $= , but this task is not as often as search by entering values in the attribute.

a[href^=“https:”]- find all links that start with https,
a[href$=“.pdf”]- find all links that end in .pdf.

A little bit about how to find descendants with the same tag from the ancestor. Let's start, as always, with an example:

…
…

How to find the second div class=“tile”one div class=“tiles”? There are two options:

div > div:nth-of-type(2) div > div:nth-child(2)

But what is the difference between the two selectors? Supplement the example:

…
…
…

css option 1: div > div:nth-of-type(2)
css option 2: div > div:nth-child(2)

Now these selectors lead to two different elements. Before moving on, try to guess which selector leads to which element?

The answer: the

first selector will point to line number 2, while the second selector will point to line number 3. nth-childsearches for the second div, which is a descendant of the parent. Second

at element

this is the third line. In turn, it nth-of-typesearches for the second element from the parent

which should be a tag

div

, this is line number two.

There is a rule that makes it easier to work with selectors in situations where you need to find a specific element: use nth-of-typewherever possible. If you figured out the example above, I recommend that you always pay attention to the number of identical elements in the ancestor, using nth-child, and then you will not care where the link is placed

: above, between

or at the bottom of the block, always the selector div:nth-child(2)will still point to the desired element - the second div element inside the block.

Another function for finding an element by id was omitted. You already know that searching for any of the attributes is carried out using square brackets, [attribute=“value”]and for our case we can find the element like this [id=“value”]. But what if there is a faster way to search by item id?

#value. “#” - указатель, что поиск осуществляется по id.

Using all the acquired skills, try writing a button selector

Отправить
…
Отправить

We will be glad to see your comments and options in the comments here or discuss this at the next open lesson, which will be held on March 13th.

Thanks!