Работа с фреймами и iframe

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

Основные принципы работы с фреймами

Фреймы или iframe элементы — это HTML-элементы, которые позволяют встраивать одну веб-страницу в другую. Они могут быть как частью основного документа, так и отдельными источниками контента с различными настройками безопасности. Работа с ними в Puppeteer не сильно отличается от работы с основным контентом страницы, но требует учёта некоторых особенностей.

Доступ к фреймам

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

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

Пример: 

const frames = await page.frames();

Если нужно обратиться к конкретному фрейму, можно использовать его URL или название, если оно задано.

Пример получения фрейма по его URL: 

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


Пример получения фрейма по имени:



const frame = page.frames().find(f => f.name() === 'frame_name');



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




Как только фрейм получен, можно использовать все стандартные методы
Puppeteer для взаимодействия с элементами внутри фрейма. Для этого
необходимо вызывать методы, такие как frame.() < /code>, < code > frame.$()</code>,
<code>frame.evaluate()</code>, точно так же,
как если бы работа велась с основным документом.</p>
<p>Пример клика по кнопке внутри фрейма:</p>
<pre class="javascript"><code>await
frame.click(&#39;button#submit&#39;);</code></pre>
<p>Для получения текста из элемента внутри фрейма:</p>
<pre class="javascript"><code>const text = await
frame.$eval('h1', el => el.textContent);

Ожидания внутри фреймов

Одной из распространённых задач является ожидание элементов внутри фреймов. В Puppeteer можно использовать те же методы ожидания, что и для основного контента: waitForSelector, waitForFunction, waitForTimeout.

Пример ожидания появления элемента внутри фрейма: 

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

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

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

Пример: 

const parentFrame = page.frames().find(f => f.name() === 'parentFrame');
const childFrames = parentFrame.childFrames();
const firstChildFrame = childFrames[0];

После того как вложенный фрейм найден, можно работать с его элементами так же, как и с любыми другими фреймами.

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

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

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

Пример работы с несколькими фреймами на одной странице

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

Пример взаимодействия с несколькими фреймами: 

const frames = page.frames();
const mainFrame = frames[0]; // основной фрейм
const secondFrame = frames[1]; // второй фрейм

// Взаимодействие с элементами в основным фрейме
await mainFrame.click('button#login');

// Взаимодействие с элементами во втором фрейме
await secondFrame.type('input#search', 'Puppeteer');

Управление фреймами с помощью событий

Фреймы также могут генерировать события, такие как загрузка, ошибки и т.д. Для этого используется стандартный механизм событий Puppeteer.

Пример обработки события загрузки фрейма: 

const frame = page.frames().find(f => f.name() === 'frame_name');

frame.on('load', () => {
  console.log('Фрейм загружен!');
});

Работа с фреймами, загруженными с разных доменов

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

Для обхода CORS-проблем можно использовать прокси или настроить дополнительные параметры безопасности браузера.

Примеры работы с фреймами

  1. Получение данных из фрейма: 
const frame = page.frames().find(f => f.name() === 'contentFrame');
const result = await frame.$eval('.data', el => el.textContent);
console.log(result);
  1. Ввод данных в форму в фрейме: 
const frame = page.frames().find(f => f.name() === 'loginFrame');
await frame.type('input[name="username"]', 'myUsername');
await frame.type('input[name="password"]', 'myPassword');
await frame.click('button[type="submit"]');

Заключение

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

Оглавление