Итак, в прошлый раз мы рассмотрели, как можно без особых проблем выкатить рабочую страницу на GitHub Pages и попробовать встроить в эту страницу, например, плеер и убедиться, что он работает.

Логично предположить, что следующими этапами будут взаимодействие со встроенными элементами iframe и автоматизация проверок с такими элементами на созданной нами странице.

Для начала давайте немного пройдемся по базе.

Что такое iframe? Если объяснять простыми словами, то это еще один html-документ внутри нашей страницы, которая в свою очередь также является html-документом. Таким образом, чтобы взаимодействовать с элементами внутри iframe нужно сначала переключиться на iframe. Проще говоря - мы должны обратиться к этому элементу, как к отдельной странице.

Как именно это сделать? Давайте посмотрим на наиболее простые и действенные методы для поиска iframe на примере страницы, которую я выкатил на GitHub Pages.

Перейдем на страницу https://sergesiluyanov.github.io/embedHabrTest/ и изучим ее структуру:

Давайте сосредоточимся на кнопке play. Что мы о ней можем сказать? Прежде всего, она имеет атрибут data_testid. Это очень хорошо, поскольку такие атрибуты являются самыми надежными с точки зрения изменений в коде. К примеру, CSS-селектор может быть динамическим и нестабильным от версии к версии и придется каждый раз менять селектор в коде.

Помимо атрибута, мы видим, что кнопка находится внутри элемента iframe на странице. Чтобы "добраться" до этой кнопки нам придется переключиться на содержимое iframe и только потом кликать по кнопке.

Теперь перенесемся в сам код для тестов на GitHub и посмотрим на общую структуру проекта.

На скрине выше показана общая структура проекта, будем использовать фреймворк cypress. Как видите, я использую паттерн page object, то есть все страницы, с которыми я взаимодействую, хранятся как отдельные файлы (объекты). В объектах уже хранятся классы и функции, которые импортируются и вызываются в самих тестах.

Перейдем непосредственно к классу iFramePage:

Функция visit, в которой прописан url нашей страницы.
Функция iFrameButton, которая переключается на элемент iFrame (c помощью src) и кликает на кнопку play.

Сама функция iFramePlayButton сначала ищет элемент iframe, затем переключается на его содержимое для дальнейшей работы с элементами внутри iframe, проверяет, что элемент не пустой, после чего запускается "оборачивание" для команд cypress и обнаруживается наш элемент по data_testid. И, в конце концов, кликаем по элементу с кнопкой play.

Итак, с классом iFramePage разобрались, теперь попробуем запустить наш первый тест.

Посмотрим, как выглядит наш тест: для начала импортируем класс из объекта с помощью import. После этого начинаем описание нашего теста с describe, далее идет кастомная команда blockAllRequests, в которой указываются только нужные для загрузки домены (убираем все url, которые собирают метрики, например yandex, google и т.д.). Команда BlockAllRequests необходима для оптимизации загрузки, то есть загрузятся только те домены, которые необходимы для нормальной работы самой страницы.

После этого вызываем две функции: visit и iFramePlayButton. Как видите, все предельно просто и понятно. В данной статье пока не накидываю ассерты и проверки, поскольку хотелось бы сосредоточиться именно на работе с iframe-элементами.

Давайте теперь запустим наш тест. Для наглядности используем команду npx cypress open.

После этого откроется локальный инстанс браузера, в котором выбираем E2E testing in Chrome.

Теперь кликаем по нашему файлу, в котором прописаны тесты

А вот и магия: тест выполнился, а видео воспроизводится после клика по кнопке play!

Отлично, наш тест работает! Какие еще методы для поиска iframe-элементов мы можем использовать и что еще добавить к тесту помимо ассертов?

На веб-странице может быть несколько iframe-элементов, при этом нам нужно взаимодействовать только с одним из них или со всеми по очереди. Ниже скриншот с примером реализации альтернативных подходов:

если нам известно имя класса, то находим определенный iframe с нужным именем класса
если нужен первый iframe, то прописываем в nth-of-type(0), если второй, то (1) и т.д.

Можно воспользоваться и xpath для поиска iframe, но на реальной web-странице такой селектор может быть очень длинным и неудобным для чтения в коде.

Как видите, в cypress можно легко и просто искать iframe-элементы и взаимодействовать с кнопками внутри него, а запуск в локальном инстансе очень хорошо помогает в дебаге наших тестов.

Стоит упомянуть, что важное значение помимо самих фреймворков (будь то cypress или selenium) имеет также и то, как тесты структурированы. Чем лучше тесты структурированы, тем легче их поддерживать, а коллегам будет гораздо проще разобраться в коде, поэтому не забываем придерживаться общепринятых практик (таких как page object).

Оставляю ссылку на репозиторий для просмотра и более подробного изучения кода тестов - https://github.com/sergesiluyanov/habrIframe

Спасибо за то, что прочитали статью до конца, уверен, что было интересно и наглядно!

Обязательно увидимся в следующих статьях, буду рад комментариям и подпискам!

Переключение на элемент iframe на примере видео-плеера