Селекторы CSS и их применение в автоматизации тестирования Программного Обеспечения03.03.2018 19:03

Всем добра!

Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».

Поехали.

Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так: 

…


			
.button_submit


Добро пожаловать в мир CSS.

gdw2vl9g9vbanun39ugxyxpqb9c.png

Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует «оптимизатор» или «обфускатор» HTML кода, и выглядит вот так: 


			

			
 .wrapper_button.button_submit .


Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –

css: button.


И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем: 

button.button_submit


и это также является css селектором к нашему элементу.

Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых «айдишников», например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’]. Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id]. Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’], но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit. Соединять все вместе также достаточно просто: 

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


Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто: 


			
. Используя данный указатель мы можем быстро найти элемент внутри формы: 



Было: css: form > div > div > div > button.button_submit

Стало: css: form button,button_submit 



Удобно также находить следующего «родственника» через предыдущего. Дополним наш пример еще одним span: 




			

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





Дополнительно вы можете собирать «паровозик» из следующих элементов с использованием указателя +, но не советую это делать из-за возможного изменения местонахождения элементов. 



Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’]  — из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’].



Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.



a[href^="https:”] — найдет все ссылки, которые начинаются с https, 
a[href$=".pdf”] — найдет все ссылки, которые заканчиваются на .pdf.



Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера: 



…

	
 у div class="tiles”? Варианта два: 



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





Но в чем различие между этими двумя селекторами? Дополним пример: 



… 
	
…







css 1 вариант: div > div:nth-of-type(2)

css 2 вариант: div > div:nth-child(2)



Теперь эти селекторы ведут на два разных элемента. Прежде чем идти далее, попробуйте догадаться, какой селектор ведет на какой элемент? 



Разгадка: 



первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div, который является потомком родителя. Второй 



 у элемента 



, который должен являться тегом 



div
, это строка номер два. 



Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child, и тогда вам будет неважно, куда поместят ссылку 



: наверху, между 



 или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент — второй элемент div внутри блока.



Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute="value”] и для нашего случая мы можем найти элемент так [id="value”]. А что если есть существует более быстрый способ поиска по id элемента? 



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





Используя все приобретенные навыки попробуйте написать селектор для кнопки 











Отправить
…