Валидация входных данных

Puppeteer — это библиотека Node.js для управления браузером Chromium или Chrome через протокол DevTools. Она предоставляет API для автоматизации действий пользователя, тестирования интерфейсов и валидации данных. Для работы требуется Node.js версии не ниже 16.

Установка выполняется через npm:

npm install puppeteer

После установки Puppeteer автоматически загружает совместимую версию Chromium, которую можно использовать для тестирования. Для подключения в коде:

const puppeteer = require(&

Создание браузера и страницы осуществляется через методы
launch() и newPage():

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');
})();

Навигация и взаимодействие с элементами


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


Пример заполнения формы:

await page.type('#username', 'testuser');
await page.type('#password', '123456');
await page.click('#submit');

Метод type(selector, text) имитирует ввод текста,
click(selector) — клик по элементу. Для селекторов можно
использовать CSS или XPath.


Для проверки наличия элемента или его состояния применяются методы
waitForSelector и evaluate:

await page.waitForSelector('#error-message', { visible: true });
const errorText = await page.$eval('#error-message', el => el.textContent);

Валидация форм и проверка ошибок


Основная задача тестирования ввода — убедиться, что форма корректно
обрабатывает данные. Puppeteer позволяет проверять:



обязательные поля


формат введённых данных


отображение сообщений об ошибках



Проверка обязательного поля:

await page.click('#submit');
const isErrorVisible = await page.$eval('#username-error', el => el.offsetParent !== null);
console.log(isErrorVisible); // true, если сообщение об ошибке отображается

Проверка формата e-mail:

await page.type('#email', 'invalid-email');
await page.click('#submit');
const emailError = await page.$eval('#email-error', el => el.textContent);
console.log(emailError); // "Введите корректный e-mail"

Использование offsetParent позволяет определить, виден ли
элемент на странице, что важно для проверки ошибок валидации.


Работа с динамическими формами


Современные веб-приложения часто используют динамическую валидацию —
ошибки отображаются после изменения поля или потери фокуса.

await page.type('#password', 'short');
await page.focus('#username'); // перемещение фокуса для активации валидации
const passwordError = await page.$eval('#password-error', el => el.textContent);

Для проверки динамических сообщений рекомендуется использовать
waitForFunction:

await page.waitForFunction(
  () => document.querySelector('#password-error')?.textContent.includes('минимум 8 символов')
);

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


Автоматическая генерация тестовых данных


Для комплексного тестирования часто требуется проверять разные
комбинации значений. Puppeteer можно интегрировать с библиотеками
генерации данных, например Faker.js:

const { faker } = require('@faker-js/faker');

const randomEmail = faker.internet.email();
await page.type('#email', randomEmail);
await page.click('#submit');

Это позволяет проверять валидацию формы на различных корректных и
некорректных данных.


Снятие скриншотов и логирование ошибок


Для отладки тестов Puppeteer позволяет делать скриншоты и сохранять их:

await page.screenshot({ path: 'error.png', fullPage: true });

Также полезно логировать текст ошибок для анализа:

const errors = await page.$$eval('.error-message', elements => elements.map(el => el.textContent));
console.log(errors);

Метод $$eval</code> позволяет
получить массив всех элементов с
указанным селектором, что удобно для проверки множественных сообщений о
валидации.</p>
<h3 id="проверка-состояния-кнопок-и-блокировок">Проверка состояния
кнопок и блокировок</h3>
<p>Формы могут блокировать кнопку отправки до корректного ввода.
Puppeteer позволяет проверять атрибуты кнопок:</p>
<pre class="javascript"><code>const isDisabled = await
page.$eval('#submit', btn => btn.disabled);
console.log(isDisabled); // true, если кнопка заблокирована

describe('Валидация форм', () => {
  let browser, page;

  beforeAll(async () => {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
    await page.goto('https://example.com/login');
  });

  afterAll(async () => {
    await browser.close();
  });

  test('Обязательное поле username', async () => {
    await page.click('#submit');
    const isErrorVisible = await page.$eval('#username-error', el => el.offsetParent !== null);
    expect(isErrorVisible).toBe(true);
  });
});

await page.type('#email', 'test@example.com');
await page.waitForResponse(response => response.url().includes('/validate-email') && response.status() === 200);
const emailError = await page.$eval('#email-error', el => el.textContent);