Анализ тенденций

Playwright — современный инструмент для автоматизированного тестирования веб-приложений, поддерживающий все популярные браузеры: Chromium, Firefox и WebKit. Для начала работы требуется установка через npm:

npm install -D @playwright/test

Создание базовой конфигурации тестов осуществляется с помощью команды:

npx playwright install

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

Файл конфигурации playwright.config.js позволяет определить глобальные параметры тестирования:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  timeout: 30000,
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    ignoreHTTPSErrors: true,
    video: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
});

Структура тестов и запуск

Тесты в Playwright создаются с использованием синтаксиса, схожего с Jest или Mocha. Основные элементы:

  • test.describe — группировка связанных тестов.
  • test — отдельный тестовый сценарий.
  • expect — утверждения для проверки состояния элементов и страниц.

Пример простого теста:

import { test, expect } from '@playwright/test';

test.describe('Анализ тенденций на сайте', () => {
  test('Проверка отображения графика', async ({ page }) => {
    await page.goto('https://example.com/trends');
    const chart = await page.locator('#trendChart');
    await expect(chart).toBeVisible();
  });
});

Для запуска всех тестов используется команда:

npx playwright test

Отдельный тест или группа тестов может быть запущена с фильтром:

npx playwright test tests/trends.spec.js

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

Playwright позволяет управлять страницей и элементами с высокой точностью. Основные методы:

  • page.goto(url) — переход на страницу.
  • page.locator(selector) — поиск элемента.
  • locator.click() — клик по элементу.
  • locator.fill(value) — ввод текста.
  • locator.selectOption(value) — выбор из выпадающего списка.

Пример сложного взаимодействия:

const filterDropdown = page.locator('#filter');
await filterDropdown.selectOption('lastMonth');

const applyButton = page.locator('#applyFilter');
await applyButton.click();

const firstItem = page.locator('.trend-item').first();
await expect(firstItem).toContainText('Рост');

Ожидания и синхронизация

Одной из сильных сторон Playwright является встроенная система ожиданий. В отличие от setTimeout, Playwright использует автоматическое ожидание состояния элементов:

  • toBeVisible() — элемент видим.
  • toHaveText(text) — текст совпадает с ожидаемым.
  • toHaveAttribute(name, value) — проверка атрибута.
  • toHaveCount(n) — проверка количества элементов.

Пример с ожиданием:

const loadingSpinner = page.locator('#loading');
await expect(loadingSpinner).toHaveCount(0); // Дождаться завершения загрузки

Работа с несколькими страницами и вкладками

Playwright поддерживает управление несколькими страницами и контекстами браузера. Для анализа данных на различных вкладках используется:

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('#openTrendInNewTab')
]);

await newPage.waitForLoadState();
await expect(newPage.locator('#trendDetails')).toBeVisible();

Контексты позволяют эмулировать разные пользователи без пересоздания браузера:

const context = await browser.newContext({ storageState: 'user.json' });
const page = await context.newPage();
await page.goto('https://example.com/trends');

Сбор данных и анализ динамических графиков

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

const dataPoints = await page.$$eval('.chart-point', points =>
  points.map(point => ({
    label: point.getAttribute('data-label'),
    value: parseFloat(point.getAttribute('data-value'))
  }))
);

console.log(dataPoints);

Динамические графики с обновлением через JavaScript требуют ожидания полной загрузки:

await page.waitForFunction(() => {
  const points = document.querySelectorAll('.chart-point');
  return points.length > 0 && Array.from(points).every(p => p.dataset.value !== '');
});

Скриншоты и видеозапись

Для документирования результатов тестирования Playwright предоставляет встроенные средства:

await page.screenshot({ path: 'trendPage.png', fullPage: true });
await page.video().saveAs('trendTest.mp4');

Видеозапись особенно полезна при анализе ошибок динамических элементов.

Параллельное тестирование и отчеты

Playwright поддерживает запуск тестов параллельно, что ускоряет проверку больших проектов:

npx playwright test --workers=4

Автоматическое формирование отчетов осуществляется через HTML-отчет:

npx playwright show-report

Отчеты включают скриншоты, видеозаписи и логи действий, что облегчает анализ тенденций и выявление проблем.

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

Для крупных проектов рекомендуется применять POM для структурирования тестов. Пример объекта страницы графика:

export class TrendPage {
  constructor(page) {
    this.page = page;
    this.chart = page.locator('#trendChart');
    this.filter = page.locator('#filter');
    this.applyButton = page.locator('#applyFilter');
  }

  async open() {
    await this.page.goto('https://example.com/trends');
  }

  async applyFilter(value) {
    await this.filter.selectOption(value);
    await this.applyButton.click();
  }

  async getFirstTrendLabel() {
    return await this.page.locator('.trend-item').first().textContent();
  }
}

Использование POM улучшает читаемость тестов и упрощает поддержку при изменениях интерфейса.

Интеграция с CI/CD

Playwright легко интегрируется с системами непрерывной интеграции:

  • GitHub Actions: запуск тестов на каждом пуше.
  • GitLab CI/CD: сборка и проверка через Docker-окружение.
  • Jenkins: автоматизация отчетов и уведомлений.

Конфигурация CI обычно включает установку браузеров, запуск тестов и сохранение артефактов (скриншоты, видео, логи) для последующего анализа.

Оглавление