Puppeteer предоставляет мощные инструменты для автоматизации браузера, позволяя выполнять тесты пользовательского интерфейса и взаимодействовать с веб-страницами. Одним из ключевых аспектов эффективного использования Puppeteer является возможность выполнения проверок и утверждений (assertions) для обеспечения правильности работы тестируемых приложений. Assertions помогают убедиться, что элементы на странице отображаются корректно, что страница ведет себя ожидаемым образом, и что данные соответствуют заданным условиям.
В контексте автоматизированных тестов утверждения проверяют состояние системы в момент времени. Если условие не выполняется, тест считается провалившимся. В Puppeteer для выполнения assertions часто используют библиотеки, такие как Jest, Mocha, или Chai, но сами утверждения могут быть интегрированы в код без использования сторонних фреймворков.
Один из самых распространенных вариантов — проверка наличия элемента на странице. Рассмотрим следующий пример:
const puppeteer = require(&
async function runTest() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const element = await page.$('h1');
if (!element) {
throw new Error('Элемент h1 не найден');
}
await browser.close();
}
runTest();
В данном примере проверяется, существует ли элемент
<h1> на странице. Если элемент не найден,
выбрасывается исключение с сообщением об ошибке. Это простая форма
утверждения.
Часто необходимо удостовериться, что элементы на странице появились, прежде чем с ними взаимодействовать. Для этого Puppeteer предоставляет различные методы ожидания, которые позволяют контролировать время загрузки страницы и состояния элементов.
Метод page.waitForSelector() позволяет подождать появления
элемента на странице, прежде чем выполнять дальнейшие действия.
await page.waitForSelector('h1');
Этот метод будет ожидать, пока элемент <h1> не
появится на странице. Если элемент не будет найден в течение указанного
времени (по умолчанию 30 секунд), тест завершится ошибкой.
Иногда нужно дождаться, пока элемент изменит свой вид, например, когда
происходит динамическая загрузка контента. В этом случае можно
использовать метод waitForFunction:
await page.waitForFunction(
'document.querySelector("h1").textContent === "Expected Title"'
);
Этот метод проверяет, что текст элемента <h1>
совпадает с ожидаемым значением. Если условие не выполнится в течение
заданного времени, будет выброшено исключение.
Для удобства работы с assertions в тестах, обычно используются библиотеки, такие как Chai, Jest или Mocha, которые интегрируются с Puppeteer и позволяют делать утверждения более декларативными.
Библиотека Chai предоставляет удобный синтаксис для различных типов утверждений. В тестах с Puppeteer ее можно использовать для проверок на существование элементов, значений или состояния.
Пример с использованием Chai:
const puppeteer = require('puppeteer');
const chai = require('chai');
const expect = chai.expect;
async function runTest() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const element = await page.$('h1');
expect(element).to.not.be.null;
const title = await page.$eval('h1', el => el.textContent);
expect(title).to.equal('Expected Title');
await browser.close();
}
runTest();
В данном примере с использованием Chai выражения
expect(element).to.not.be.null и
expect(title).to.equal(‘Expected Title’) проверяют, что
элемент существует и что его текстовое содержимое соответствует
ожидаемому.
Jest — еще одна популярная библиотека для тестирования
в JavaScript, которая также может быть использована для выполнения
проверок в тестах с Puppeteer. Jest предоставляет встроенные
утверждения, такие как expect, и работает очень удобно с
асинхронными операциями.
Пример использования Jest:
const puppeteer = require('puppeteer');
describe('Тестирование страницы', () => {
let browser;
let page;
beforeAll(async () => {
browser = await puppeteer.launch();
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
test('Проверка заголовка страницы', async () => {
await page.goto('https://example.com');
const title = await page.$eval('h1', el => el.textContent);
expect(title).toBe('Expected Title');
});
test('Проверка наличия кнопки', async () => {
const button = await page.$('button');
expect(button).not.toBeNull();
});
});
В этом примере expect(title).toBe(‘Expected Title’) и
expect(button).not.toBeNull() используются для проверки
значений и наличия элементов на странице.
Иногда необходимо проверить не только присутствие элементов на странице, но и их данные. Например, нужно убедиться, что в таблице отображаются правильные данные, или что форма отправлена с нужными значениями.
Пример проверки значений:
const puppeteer = require('puppeteer');
const chai = require('chai');
const expect = chai.expect;
async function runTest() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const data = await page.$$eval('table tr', rows => {
return rows.map(row => {
const cells = row.querySelectorAll('td');
return {
name: cells[0].textContent,
value: cells[1].textContent
};
});
});
expect(data).to.deep.equal([
{ name: 'Item 1', value: 'Value 1' },
{ name: 'Item 2', value: 'Value 2' }
]);
await browser.close();
}
runTest();
Здесь с помощью $$eval извлекаются данные из таблицы, и
затем они проверяются с использованием
expect(data).to.deep.equal(), что гарантирует точное
совпадение данных.
Одним из ключевых аспектов работы с Puppeteer и утверждениями является
асинхронность. Многие операции, такие как загрузка страниц или получение
элементов, требуют ожидания, и ошибки могут возникать, если элементы не
появляются вовремя. Важно правильно обрабатывать такие ошибки, используя
механизмы try-catch или expect.assertions в
Jest.
Пример обработки ошибок:
const puppeteer = require('puppeteer');
async function runTest() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
try {
const element = await page.$('h1');
if (!element) {
throw new Error('Элемент не найден');
}
} catch (error) {
console.error('Ошибка при поиске элемента:', error);
}
await browser.close();
}
runTest();Здесь обрабатывается ошибка, если элемент не был найден, и выводится подробное сообщение.
Использование утверждений и проверок в тестах Puppeteer играет важную роль в обеспечении качества веб-приложений. Проверки позволяют удостовериться, что элементы страницы правильно отображаются, данные соответствуют ожиданиям, а функциональность работает корректно. Интеграция с библиотеками, такими как Chai или Jest, позволяет значительно улучшить процесс тестирования, делая код более читабельным и поддерживаемым.