Организация тестовых сценариев

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

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

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

    Пример структуры тестовых файлов: 

    tests/
  ├── home.test.js
  ├── login.test.js
  ├── dashboard.test.js

  2. Использование before/after hooks Перед тем как запустить тест, нужно подготовить среду: открыть браузер, перейти на нужную страницу, выполнить вход в систему и так далее. Для этого можно использовать хуки beforeAll, beforeEach, afterAll, afterEach, которые позволяют выполнить действия до и после каждого теста или всей группы тестов.

    Пример использования: 

    beforeAll(async () => {
  browser = await puppeteer.launch();
  page = await browser.newPage();
});

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

beforeEach(async () => {
  await page.goto(&
});

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

Разделение тестов по категориям

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

  1. Тесты функциональности Эти тесты проверяют, работает ли функциональность страницы или компонента корректно. Например, проверка отправки формы, работы кнопок, взаимодействия с элементами на странице.

    Пример: 

    test('Пользователь может отправить форму регистрации', async () => {
  await page.type('#username', 'testuser');
  await page.type('#password', 'testpassword');
  await page.click('#submit');
  const successMessage = await page.$eval('#success', el => el.textContent);
  expect(successMessage).toBe('Регистрация успешна!');
});

  2. Тесты производительности Эти тесты предназначены для измерения времени загрузки страницы, ответа сервера или других операций, которые могут повлиять на производительность приложения.

    Пример: 

    test('Загрузка страницы не должна превышать 2 секунд', async () => {
  const startTime = Date.now();
  await page.goto('http://example.com');
  const endTime = Date.now();
  expect(endTime - startTime).toBeLessThan(2000);
});

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

    Пример: 

    test('Попытка ввода скрипта в поле ввода', async () => {
  await page.type('#comment', '<script>alert("XSS Attack")</script>');
  await page.click('#submit');
  const alertMessage = await page.evaluate(() => {
    return window.alert;
  });
  expect(alertMessage).toBeUndefined();
});

  4. Тесты на совместимость браузеров Для тестирования совместимости с различными браузерами можно использовать Puppeteer в связке с сервисами типа BrowserStack или Sauce Labs. Это позволяет запускать тесты на реальных браузерах и проверять работу функционала.

    Пример: 

    const browsers = ['chrome', 'firefox', 'webkit'];

for (let browserType of browsers) {
  test(`${browserType} должен корректно отображать страницу`, async () => {
    const browser = await puppeteer.launch({ product: browserType });
    const page = await browser.newPage();
    await page.goto('http://example.com');
    const title = await page.title();
    expect(title).toBe('Example Domain');
    await browser.close();
  });
}

Параметризация тестов

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

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

    Пример: 

    const testData = [
  { username: 'testuser1', password: 'password1' },
  { username: 'testuser2', password: 'password2' },
  { username: 'testuser3', password: 'password3' }
];

testData.forEach(({ username, password }) => {
  test(`Пользователь ${username} может войти в систему`, async () => {
    await page.type('#username', username);
    await page.type('#password', password);
    await page.click('#login');
    const loggedIn = await page.$eval('#profile', el => el.textContent);
    expect(loggedIn).toContain(username);
  });
});

Использование Page Object Model (POM)

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

  1. Создание объекта страницы Каждый объект страницы отвечает за взаимодействие с конкретной страницей приложения. В нем могут быть методы для взаимодействия с элементами страницы (кнопки, поля ввода, ссылки и т. д.).

    Пример: 

    class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameInput = '#username';
    this.passwordInput = '#password';
    this.submitButton = '#submit';
  }

  async login(username, password) {
    await this.page.type(this.usernameInput, username);
    await this.page.type(this.passwordInput, password);
    await this.page.click(this.submitButton);
  }
}

const loginPage = new LoginPage(page);
await loginPage.login('testuser', 'testpassword');

  2. Использование объектов страниц в тестах В тестах достаточно вызывать методы объектов страниц, что делает тесты более лаконичными и понятными.

    Пример: 

    test('Пользователь может войти в систему', async () => {
  const loginPage = new LoginPage(page);
  await loginPage.login('testuser', 'testpassword');
  const loggedIn = await page.$eval('#profile', el => el.textContent);
  expect(loggedIn).toContain('testuser');
});

Асинхронность и обработка ошибок

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

  1. Обработка ошибок Рекомендуется использовать блоки try-catch для перехвата ошибок, связанных с асинхронными операциями. Это поможет избежать незавершенных тестов и предоставит более понятные сообщения об ошибках.

    Пример: 

    try {
  await page.goto('http://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
} catch (error) {
  console.error('Ошибка при загрузке страницы:', error);
  throw error;
}

Подведение итогов

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

Оглавление