При создании сквозных (end-to-end) тестов необходимо сначала найти элементы на веб-странице, а затем выполнять действия с ними. Например, найти ссылку и нажать на нее.
Самый удобный способ найти элемент — использовать генератор тестов Playwright, который позволяет не только генерировать тесты, но и автоматически создавать локаторы для конкретных элементов. Но прежде чем углубиться в использование генератора тестов, давайте разберемся, что такое элемент ссылки и что именно представляют собой локаторы.
Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.
Что такое ссылка?
HTML-элемент <a>, также известный как анкер, — это интерактивный элемент, создающий гиперссылку на другую страницу, будь то внутри вашего сайта или на внешнем ресурсе. Еще он может использоваться для ссылок на определенные области на той же странице, а также для email-адресов, скачивания файлов и всего, на что можно указать с помощью URL. Элемент <a> использует атрибут href, чтобы указать URL-адрес, на который ведет гиперссылка.
Так как же мы можем найти элемент ссылки, чтобы нажать на него? Для этого применяются локаторы.
Что такое локаторы?
В Playwright используется термин “локаторы”. Локаторы представляют собой способ нахождения элементов на странице с автоматическим ожиданием и возможностью повторной попытки. Автоматическое ожидание означает, что Playwright выполняет ряд проверок доступности элементов, например, проверяет, что элемент видим и активен перед выполнением действия с этим элементом.
Вы можете находить элементы, используя:
- роль (role)
- метку (label)
- плейсхолдер (placeholder)
- текст
- альтернативный текст (alt text)
- заголовок (title)
- идентификатор теста (test id)
Как найти элемент ссылки
HTML-элемент <a> имеет предопределенную роль “link” (ссылка), поэтому нам не нужно изменять HTML, чтобы использовать эту роль.
<a href="/about">About</a>
Это означает, что мы можем найти элемент <a>, используя локатор getByRole() с ролью “link”, и добавить метод click для выполнения клика по ссылке.
await page.getByRole('link').click();
Добавление имени
Предыдущий метод поиска элементов работает, но что, если на странице несколько ссылок? Здесь поможет параметр name, который представляет собой доступное имя для ссылки. Имя обычно берется из содержимого элемента, атрибута или связанного элемента.
await page.getByRole('link', { name: 'About' }).click();
Использование регулярного выражения (regex)
Можно также использовать регулярное выражение и игнорировать регистр, чтобы тест проходил независимо от того, написан текст с заглавной буквы или нет.
await page.getByRole('link', { name: /about/i }).click();
Установка exact в true
Вы можете установить параметр exact в true для точного совпадения. Это полезно, если, например, у вас есть ссылка с текстом “About” и другая, содержащая текст “About the Company”. При установке exact в true будет выбрана только ссылка с “About”, а не с “About the Company”.
await page.getByRole('link', { name: 'About', exact: true }).click();
Добавление aria-label
Если ссылка содержит aria-label, тогда вместо текстового содержимого будет использовано значение aria-label.
<a href="/locators" aria-label="read more about locators">Read more</a>
Мы можем найти эту ссылку, используя локатор getByRole() с ролью “link” и значением aria-label в качестве имени.
await page.getByRole('link', { name: /read more about locators/i }).click();
При написании тестов может быть сложно определить, какую роль использовать при работе с локатором getByRole(). Для ссылки это относительно просто, но существует обширный список ролей, которые можно использовать. Если у элемента нет доступного локатора, выбор подходящего может быть непростым, особенно если вы не знакомы со структурой DOM сайта, который тестируете. Как же выбрать правильный локатор?
Не тратьте время на то, чтобы понять, какой локатор лучше всего использовать. Вместо этого воспользуйтесь генератором тестов, чтобы автоматически создавать локаторы. Давайте посмотрим, как это можно сделать.
Генератор тестов Playwright
Вы можете генерировать код прямо из VS Code, нажав на ссылку «record new» в панели тестирования (нужно использовать расширение VS Code для Playwright).
Когда вы кликаете на элемент на вашем сайте, генератор анализирует страницу и выбирает наилучший локатор, приоритетно рассматривая локаторы по роли, тексту и test id. Если генератор находит несколько элементов, соответствующих локатору, он улучшит локатор, чтобы уникально идентифицировать нужный вам элемент.
Такой способ позволяет не беспокоиться о сбоях тестов из-за локаторов. Например, генератор может связать несколько локаторов для сужения области поиска или использовать метод filter() для выбора между несколькими элементами.
Если вы не используете расширение VS Code, в Playwright также имеется отдельный генератор тестов под названием Codegen.
npx playwright codegen
Выбор локатора
Вы можете выбрать локатор, нажав на кнопку «pick locator» в панели тестирования при использовании расширения VS Code. Когда вы наводите курсор на любой элемент в окне браузера, локатор этого элемента подсвечивается под курсором. При клике на элемент локатор появляется в окне «pick locator». Вы можете скопировать его в буфер обмена и вставить в свой тест.
Также можно выбрать локатор, используя отдельный генератор тестов, нажав на кнопку «explore».
npx playwright open
Цепочка локаторов
Если на сайте есть повторяющиеся ссылки, например, две ссылки “about” — одна в шапке, а другая в подвале (footer), генератор тестов создаст уникальные локаторы для каждой. Он подбирает отличительные элементы, чтобы легко различать ссылки.
getByRole('navigation').getByRole('link', { name: 'About' })
Для ссылки “about” в подвале генератор тестов снова уточняет локатор, добавляя дополнительные параметры в метод getByRole(), чтобы этот локатор соответствовал только одному элементу.
getByRole('contentinfo').getByRole('link', { name: 'About' })
Фильтрация локаторов
Если генератор тестов не может создать уникальный локатор через цепочку локаторов, он использует метод filter() для обеспечения уникальности локатора. Например, у нас может быть два списка, содержащие темы для постов в блоге. Первый список используется для фильтрации постов, а второй — для отображения тем каждого поста. Генератор тестов использует метод filter(), чтобы сделать локатор уникальным.
getByRole('list')
.filter({ hasText: 'architecturedev reljamstackjavascriptpersonalmentoringmotivationnuxtperformance' })
.getByRole('link', { name: 'architecture' })
Улучшение локаторов
Иногда фильтрация по тексту может привести к некрасивому локатору, как в примере выше, и вызвать проблемы в будущем, особенно если добавить новую тему в фильтры.
Вы можете улучшить этот фильтр, используя регулярное выражение для поиска определенных слов в тексте. Выбирать нужно слова, которые обычно не встречаются вместе в одном посте, такие как “architecture”, “mentoring” и “testing”.
getByRole('list')
.filter({ hasText: /architecture.*mentoring.*testing/ })
.getByRole('link', { name: 'architecture' })
Другой вариант — добавить атрибут aria-label к первому элементу <ul> со значением “topics”. Это не только улучшает доступность страницы, но и позволяет Playwright находить элементы по роли.
<ul aria-label="topics"> //... </ul>
Генератор тестов теперь использует этот aria-label и находит элемент по роли list с именем “topics”, создавая уникальный локатор.
getByRole('list', { name: 'topics' }).getByRole('link', { name: 'architecture' })
Заключение
Существует много других ролей и локаторов, которые мы не затронули в этой статье. Главное то, что вам не нужно знать все доступные локаторы, потому что благодаря генератору тестов не требуется вручную выбирать роль или локатор при написании тестов. Это значительно упрощает вашу работу и обеспечивает надежность локаторов.
Если же генератор тестов создает локатор, который вас не устраивает, возможно, стоит изучить DOM, чтобы улучшить код и сделать его более доступным. Это также позволит генератору создавать более доступные локаторы, что улучшит ваши тесты и качество кода одновременно.
Перевод статьи «How to locate elements in Playwright».