CSS локатори або селектори: основні принципи використання в автоматизації тестування
Усі статті, обговорення, новини про тестування — в одному місці. Підписуйтеся на DOU | QA!
Всім привіт! Сьогодні я з вами поговорю про локатори CSS та їх використання для автоматизації тестування веб-додатків. Якщо ви займаєтеся тестуванням веб-додатків, то ви точно знаєте, що пошук та ідентифікація конкретних елементів на веб-сторінці може бути досить непростою задачею. Саме тому локатори CSS є таким потужним інструментом для автоматизації тестування.
За допомогою локаторів CSS ви зможете швидко та ефективно ідентифікувати будь-який елемент на веб-сторінці, незалежно від його розташування та структури. Тож, якщо ви хочете покращити ефективність своїх тестів та зекономити час, то локатори CSS — це те, що вам потрібно. Давайте разом розберемось, яким саме локатором можна скористатися для того, щоб знайти потрібний елемент на веб-сторінці.
Нижче наведена табличка з варіантами css селекотрів та їх написання. Як писати css локатори — відео на youtube.
| Селектор | Приклад | Роз’яснення |
| .class | .some_class | Знаходить всі елементів з class="some_class" |
| .class1.class2 | .user1.user2 | Знаходить всі елементи, у яких class містить user1 та user2 наприклад |
| <div class="user1 user2 user3″> | ||
| .class1 .class2 | .user1 .user2 | Знаходить всі елементи з класом user2, які знаходяться в будь-якому рівні вкладеності всередині елементів з класом user1″ |
| [class] | [clas="user1 user 2″] | Знаходить всі елементи, у яких class містить виключно user1 та user2 наприклад <div class="user1 user2"></div> |
| #id | #user | Знаходить елемент з id="user". ID зазвичай унікальний на сторінці |
| * | * | Знаходить всі елементи, також можна скорочувати локатори приклад [name=’name1234′] можливо записати [name*=’name12′] |
| element | p | Вибір всіх елементів <p> на сторінці |
| element.class | p.intro | Вибір всіх елементів <p> з class="intro" |
| element,element | div, p | Вибір всіх елементів <div> та <p> |
| element element | div p | Вибір всіх елементів <p>, які є нащадком <div> |
| element>element | div > p | Вибір всіх елементів <p>, де батьківський елемент <div> |
| element:nth-child(n) | ul li:nth-child(2) | Вибирає n-ий дочірній елемент. В данному випадку другуй елемент |
| <ul> | ||
| <li>Перший елемент</li> | ||
| <li>Другий елемент</li> | ||
| <li>Третій елемент</li> | ||
| </ul> | ||
| element:first-child | ul li:first-child | Вибирає перший дочірній елемент |
| <ul> | ||
| <li>Перший елемент</li> | ||
| <li>Другий елемент</li> | ||
| <li>Третій елемент</li> | ||
| </ul> | ||
| element:last-child | ul li:last-child | Вибирає останній дочірній елемент |
| <ul> | ||
| <li>Перший елемент</li> | ||
| <li>Другий елемент</li> | ||
| <li>Третій елемент</li> | ||
| </ul> | ||
| element[attr] | input[type="text"] | Вибирає елемент з певним атрибутом |
| element[attr="value"] | input[type="text"][name="email«] | Вибирає елемент зі співпадаючим значенням атрибута. Тобто елемент має ці два атрибута |
| :not | div:not(.example) | Вибір всіх елементів div, які не мають класу «example» |
| :not | .content:not(ul li) | Вибір всіх елементів із класом «content», які не є елементами списку |
| :not | button:not([type]) | Вибір всіх елементів button, які не мають атрибуту type |
| :not | a:not(.external):not([target="_blank«]) | Вибір всіх елементів з тегом «a», які не мають класу «external» і не мають атрибуту target="_blank" |
Найкраще використовувати чіткі та специфічні локатори, щоб забезпечити стабільність вашого тесту. Наприклад, замість використання локатора div, краще використовувати div зі специфічним класом або ідентифікатором. Також рекомендується використовувати локатори, які не залежать від структури сторінки, наприклад, data-атрибути. Якщо структура сторінки змінюється, то локатор, який залежить від структури, може перестати працювати. Будьте обережні з id атрибутом він може змінюватись. Намагайтесь писати короткі та зрозумілі локатори щоб коли ви повернетесь до проєкту через рік.... ну ви зрозуміли. Дякую за увагу.
VITALI MUSIC
VL
Mykola Kolisnyk
Petro Andrushchak
Oleksandr Poliukhovych
Hennadii Mishchevskyi
Hennadii Mishchevskyi
Roman Sheremeta
Yaroslav Shpylyk
Roman Sheremeta
15 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів