Работа с вложенными фреймами

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

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

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

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

Как получить доступ к фрейму

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

  1. Получение всех фреймов на странице Каждый объект Page имеет метод frames(), который возвращает массив всех фреймов, вложенных в эту страницу. Используя этот метод, можно получить все фреймы, включая основной.

    Пример: 

    const frames = page.frames();
console.log(frames.length); // Выведет количество фреймов на странице

  2. Получение фрейма по URL или имени Часто нужно работать с фреймом, который имеет определённый URL или имя. В этом случае можно использовать метод frame(), который позволяет найти фрейм по имени или URL.

    Пример: 

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

  3. 

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

    

    
Пример:

    

    const frame = page.frames()[1]; // Второй фрейм, так как первый — это основной
    

    4.

Взаимодействие с фреймами

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

  1. Навигация по фрейму Для навигации внутри фрейма используются те же методы, что и для основной страницы. Например, метод goto() позволяет загрузить новый URL в фрейм.

    Пример: 

    await frame.goto('https://example.com/another-page');

  2. Заполнение форм Для работы с формами в фрейме используется метод type() для ввода текста и метод click() для нажатия кнопок.

    Пример: 

    await frame.type('#input-field', 'Test Input');
await frame.click('#submit-button');

  3. Ожидание элементов в фрейме Методы ожидания, такие как waitForSelector(), работают аналогично, но необходимо вызывать их на объекте фрейма.

    Пример: 

    await frame.waitForSelector('.some-element');

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

Рассмотрим пример теста, который проверяет, что внутри вложенного фрейма присутствует определённый элемент. 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com/page-with-iframe');
  
  // Получаем фрейм
  const iframe = page.frames().find(f => f.url().includes('iframe-source'));
  
  // Ожидаем элемент внутри фрейма
  await iframe.waitForSelector('.iframe-element');
  
  // Проверяем наличие текста внутри элемента
  const text = await iframe.$eval('.iframe-element', el => el.textContent);
  console.log(text); // Ожидаемый текст из фрейма

  await browser.close();
})();

В этом примере создаётся браузер, переходит на страницу с фреймом и затем выполняется проверка, что элемент внутри фрейма доступен и содержит ожидаемый текст. Важно отметить, что операции, такие как waitForSelector() и eval(), необходимо вызывать на объекте фрейма, а не на основном контексте страницы.

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

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

    Пример: 

    await page.waitForFunction(() => document.querySelector('iframe') !== null);

  2. Переключение между фреймами Важно помнить, что после выполнения действий в одном фрейме контекст выполнения остаётся внутри этого фрейма. Если необходимо вернуться в основной фрейм, нужно явно переключиться на него.

    Пример: 

    // Вернуться в основной фрейм
const mainFrame = page.mainFrame();

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

    Пример: 

    const iframe = page.frames().find(f => f.name() === 'iframe-name');
await iframe.waitForNavigation();

Заключение

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

Оглавление