AdsPower
Українська
English简体中文РусскийPortuguêsTiếng ViệtУкраїнська

Налаштування Playwright: встановлення, конфігурація та запуск тестів

17 хв читання
⌯

Швидкий огляд

Вивчіть налаштування Playwright з нуля: встановлення через npm, конфігурація проєктів, запуск тестів, глобальне налаштування та виправлення типових помилок у CI.

Налаштування Playwright: встановлення, конфігурація та запуск першого тесту

Налаштування Playwright займає близько п'яти хвилин: встановіть пакет, завантажте бінарні файли браузерів і запустіть згенерований приклад тесту. Складнощі починаються пізніше — налаштування проєктів, спільний стан автентифікації та збереження працездатності цієї ж конфігурації на CI-машині. Цей посібник проведе вас увесь шлях: від порожньої папки до надійного тестового конвеєра.

Що насправді встановлює налаштування Playwright

Коли ви запускаєте ініціалізатор, Playwright не просто додає залежність. Він створює каркас робочого тестового проєкту та завантажує бінарні файли браузерів для Chromium, Firefox і WebKit.

Типовий каркас виглядає так:

playwright.config.ts        # центральна конфігурація
package.json
package-lock.json           # або yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts           # мінімальний стартовий тест

У файлі playwright.config.ts визначаються браузери, тайм-аути, повторні спроби, проєкти та репортери. Папка tests/ містить ваші специфікації. Бінарні файли браузерів зберігаються поза вашим проєктом, щоб їх можна було повторно використовувати в різних репозиторіях.

Системні вимоги

Перед початком переконайтеся, що ваше середовище відповідає вимогам:

  • Node.js: остання версія 22.x, 24.x або 26.x
  • Windows: Windows 11+, Windows Server 2019+ або WSL
  • macOS: 14 (Sonoma) або новіша
  • Linux: Debian 12/13 або Ubuntu 22.04/24.04/26.04 (x86-64 або arm64)

Крок 1: Встановлення Playwright

Виберіть менеджер пакетів, який ви вже використовуєте. Команда нижче або ініціалізує новий проєкт, або додає Playwright до існуючого.

npm init playwright@latest
# або
yarn create playwright
# або
pnpm create playwright

Під час інтерактивного запиту ви обираєте:

  1. TypeScript або JavaScript — TypeScript є типовим вибором і забезпечує кращу підтримку редактора.
  2. Назва папки тестів — tests за замовчуванням, або e2e, якщо папка tests вже існує.
  3. Робочий процес GitHub Actions — рекомендовано, якщо ви плануєте запускати тести в CI.
  4. Встановити браузери Playwright — залиште цей пункт увімкненим, якщо ви не керуєте бінарними файлами окремо.

Ви можете повторно запустити ініціалізатор пізніше; він не перезапише існуючі тести.

Якщо ви віддаєте перевагу роботі в редакторі, розширення VS Code може створювати та запускати тести без використання терміналу. Для робочих процесів, керованих агентами, існує окремий CLI, який встановлює навички для таких інструментів, як Claude Code і GitHub Copilot:

npm install -g @playwright/cli@latest
playwright-cli install
playwright-cli install --skills

Це створює каталог .playwright, додає його до .gitignore та завантажує налаштований браузер, якщо він відсутній.

Крок 2: Запуск прикладу тесту

За замовчуванням тести запускаються в безголовому режимі та паралельно в Chromium, Firefox і WebKit.

npx playwright test

Корисні варіації:

npx playwright test --headed                 # побачити вікно браузера
npx playwright test --project=chromium       # запустити один браузер
npx playwright test tests/example.spec.ts    # запустити один файл
npx playwright test --ui                     # відкрити режим UI

Режим UI надає режим спостереження, перегляд кроків у реальному часі та налагодження з подорожами в часі. Це найшвидший спосіб зрозуміти, чому локатор не спрацював.

Читання HTML-звіту

Після запуску відкрийте звіт:

npx playwright show-report

Панель керування дозволяє фільтрувати за браузером, статусом passed, failed, skipped і flaky. Натискання на тест показує помилки, вкладення та кожен крок. Звіт відкривається автоматично лише при виникненні збоїв.

Крок 3: Налаштування проєктів і браузерів

Проєкт — це іменована конфігурація, яка націлена на конкретний браузер або пристрій. Більшість команд починають з трьох десктопних проєктів і додають емуляцію мобільних пристроїв за потреби.

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

