# pnpm
pnpm dlx create-playwright

# npm
npm init playwright@latest

pnpm i -D @playwright/test
touch playwright.config.js

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

export default defineConfig({
  // Директория для тестов
  testDir: 'tests',

  // Нужно ли запускать все тесты параллельно
  fullyParallel: true,

  // Данная опция положит все тесты на CI, если хоть в одном тесте установлен test.only
  forbidOnly: !!process.env.CI,

  // Сколько будет попыток повторить тест, если он упадет
  retries: process.env.CI ? 2 : 0,

  // Настройка количества параллельных воркеров для тестов
  workers: process.env.CI ? 1 : undefined,

  // Репортер (в каком формате будет представлена информация о прошедших/не прошедших тестах)
  reporter: 'html',

    // Используемые в тестах данные
  use: {
    // BaseURL в тестах. Если перейдем на page.goto('/'), то окажемся на localhost:3000
    baseURL: 'http://127.0.0.1:3000',

    // Собирать данные при падении, даже если тест повторяется
    trace: 'on-first-retry',
  },

  // Конфигурируем браузеры для проекта
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

  // Запускаем devServer, перед тем как запустить тесты
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
  },
});

export default defineConfig({
  // Директория, в которую будут идти все отчеты, артефакты, видео, скриншоты
  outputDir: 'test-results',

  // Файл, который выполнится до начала тестов. Это так называемый бутстрап
  globalSetup: require.resolve('./global-setup'),

  // То же самое что и вверху, однако данный файл выполнится после окончания тестов
  globalTeardown: require.resolve('./global-teardown'),

  // Таймаут для тестов 💆‍♂️
  timeout: 30000,
});

export default defineConfig({
  // Паттерн или регулярное выражение, по которому будет определяться какие тесты будут игнорироваться
  testIgnore: '*test-assets',

  // Паттерн или регулярное выражение, по которому будет определяться какие тесты будут выполняться
  testMatch: '*todo-tests/*.spec.ts',
});

export default defineConfig({
  use: {
    // Эмулирует @media (prefers-colors-scheme)
    colorScheme: 'dark',

    // Геолокация
    geolocation: { longitude: 12.492507, latitude: 41.889938 },

    // Локализация
    locale: 'en-GB',

    // Разрешения
    permissions: ['geolocation'],

    // Часовой пояс
    timezoneId: 'Europe/Paris',

    // Viewport
    viewport: { width: 1280, height: 720 },
  },
});

export default defineConfig({
  use: {
      // Контроллировать разрешение на загрузку файлов
    acceptDownloads: false,

    // Добавить кастомные HTTP-заголовки к каждому реквесту
    extraHTTPHeaders: {
      'X-My-Header': 'value',
    },

    // HTTP-Auth
    httpCredentials: {
      username: 'user',
      password: 'pass',
    },

    // Игнорировать ошибки HTTPS во время навигации
    ignoreHTTPSErrors: true,

    // Оффлайн
    offline: true,

    // Прокси
    proxy: {
      server: 'http://myproxy.com:3128',
      bypass: 'localhost',
    },
  },
});

export default defineConfig({
  use: {
    // Делать скриншот, если тест упадет
    screenshot: 'only-on-failure'

    // Записывать tracelist после первой неудачной попытки
    trace: 'on-first-retry',

    // Записывать видео после первой неудачной попытки
    video: 'on-first-retry'
  },
});

  // Конфигурируем браузеры для проекта
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
  ],

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Проверяем, чтобы страница имела в заголовке Playwright
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Кликаем на ссылку
  await page.getByRole('link', { name: 'Get started' }).click();

  // Проверяем что в URL было слово intro
  await expect(page).toHaveURL(/.*intro/);
});

const page = await context.newPage();

// В аргументах к коллбэку мы забираем объект page
test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

// Находим по роли
page.getByRole('textbox');

// Находим по лэйблу
page.getByLabel('Birth date');

// Находим по тексту внутри элемента
page.getByText('Item')

// Находим по селектору
page.locator('#area')

// Находим элемент
const example = page.locator('#example');

// Кликаем по нему
await example.click();

// Активируем чекбокс
await example.check();

// Дезактивируем чекбокс
await example.uncheck();

// Наводим мышь на элемент
await example.hover();

// Заполняем форму (быстро)
await example.fill();

// Заполняем форму (медленно, эмулируя реальный ввод)
await example.type();

// Фокусируем элемент
await example.focus();

// Нажимаем клавишу
await example.press();

// Отправляем файлы (Drag n' drop)
await example.setInputFiles();

// Выбираем опции из выпадающего списка
await example.selectOption();

// Данная строка будет дожидаться покуда кнопка исчезнет
await page.locator('#button').not.isVisible();

// Видим ли элемент
await page.locator('#button').isVisible();

// Скрыт ли элемент
await page.locator('#button').isHidden();

// Активен ли элемент (нет ли disabled среди атрибутов)
await page.locator('#button').isEnabled();

// Неактивен ли элемент (есть ли disabled среди атрибутов)
await page.locator('#button').isDisabled();

// Можно ли элемент редактировать
await page.locator('#button').isEditable();

// Активен ли чекбокс
await page.locator('#button').isChecked();

expect(await page.locator('#button').isVisible()).toBe(true);

test.beforeEach(async ({page}) => {
    await page.goto('/');
  // или
  await page.reload();
});

<template>
    <UniqueElement
      :data-test="UNIQUE_SELECTOR"
      class="unique-element"
    />
</template>

await page.locator(`[data-test="`${UNIQUE_SELECTOR}`"]`).click();