Переключение между фреймами

В современных веб-приложениях часто используются фреймы (iframe), которые позволяют встраивать внешний контент в страницу, не перезагружая её. Проблема взаимодействия с такими фреймами становится актуальной при тестировании интерфейсов с помощью инструментов автоматизации, таких как Puppeteer.

Puppeteer предоставляет механизм для работы с фреймами, позволяя автоматизировать задачи, связанные с их манипуляцией, извлечением данных или взаимодействием с элементами внутри фреймов. Важно понимать, что фреймы в Puppeteer рассматриваются как отдельные контексты выполнения, каждый из которых имеет свой DOM и может содержать уникальные элементы, отличные от родительского окна.

Как работать с фреймами в Puppeteer

Чтобы взаимодействовать с элементами внутри фрейма, необходимо правильно идентифицировать сам фрейм и переключиться на него. Для этого Puppeteer предоставляет несколько способов, начиная от получения всех фреймов на странице до работы с фреймами по имени или индексу.

Получение всех фреймов

Каждый page объект в Puppeteer имеет метод frames(), который возвращает массив всех фреймов, включая основной фрейм страницы. Этот метод полезен, если необходимо получить доступ ко всем фреймам, которые могут быть добавлены динамически. 

const frames = await page.frames();

В результате выполнения этого кода мы получим массив объектов фреймов, среди которых основной фрейм будет находиться первым, а все остальные — следовать за ним.

Доступ к фрейму по имени или ID

Если фрейм имеет атрибут name или id, можно получить доступ к конкретному фрейму с помощью метода frame(), который принимает имя или ID фрейма как аргумент. 

const frame = page.frames().find(f => f.name() === &


Этот код находит фрейм с именем myFrame и сохраняет его в
переменную frame. Аналогичный подход используется для
поиска фрейма по ID.



const frame = page.frames().find(f => f.id() === 'frameId');



Доступ к фрейму по индексу




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



const frame = page.frames()[1];



Этот код выбирает второй фрейм на странице (первый фрейм всегда будет
находиться под индексом 0).




Взаимодействие с элементами внутри фреймов




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




Поиск элементов внутри фрейма




Для поиска элементов в фрейме используется метод frame.$()</code>, который ищет первый элемент,
соответствующий
селектору.</p>
<pre class="javascript"><code>const element = await
frame.$('button#submit');

Если требуется найти все элементы, соответствующие селектору, можно использовать frame.$$()</code>, который возвращает массив найденных элементов.</p> <pre class="javascript"><code>const elements = await frame.$$('div.classname');

Клик на элемент внутри фрейма

Для клика на элемент внутри фрейма используется метод frame.click(), аналогичный методу page.click(). 

await frame.click('button#submit');

Так же, как и в случае с обычной страницей, для клика можно задать дополнительные параметры, такие как задержка или кнопка мыши, которая будет использована.

Ввод текста в поля внутри фрейма

Метод frame.type() позволяет имитировать ввод текста в текстовые поля внутри фрейма. 

await frame.type('input[name="username"]', 'myUsername');

Также можно использовать frame.focus() для фокусировки на поле перед вводом текста. 

await frame.focus('input[name="password"]');
await frame.type('input[name="password"]', 'myPassword');

Получение данных из фрейма

Если нужно извлечь текст или другие данные из элементов внутри фрейма, можно использовать метод frame.evaluate(). Этот метод выполняет JavaScript код в контексте фрейма и возвращает результат выполнения. 

const title = await frame.evaluate(() => {
  return document.title;
});

Этот код извлекает заголовок страницы внутри фрейма.

Переключение между фреймами

При тестировании страницы с несколькими фреймами может возникнуть ситуация, когда необходимо переключаться между ними. Для этого важно понимать, что каждое переключение между фреймами происходит через создание нового контекста выполнения. Это может быть сделано при помощи доступа к каждому фрейму через frame() и выполнения действий на нем.

Переход от одного фрейма к другому требует выбора правильного фрейма на основании его имени, ID или индекса в массиве фреймов. После того как фрейм выбран, все дальнейшие взаимодействия (поиск элементов, клик, ввод текста и другие действия) будут происходить в контексте этого фрейма. 

const frame = page.frames().find(f => f.name() === 'frame1');
await frame.click('button#submit');

В этом примере действия (клик) выполняются внутри фрейма с именем frame1.

Обработка фреймов, добавленных динамически

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

Puppeteer позволяет ожидать появления фрейма с помощью page.waitForSelector() или использовать frame.waitForSelector(), чтобы дождаться появления нужного элемента внутри фрейма. 

const frame = await page.frames().find(f => f.name() === 'dynamicFrame');
await frame.waitForSelector('button#submit');
await frame.click('button#submit');

Этот код сначала находит фрейм с именем dynamicFrame, затем ожидает появления кнопки внутри фрейма, прежде чем выполнить клик по ней.

Работа с фреймами в разных контекстах

Важно отметить, что фреймы могут быть загружены в разных контекстах (например, в разных браузерах или вкладках). Puppeteer поддерживает переключение между этими контекстами с помощью методов, таких как page.context() или browser.createIncognitoBrowserContext(). Однако, для тестирования работы с фреймами внутри одного контекста, достаточно правильно использовать методы для поиска и взаимодействия с фреймами.

Заключение

Переключение между фреймами и работа с их содержимым в Puppeteer — это ключевой аспект автоматизации веб-тестирования, особенно когда страницы используют динамические фреймы. Правильное понимание механизма работы с фреймами и использование методов для их поиска и взаимодействия позволяет эффективно тестировать веб-приложения с использованием Puppeteer, обеспечивая точность и стабильность тестов.

Оглавление