Апгрейд проекту з допомогою CSS селекторів і кастомних атрибутів

2

Від автора: селектори елементів для Selenium WebDriver – один з компонентів ядра фреймворку автоматизації. Вони ключ до взаємодії з будь-яким веб-додатком. У цьому огляді елементних селекторів автоматизації ми обговоримо різні стратегії, дізнаємося про їх можливості, зважимо плюси і мінуси, а також порадимо кращі стратегії селекторам – кастомні атрибути і селектори CSS.

Селектори елементів Selenium

Вибір кращої стратегії елементних селекторів критичним для успіху і спрощення роботи з автоматизацією. При виборі селектора ви повинні враховувати такі аспекти як простота використання, універсальність, онлайн підтримка, документація і продуктивність. Підвищена увага до стратегії відповідних селекторів принесе свої плоди у майбутньому у вигляді легкої автоматизації.

Подібно до того, як слід враховувати технологічний аспект елементних селекторів, також повинна бути культура організації. Зріла культура співпраці між розробниками та QA дозволить розблокувати високі рівні успіху при впровадженні елементних селекторів при автоматизації. Вигода організації лежить за межами автоматизації. Закладається основа співпраці в інших областях життєвого циклу розробки ПЗ.

Всі приклади коду на Python і Selenium WebDriver, але вони будуть застосовні до будь-якої мови програмування і фреймворку.

HTML приклад:

Я буду використовувати наступні HTML меню для прикладів в цьому розділі:

Погано: назви тегів, текст посилань, частковий текст посилань і назви

Я не буду довго зупинятися на них, так як всі вони використовуються обмежено. Це поганий вибір для широкого застосування в усьому фреймворку автоматизації. Вони вирішують певні потреби, які легко можна покрити іншими стратегіями елементних селекторів. Використовуйте їх тільки, якщо вам потрібно обробити певний кейс. Навіть тоді майже всі спеціальні кейси не настільки спеціальни, щоб використовувати їх. Ці інструменти можна використовувати сценарії, коли інші селектори вам недоступні (кастомні теги або id).

Приклад:

З допомогою назви тега можна вибрати велику групу елементів, які підпадають під вибраний тег. Застосування обмежена, так як працює тільки, коли необхідно вибрати великі групи елементів одного типу. Приклад нижче поверне всі 4 div з прикладу вище.

driver.find_elements(By.TAG_NAME, «div»)

З допомогою прикладів нижче можна вибрати посилання. Як бачите, методи вибирають посилання тільки по тегу a і тільки за текстом тега:

driver.find_elements(By.LINK_TEXT, «Home»)
driver.find_elements(By.PARTIAL_LINK_TEXT, «Sprock»)

Ви можете вибрати елементи атрибуту name, але в нашому прикладі з HTML у тегів немає атрибута name. Ця проблема буде майже в будь-якому додатку, так як зазвичай цей атрибут не додається в усі теги. Якщо б в головному меню був атрибут name

Елемент можна було б вибрати через:

driver.find_elements(By.NAME, «menu»)

Як бачите, використання цих стратегій елементних селекторів обмежена. Підходи нижче краще підходять, так як вони більш універсальні, і можливостей у них більше.

Узагальнення: назви тегів, текст посилань, частковий текст посилань і назви

Апгрейд проекту з допомогою CSS селекторів і кастомних атрибутів

Добре: XPath

XPath – універсальна і здатна стратегія елементних селекторів. Вона також моя улюблена. XPath вміє вибирати будь-які елементи на сторінці, незалежно від того, є у них класи і ID (хоча без класів і ID стає складно підтримувати код, він стає крихким). Цей варіант універсальний, так як ви можете вибирати батьківські елементи. XPath також володіє безліччю вбудованих функцій, з допомогою яких можна налаштовувати вибірку елементів.

З універсальністю приходить складність. З допомогою XPath можна робити майже що завгодно, тому вивчати його складніше, ніж інші стратегії елементних селекторів. Складність компенсується відмінною онлайн документацією, яку легко знайти. Один з чудових ресурсів – уроки по XPath на W3Schools.com.

У XPath є свої компроміси. Ви можете вибирати батьківські елементи, у вас під рукою безліч вбудованих функцій, однак XPath погано працює в IE. Це варто враховувати при виборі стратегії елементних селекторів. Якщо вам потрібна можливість вибору батьківських елементів, вам необхідно задуматися про те, як вибір вплине на кроссбраузерное тестиование в IE. Для запуску автоматичних тестів в IE буде потрібно більше часу. Якщо користувальницька база вашої програми не сидить на IE, цей вибір вам підійде, так як ви зможете рідше запускати тести в IE. Якщо навпаки, то XPath повинен стати фолбеком, якщо інші кращі підходи не працюють для вашої організації.

Приклад:

Якщо у вас у вимогах прописана можливість вибору батьківських елементів, вам потрібен XPath. Як це зробити: на нашому прикладі припустимо, що вам необхідно вибрати батьківський блок головного меню, знаючи одну з посилань всередині цього елемента:

driver.find_elements(By.XPATH, «//a[id=menu]/../»)

Цей селектор знайде перший примірник посилання id = menu, далі з допомогою «/../» селектор підніметься на батьківський елемент. В результаті ви отримаєте батьківський блок головного меню.

Узагальнення XPath

Апгрейд проекту з допомогою CSS селекторів і кастомних атрибутів

Відмінно: id, class

ID class – 2 різних способи автоматизації, що виконують різні функції в додатку. Однак при виборі стратегії для автоматизації вони злегка відрізняються, і їх не можна розглядати окремо. У додатку атрибути id, class дозволяють розробникам UI маніпулювати і стилізувати додаток. В автоматизації ми з їх допомогою шукаємо елементи для взаємодії.

Великий плюс у використанні ID, class в тому, що вони мало схильні структурним змінам в додатку. Якщо б ви створили XPath або CSS селектор, в основі якого лежить ланцюжок з декількох елементів і дочірніх елементів, що буде, коли функціональний запит перерве цю ланцюг, додавши в неї нові елементи? З ID, class ви можете шукати елементи, не покладаючись на структуру сторінки. Ви зберігаєте надійність автоматизації і не надто поблажливі до змін. Зміни повинні помічатися автоматизації, після створення тест кейсів з пошуку певних елементів. Зміни не повинні ламати весь сьют автоматизації. Однак якщо розробник вносить зміни безпосередньо на ID або class, використовувані в автоматизації, це вплине на тести.

Ця стратегія буде застосовуватися, якщо додаток під тестом не буде реалізовувати ID, class як частина кращих практик розробки. Якщо в HTML немає id, class для автоматизації, підхід буде складно використовувати.

Приклад:

Якщо необхідно вибрати пункт меню верхнього рівня, це можна зробити так:

driver.find_elements(By.ID «main-menu»)

Вибрати перший пункт меню можна так:

driver.find_elements(By.CLASS_NAME, «menu»)

Узагальнення: id, class

Апгрейд проекту з допомогою CSS селекторів і кастомних атрибутів

Краще всього: кастомні атрибути і селектори CSS

Якщо ваші тестувальники добре спілкуються з розробниками, є шанс, що ви зможете використовувати цю кращу практику в автоматизації. У кастомних атрибутів CSS селекторів безліч переваг як для команди тестувальників, так і організації. У тестувальників це дозволяє автоматизаторам шукати певні елементи без створення складних селекторів. Однак необхідно вміти додавати кастомні атрибути, щоб автоматизаторы могли використовувати їх в додатку. Для використання цього підходу розробники і тестувальники повинні працювати разом.

Необхідно відзначити, що селектори CSS не залежать від кастомних атрибутів. Селектори CSS можуть знаходити будь-які теги і атрибути HTML документі, як і XPath.

Розберемо сутність підходу. Для кращої реалізації команда автоматизації повинна розуміти, що їм необхідно шукати в автоматизації. Працюючи з розробниками, швидше за все, front end, тестувальникам необхідно розробити шаблон кастомного атрибута, який буде використовуватися у всіх необхідних елементах для автоматизації. Наприклад, ми додамо атрибут tid до цільових елементів.

Важливо також відзначити технічну обмеженість CSS селекторів. Вони спочатку не розраховувалися на вибір батьківських елементів, як в XPath. Це було зроблено, щоб уникнути нескінченного зациклення в стилях CSS на сторінках. Для веб-дизайну це добре, але для автоматизації це обмеження. На щастя, це обмеження можна подолати за допомогою кастомних атрибутів. Тестувальники будуть викликати відповідний кастомный атрибут, не потрібно шукати батьківський елемент.

Якщо у вашій організації ще не налагоджена робота між тестерами і розробниками, не турбуйтеся! Вам все одно потрібно використовувати цю стратегію, так як вона може стати тим механізмом, який запустить спілкування. Незалежно від існування культури спілкування в колективі, вам варто спробувати цей підхід і подивитися, що вийде. Ви отримаєте не тільки просту в обслуговуванні стратегію, але і отримаєте плюси від спілкування різних областей в компанії. Спільні розвиваються відносини принесуть вам користь у багатьох аспектах забезпечення якості, таких як зниження дефектів, скорочення часу виходу на ринок і підвищення продуктивності.

Щоб краще впровадити цю стратегію і створити колаборацію, ваші тестувальники повинні бути залучені в процес дизайну з самого початку. Працюючи з розробниками, вони повинні дивитися вимоги. По мірі розробки функцій тестувальники повинні пропонувати, куди необхідно додати кастомні атрибути для кращої підтримки в автоматизації. Заохотивши цю колаборацію на початку розробки дизайну, ви сблизите команди тестувальників і розробників і поліпшите ефективність розробки. Найімовірніше, це призведе до ефекту переливу в інші області життєвого циклу розробки ПЗ. Заохочення такий колаборації познайомить розробників і тестувальників, і можливо, подібні колаборації з’являться в інших областях.

Приклад:

Реалізація кастомних атрибутів в тегах посилань в нашому HTML прикладі виглядала б так:

Помітили новий атрибут в деяких елементах? Ми створили новий атрибут, який не конфліктує з іншими атрибутами HTML, і назвали його tid. За допомогою цього кастомного атрибута ми можемо використовувати CSS селектор для пошуку елемента:

driver.find_element(By. CSS_SELECTOR, «[tid=home-link]»)

Наприклад, ви хотіли вибрати всі посилання в меню, неважливо верхній це рівень або підменю. З допомогою CSS селекторів можна створити вкрай універсальний селектор:

driver.find_element(By.CSS_SELECTOR, «#main-menu [tid*=’-link’]»)

Запис *= здійснює пошук за шаблоном значення «-link» всередині поля tid у всіх елементах. Якщо розмістити його за ID #main-menu, пошук буде проведено за елементами всередині головного меню.

Ви також можете прийняти цю стратегію без кастомних атрибутів. Наприклад, ви можете шукати посилання в підменю Shop наступним чином:

driver.find_element(By. CSS_SELECTOR, «#main-menu .a submenu»)

Ця стратегія дозволить автоматизаторам писати надійні автотесты, які буде легко обслуговувати, і які не будуть ламатися при незначній зміні UI. Ця стратегія – кращий підхід. Її не тільки буде легко обслуговувати автоматизації, але вона призведе до спілкування між командами тестувальників і розробників.

Узагальнення: кастомні атрибути і селектори CSS

Апгрейд проекту з допомогою CSS селекторів і кастомних атрибутів

Висновок

Є кілька відмінних варіантів реалізації стратегії елементних селекторів корпоративного стандарту у вашій системі автоматизації. Варіанти типу назв тегів або тексту посилань краще уникати, якщо вони не єдині серед доступних. XPath, ID class – хороший підхід. На даний момент кращий підхід – кастомні атрибути і пошук елементів по CSS селекторам. Він також призведе до спілкування між розробниками і тестерами.

Порівняння варіантів:

Апгрейд проекту з допомогою CSS селекторів і кастомних атрибутів