Puppeteer предоставляет удобные инструменты для создания и управления браузерными страницами, что является важной частью тестирования в JavaScript. Работа с страницами включает в себя создание новой страницы, переключение между вкладками, взаимодействие с элементами страницы и управление её состоянием.
Основная цель при работе с Puppeteer — это создание и управление
страницами в браузере. После того как экземпляр браузера создан, можно
открыть новую страницу с помощью метода newPage():
const browser = await puppeteer.launch();
const page = await browser.newPage();
Метод newPage() создаёт новую вкладку в браузере, с которой
можно взаимодействовать. Важно помнить, что страницы в Puppeteer
асинхронны, и все операции с ними требуют использования
await.
Для тестирования различных сценариев важно перемещаться по страницам.
Puppeteer предоставляет методы для навигации по URL, такие как
goto() и reload(). Например, чтобы загрузить
страницу, используется:
await page.goto(&
Метод goto() принимает URL, а также дополнительные опции,
например, время ожидания загрузки страницы или способы ожидания. По
умолчанию Puppeteer ожидает, пока не будет завершена загрузка страницы,
но можно настроить более точные параметры:
await page.goto('https://example.com', {
waitUntil: 'networkidle2', // Ждать, пока сеть не станет «покойной»
timeout: 30000, // Таймаут в 30 секунд
});
Если нужно перезагрузить текущую страницу, используется метод
reload():
await page.reload();
Работа с несколькими страницами
Puppeteer поддерживает работу с несколькими вкладками или страницами
одновременно. Для этого достаточно создать несколько объектов страницы с
помощью newPage() и затем взаимодействовать с ними
параллельно:
const page1 = await browser.newPage();
const page2 = await browser.newPage();
await page1.goto('https://example.com');
await page2.goto('https://example.org');
Важно помнить, что каждая страница работает независимо, и для их
управления необходимо следить за контекстом. Взаимодействие с
элементами, например, может быть выполнено на каждой странице по
отдельности.
Переключение между страницами
Когда нужно работать с несколькими страницами в рамках одного теста, их
переключение можно осуществлять через переменные, хранящие объекты
страниц. Например, если нужно перейти на определённую страницу и
выполнить там действия, это делается через хранение ссылки на нужную
страницу:
const pages = await browser.pages();
const targetPage = pages[0]; // Выбираем первую страницу
await targetPage.goto('https://anotherpage.com');
Можно использовать методы работы с массивом страниц для управления их
состоянием и выполнять действия на нужной вкладке.
Взаимодействие с элементами на странице
Для взаимодействия с элементами на странице, Puppeteer предоставляет
множество методов, таких как click(), type(),
select() и другие. Например, чтобы кликнуть по кнопке,
можно использовать:
await page.click('#submit-button');
Кроме того, можно взаимодействовать с текстовыми полями и заполнять их с
помощью метода type():
await page.type('#username', 'testuser');
await page.type('#password', 'password123');
Также Puppeteer поддерживает работу с выпадающими списками:
await page.select('#dropdown', 'option1');
Каждое взаимодействие с элементами происходит через селекторы, которые
можно передавать в виде строк или объектов.
Манипуляции с окнами и вкладками
Помимо открытия новых страниц, Puppeteer позволяет управлять окнами
браузера. Для этого можно использовать метод
browser.pages(), который возвращает все открытые страницы в
виде массива. Управление окнами браузера осуществляется путём работы с
этими страницами.
Если необходимо закрыть конкретную вкладку, используется метод
close():
await page.close();
При закрытии страницы важно учитывать, что она удаляется из списка
открытых страниц, и с ней больше нельзя взаимодействовать.
Ожидание элементов
Важным аспектом работы с Puppeteer является ожидание элементов на
странице. Иногда необходимо дождаться, пока элемент будет доступен для
взаимодействия, чтобы избежать ошибок. Puppeteer предоставляет несколько
способов для этого, включая методы waitForSelector() и
waitForTimeout().
Пример ожидания появления элемента:
await page.waitForSelector('#login-form');
Этот метод ждёт, пока элемент с указанным селектором не станет доступным
для взаимодействия. Также можно указать время ожидания:
await page.waitForSelector('#submit-button', { timeout: 5000 }); // Ждём до 5 секунд
Метод waitForTimeout() позволяет просто ожидать заданное
количество времени, что может быть полезно в случае, когда нужно
подождать завершения асинхронных операций:
await page.waitForTimeout(2000); // Ждём 2 секунды
Снимки экрана и сохранение страницы
Puppeteer также предоставляет возможность делать скриншоты страницы, что
может быть полезно для тестирования визуального состояния или создания
отчётов:
await page.screenshot({ path: 'screenshot.png' });
Можно делать скриншоты определённых элементов, указывая селектор:
const element = await page.$('#element-id');
await element.screenshot({ path: 'element-screenshot.png' });
Кроме того, для сохранения текущего состояния страницы в PDF можно
использовать метод pdf():
await page.pdf({ path: 'page.pdf' });
Заключение
Puppeteer предоставляет мощный набор инструментов для работы с
браузерными страницами. Эти возможности позволяют создавать, управлять и
взаимодействовать с вкладками браузера, а также выполнять действия,
необходимые для автоматизации тестов. Управление страницами в Puppeteer
— это основа для создания автоматизированных тестов, проверки визуальных
состояний и взаимодействия с веб-приложениями.