export default defineConfig({
  testDir: './tests',
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Повторні спроби важливі в CI: один нестабільний мережевий виклик не повинен призводити до збою збірки. Локально залишайте кількість повторних спроб рівною нулю, щоб помічати справжню нестабільність.

Крок 4: Додавання глобального налаштування та завершення

Більшості наборів тестів потрібно, щоб щось відбулося один раз перед усіма тестами — наповнення бази даних, вхід у систему або генерація токена. Playwright пропонує два підходи, і вони не рівнозначні.

Варіант A: Залежності проєкту (рекомендовано)

Визначте проєкт налаштування та зробіть інші проєкти залежними від нього. Це інтегрується з тестовим раннером, тому трасування записуються, а фікстури працюють.

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

export default defineConfig({
  testDir: './tests',
  projects: [
    {
      name: 'setup db',
      testMatch: /global\.setup\.ts/,
      teardown: 'cleanup db',
    },
    {
      name: 'cleanup db',
      testMatch: /global\.teardown\.ts/,
    },
    {
      name: 'chromium with db',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup db'],
    },
  ],
});

Файли налаштування та завершення є звичайними тестами:

// tests/global.setup.ts
import { test as setup } from '@playwright/test';

setup('create new database', async () => {
  console.log('creating new database...');
});

Варіант B: globalSetup у конфігурації

Застарілий параметр запускає одну експортовану функцію перед усіма тестами. Він працює, але не має видимості в HTML-звіті, запису трасування та підтримки фікстур.

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

export default defineConfig({
  globalSetup: require.resolve('./global-setup'),
  globalTeardown: require.resolve('./global-teardown'),
  use: {
    baseURL: 'http://localhost:3000/',
    storageState: 'state.json',
  },
});

Поширений шаблон — автентифікація один раз і збереження сесії:

import { chromium, type FullConfig } from '@playwright/test';

async function globalSetup(config: FullConfig) {
  const { baseURL, storageState } = config.projects[0].use;
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(baseURL!);
  await page.getByLabel('User Name').fill('user');
  await page.getByLabel('Password').fill('password');
  await page.getByText('Sign in').click();
  await page.context().storageState({ path: storageState as string });
  await browser.close();
}

export default globalSetup;

Потім тести запускаються вже автентифікованими, оскільки storageState завантажується з state.json.

Якщо вам потрібні трасування з невдалого глобального налаштування, обгорніть тіло в try...catch і зупиніть трасування перед повторним викиданням помилки.

Крок 5: Оновлення Playwright і браузерів

Версії Playwright прив'язані до конкретних збірок браузерів. Оновлюйте обидва разом:

npm install -D @playwright/test@latest
npx playwright install --with-deps

Перевірте встановлену версію за допомогою npx playwright --version. У Linux --with-deps встановлює системні бібліотеки, потрібні браузерам — пропуск цього кроку є найпоширенішою причиною збоїв у CI.

Типові проблеми налаштування Playwright

Симптом Ймовірна причина Виправлення
Executable doesn't exist Відсутні бінарні файли браузера або невідповідність версій Виконайте npx playwright install
Тести проходять локально, але не проходять у CI Відсутні системні залежності Використовуйте npx playwright install --with-deps
Глобальне налаштування не відображається у звіті Використовується globalSetup замість залежностей проєкту Перейдіть на проєкт налаштування
Нестабільні тести на спільних акаунтах Стан сесії повторно використовується між паралельними воркерами Використовуйте окремі стани сховища для кожного воркера
--no-deps несподівано пропускає налаштування Ланцюжок залежностей ігнорується Видаліть --no-deps або запустіть налаштування явно

Де налаштування Playwright зустрічається з реальною автоматизацією

Playwright чудово керує браузером, але він не керує ідентичністю. Якщо вашим тестам або скраперам потрібно працювати з багатьма акаунтами — входи продавців на маркетплейсах, рекламні акаунти, соціальні профілі — кожній сесії потрібен ізольований відбиток і власний проксі. Це той рівень, який забезпечує антидетект-браузер.

AdsPower створює ізольовані профілі браузера з унікальними відбитками за параметрами Canvas, WebGL, мережі та user agent, а також підтримує налаштування проксі для кожного профілю. Команди, які працюють з багатьма акаунтами, часто поєднують його з Playwright, щоб кожен запуск автоматизації починався з чистої, узгодженої ідентичності, а не зі спільного стану браузера. Для шаблонів, специфічних для маркетплейсів, дивіться посібник з використання AdsPower з Amazon Seller Central, а для партнерських робочих процесів — посібник MaxBounty для багатьох акаунтів.

Це не заміна налаштуванню Playwright — це доповнення. Playwright відповідає за навігацію, перевірки та звітність; рівень профілю відповідає за контекст акаунта під ним.

Пов'язане читання

Джерела та додаткове читання

Часті запитання

Скільки часу займає налаштування Playwright?

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

Чи потрібно встановлювати браузери окремо?

Зазвичай ні. npm init playwright@latest завантажує їх за замовчуванням. Вам потрібно вручну виконати npx playwright install лише після оновлення Playwright або під час налаштування машини без ініціалізатора.

Яка різниця між globalSetup і залежностями проєкту?

Залежності проєкту запускаються як звичайний проєкт, тому вони з'являються в HTML-звіті, записують трасування та підтримують фікстури. globalSetup — це одна функція, яка запускається перед усім і не має цих можливостей. Документація Playwright рекомендує залежності проєкту.

Чи може Playwright працювати в headed-режимі в CI?

Так, але CI-машини зазвичай не мають сервера дисплея. Використовуйте віртуальний дисплей, наприклад Xvfb, або залишайте тести безголовими та покладайтеся на трасування й відео для налагодження.

Як запустити лише один браузер під час розробки?

Використовуйте npx playwright test --project=chromium. Це пропускає інші проєкти та значно скорочує цикли зворотного зв'язку.

Чи підтримує Playwright мобільне тестування?

Так. Playwright включає вбудовану емуляцію мобільних пристроїв для Chrome на Android і Mobile Safari, яка налаштовується через пресети пристроїв у ваших проєктах.

Висновок

Надійне налаштування Playwright — це три речі: правильне встановлення, конфігурація, що відповідає вашому CI-середовищу, та стратегія глобального налаштування, яка не конфліктує з тестовим раннером. Почніть з ініціалізатора, запустіть приклад тесту, а потім додавайте проєкти та проєкт налаштування в міру зростання вашого набору тестів. Коли вашій автоматизації потрібно працювати з багатьма акаунтами, а не з однією сесією користувача, додайте антидетект-браузер, щоб кожен запуск мав власну чисту ідентичність — і залишайте Playwright зосередженим на тому, що він робить найкраще: керуванні браузером і повідомленні про те, що зламалося.

Поділитися

Читайте також