Хелперы и утилиты

Puppeteer предоставляет большое количество встроенных инструментов и API для работы с браузером и веб-страницами. Однако для ускорения разработки, повышения удобства и повторного использования кода полезно создавать собственные хелперы и утилиты, которые могут абстрагировать и упростить выполнение часто повторяющихся задач. Такие утилиты помогают структурировать проект и делают тестирование более гибким и читаемым.

Что такое хелперы и утилиты?

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

Утилиты представляют собой более масштабные и обобщенные решения, которые помогают с выполнением сложных операций или настройкой окружающей среды. Например, создание набора настроек для тестирования или логирование ошибок.

Пример простого хелпера для взаимодействия с элементами

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

// helper.js
const puppeteer = require(&

async function clickElement(page, selector) {
    const element = await page.$(selector);
    if (element) {
        await element.click();
    } else {
        throw new Error(`Element with selector "${selector}" not found`);
    }
}

async function typeInField(page, selector, text) {
    const element = await page.$(selector);
    if (element) {
        await element.type(text);
    } else {
        throw new Error(`Element with selector "${selector}" not found`);
    }
}

module.exports = { clickElement, typeInField };

В этом примере созданы два хелпера — clickElement и typeInField. Каждый из них выполняет свою задачу: клик по элементу или ввод текста. Оба хелпера используют базовые методы Puppeteer для работы с элементами и являются удобными абстракциями для повторяющихся операций.

Утилиты для управления состоянием

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

Пример утилиты для автоматического логина: 

// authUtils.js
async function login(page, username, password) {
    await page.goto('https://example.com/login');
    await page.type('#username', username);
    await page.type('#password', password);
    await page.click('#login-button');
    await page.waitForNavigation();
}

module.exports = { login };

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

Ожидание и таймауты

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

Пакет Puppeteer уже предоставляет методы для явного ожидания, такие как waitForSelector, но можно создать собственные утилиты для гибкости и улучшения логирования. 

// waitUtils.js
async function waitForElement(page, selector, timeout = 5000) {
    try {
        await page.waitForSelector(selector, { timeout });
    } catch (error) {
        throw new Error(`Element with selector "${selector}" not found within ${timeout}ms`);
    }
}

module.exports = { waitForElement };

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

Утилиты для работы с данными

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

Пример утилиты для создания случайного имени пользователя: 

// dataUtils.js
function generateRandomUsername() {
    const prefix = 'user';
    const suffix = Math.random().toString(36).substring(2, 10);
    return prefix + suffix;
}

module.exports = { generateRandomUsername };

Эта утилита позволяет генерировать уникальные имена для тестов, минимизируя вмешательство человека в создание данных. Это особенно полезно для тестов, где важно избегать повторяющихся данных или для загрузки тестового окружения.

Логирование и обработка ошибок

Отслеживание ошибок и логирование в тестах помогает при поиске и устранении проблем. В Puppeteer можно использовать хелперы для упрощения логирования состояния браузера, страниц или скриптов, чтобы выявить и устранить баги на ранних этапах.

Пример утилиты для логирования: 

// logUtils.js
function logPageState(page) {
    page.on('console', (msg) => {
        console.log('PAGE LOG:', msg.text());
    });
}

module.exports = { logPageState };

С помощью этой утилиты можно выводить в консоль все сообщения, которые возникают на странице, что помогает в отладке тестов и анализа выполнения сценариев.

Комбинированные утилиты для сложных сценариев

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

// accountUtils.js
const { login } = require('./authUtils');
const { generateRandomUsername } = require('./dataUtils');

async function createAccount(page, email, password) {
    const username = generateRandomUsername();
    await page.goto('https://example.com/signup');
    await page.type('#email', email);
    await page.type('#password', password);
    await page.type('#username', username);
    await page.click('#submit-button');
    await page.waitForNavigation();
    return username;
}

module.exports = { createAccount };

Эта утилита автоматизирует создание аккаунта, используя данные, генерируемые с помощью другого хелпера. Комбинированные утилиты становятся полезными, когда необходимо тестировать несколько этапов взаимодействия с приложением.

Заключение

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

Оглавление