Playwright + VS Code: Установка и первый автотест за 15 минут

Playwright — мощный инструмент автоматизации web-приложений. Фреймворк уже достаточно известный и популярный. И если вы хотите его попробовать, то вот инструкция по установке с помощью Visual Studio Code (VS code).

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

*Инструкция для Windows. Надеюсь, проблем при установке ни у кого не возникнет.

Основные шаги по установке

Установка VS Code

1. Перейдите на оф. сайт https://code.visualstudio.com/ и скачайте последнюю версию. На главной странице должна отображаться кнопка Download for Windows.
2. Дальше стандартная установка по инструкции: Next > Next > Install.

Установка Node.js. Шаги аналогичные

1. Также перейдите на оф. сайт https://nodejs.org/en/download и скачайте последнюю версию Node.js. Я использовал Windows Installer (.msi).
2. Такая же стандартная установка: Next > Next > Install.

Создание проекта

1. Создайте пустую папку на ПК, где будет храниться проект для автоматизации.
   У меня для этого есть отдельная директория, так удобнее хранить все проекты в одном месте. Но её можно создать даже на рабочем столе, разницы никакой. Мой путь к папке —  C:\Users\Pavel\Projects\TestProject.
2. Запустите VS Code и там выберите созданную папку.

Установка Playwright

1. Перейдите в раздел управления расширениями Extensions.
2. Введите Playwright в поисковой строке.
3. Нужно скачать тот, что верифицирован Microsoft (у него больше всего установок). 

Но установка еще не закончена, дальше:

• Вызовите Command Palette. Можно через основное меню: View > Command Palette или комбинацией клавиш Ctrl+Shift+P.
• Введите Test: Install Playwright в появившейся строке.
• Выберите необходимые браузеры для установки.
• Я оставляю только Chromium, его вполне достаточно. Кликаем Ok и ждем окончательной установки Playwright (должен появиться терминал и начаться установка пакетов).

Создание тестов

1. В основном окне Explorer добавьте новый файл в модуле tests (правая кнопка мыши, новый файл).
   *Важно, чтобы название файла оканчивалось на spec.ts или .test.ts (расширение может быть и .js): так Playwright определяет тесты по дефолту. В примере добавил файл login.spec.ts.

1. Вставьте следующий код в созданный файл login.spec.ts. 
   Это пример логина на платформе, который ± подходит под любой сайт: нужно только изменить URL, locators и данные для входа. Использую тестовую платформу https://demowebshop.tricentis.com/. 

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

test('log in with your credentials', async ({ page }) => {
  // Some test credentials. You can change them
  let loginEmail = 'testplaywright@email.com';
  let loginPassword = '123456';

  // Open page by URL
  await page.goto('https://demowebshop.tricentis.com/');

  // Click header login button
  await page.getByRole('link', { name: 'Log in' }).click();

  // Fill email field, you can change email to yours
  await page.locator('#Email').fill(loginEmail);

  // Fill password field
  await page.locator('#Password').fill(loginPassword);

  // Click submit button
  await page.locator('.login-button').click();

  // Expect header contains user email.
  await expect(page.locator('.header .account')).toContainText(loginEmail);
});
		

Осталось совсем немного. Только запустить созданный тест:

1. Перейдите в раздел Testing.
2. Выберите созданный файл и запустите тесты кликом Run test.

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

			test('log in with invalid password', async ({ page }) => {
  // Arrange (invalid password)
  let loginEmail = 'testplaywright@email.com';
  let loginPassword = '1234567';


  // Act
  await page.goto('https://demowebshop.tricentis.com/');
  await page.getByRole('link', { name: 'Log in' }).click();
  await page.locator('#Email').fill(loginEmail);
  await page.locator('#Password').fill(loginPassword);
  await page.locator('.login-button').click();


  // Assert
  await expect(page.locator('.validation-summary-errors')).toContainText('The credentials provided are incorrect');
});
		

Вот и всё! Теперь у вас есть базовая автоматизация с Playwright! Дальше можно дописывать другие тесты. Например, посмотреть работу системы с незарегистрированным email, вынести credentials в конфигурационный файл и т.д. И, конечно, углубляться, разбираться во всем, чтобы стать уверенным автоматизатором. Можно продолжить изучение статей на оф.сайте Playwright. Главное, соблюдайте best-practices при работе с ним.