Добрый день, уважаемые хабровчане! Меня зовут Евгений Иванов, и вот уже год я работаю на позиции QA-lead в компании FixPrice. В прошлом году руководство поставило передо мной задачу: наладить быстрый старт автотестирования и масштабирование решений на все проекты нашего отдела.

С чего мы начали

На момент моего прихода в компанию автотесты были написаны с использованием стека технологий PHP, Codeception+Selenium. А большинство наших проектов используют фреймворки для разработки, основным языком программирования которых является PHP.

Codeception — мощный инструмент для написания unit, acceptance и API-тестов на PHP. Он объединяет несколько популярных библиотек (например, PHPUnit, Symfony BrowserKit, Selenium WebDriver) в единый фреймворк с удобным синтаксисом.

С Codeception на тот момент я уже был знаком и писал acceptance-тесты на PHP в одной из компаний, где работал QA-инженером. Но на позицию QA-lead в FixPrice я пришел уже с бэкграундом и знаниями по другим фреймворкам автотестирования, таким как Selenide, Appium, Selenium. Ну и, конечно же, с опытом использования и внедрения Playwright+TS. 

Почему Playwright+TypeScript ?

С опытом использования фреймворков Codeception, Selenide, Appium, Selenium, Playwright, и зная их отличия в настройке и работе протоколов, я понимал, что быстрым решением будет именно Playwright. Но у коллег (разработчиков и тестировщиков) были сомнения, и в этом плане я очень понимал их, так как им предлагалось использовать стек технологий, кардинально отличающийся от привычного Codeception.

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

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

Параллельно мы выделили время QA-инженера и других разработчиков на изучение и прощупывание Playwright. Поскольку они использовали, писали и разрабатывали код автотестов на Codeception, очень полезно было получить от них обратную связь.

QA-инженеры были приятно удивлены быстротой, удобством настройки и фичами Playwright. И в течение рабочей недели было принято совместное решение о внедрении нового, современного фреймворка Playwright, но пока не отказываясь полностью от автотестов коллег, разработанных на Codeception, которые, однако, постепенно тоже будут переписаны на Playwright.

О хранении кода автотестов

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

Что для нас важно:

1. Четкое разделение кода и кода автотестов в одном репозитории. Тесты находятся рядом с кодом, но в отдельной директории. Чтобы вся команда была в курсе изменений в коде проекта и в коде автотестов.

2. Изначальное ревью кода автотестов при первоначальном развертывании разработчиками, обладающими экспертизой в TS.

3. Дальнейшее встраивание кода автотестов в процессы CI/CD.

4. Быстрое масштабирование кода автотестов в репозитории других проектов.

5. Документация README.md в tests/ с правилами для команды.

6. Поддержка legacy-проектов.

Настройка и масштабирование

Способов установки Playwright несколько, в том числе:

1. Создание отдельного контейнера с установкой Playwright на него.

2. Установка непосредственно на вашу хост-машину, с IDE или без IDE.

Если вы планируете не просто запускать тесты в «безголовом» режиме браузера, но писать тесты и смотреть выполнение в UI формате, то Docker-контейнером не обойтись, и нужно установить Playwright на компьютер. Как это сделать, описано тут.

Если же вы планируете редактировать и разрабатывать сценарии автотестов, то 

вам подойдет установка с помощью IDE. Как это сделать описано тут. Для установки Playwright необходимо выполнить так же установку Node.js. 

При создании проекта - шаблона автотестов, его внедрении и масштабировании в проекты ЦК ЕРОН мы придерживались следующих специфичных для нас пунктов инструкции:

1. Для написания тестов такого типа используйте файлы .spec.ts.

2. Создавайте файлы .spec.ts в папке tests/tests относительно корневого каталога основного проекта, а настройку производите в файле playwright.config.ts.

3. Используйте test.beforeEach, чтобы создавать общие предусловия в начале .spec.ts.

4. Старайтесь минимизировать обращения к БД и API. Приемочные тесты предполагают имитацию работы пользователя, поэтому все действия должны выполняться через UI. Возможны обращения к API методам для доведения до нужных состояний систем, выступающих в качестве предусловий и постусловий.

5. Установите и настройте Allure.

6. Каждый тестовый метод должен описываться allure аннотациями Title для описания теста.

7. Используйте паттерн Page object. В идеале в тестах вообще не должны мелькать xpath и селекторы. Все они должны быть заданы константами или переменными в POM.

8. Page Object может содержать селекторы и методы для работы со страницей. Но не должен содержать ассерты.

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

10. Используйте https://playwright.dev/docs/mock для мока внешних сервисов.

Итак, стараясь придерживаться выше описанных пунктов, у нас получился следующий шаблон, для масштабирования и быстрого запуска UI-автотестов на проектах ЦК ЕРОН:

│   .env-example

│   .gitignore

│   eslint.config.mjs

│   Makefile

│   package-lock.json

│   package.json

│   playwright.config.ts

│   projects_tree.txt

│   README.MD

│   tsconfig.json

├───docker

│   │   docker-compose.playwright.yml

│   │   

│   └───playwright

│           Dockerfile

├───support

│   ├───.auth

│   │       storage.json

│   │       

│   ├───pages

│   │       LoginPage.ts

│   │       

│   └───utilities

│           EnvHelper.ts

│           

└───tests

        auth.setup.ts

        example.spec.ts

Основные директории проекта-шаблона и  конфиг-файлы, которые нас интересуют это:

docker - конфигурационные файлы для настройки и поднятия контейнера с Playwright, локально на хост-машине;

playwright.config.ts - конфигурационный файл, для настройки запуска и прогонов автотестов на Playwright;

support - директория для хранения pages(POM), utilities(helpers);

tests - директория тестовых сценариев .spec.ts. 

1. Конфигурационные файлы docker:

docker\playwright\Dockerfile:

docker\docker-compose.playwright.yml:

2. Конфигурационный файл playwright.config.ts:

3. Файл PageObject support\pages\LoginPage.ts:

4. Класс - шаблон, для описания переменных окружения, адаптируемый для каждого проекта индивидуально support\utilities\EnvHelper.ts:

5. Ну и сами файлы тестовых сценариев, в данном случае тест для проверки авторизации, он же setup файл, прописанный в настройках конфигурационного файла playwright.config.ts как зависимость tests\auth.setup.ts:

Итого.

Данный шаблон подойдет не для всех web-проектов, этот шаблон подойдет для тех проектов, где используется единый сервис авторизации Keycloak, что это такое можно узнать тут. Также хотелось бы уточнить, в файле проверки авторизации auth.setup.ts мы сохраняем файл с куками storage.json, который переиспользуется в следующих тестовых сценариях, ещё одна крутая фича от Playwright, дающая возможность забыть необходимость повторной авторизации в приложении, т.е. на страницы приложения в тестах мы приходим уже авторизованными. 

Итак, шаблон автотестов для быстрого внедрения и масштабирования на проекты с единым сервисом авторизации Keycloak готов, осталось склонировать репозиторий проекта, скопировать проект-шаблон автотестов в корень проекта в папку /tests, установить Node.js и зависимости согласно файлу  package.json и наш проект-шаблон готов адаптироваться и разрастаться в полноценный фреймворк под каждый проект разработки индивидуально.

Теперь у нас есть мощный инструмент для быстрого старта тестирования проектов с Keycloak. Playwright с его возможностью сохранения состояния авторизации — это действительно game-changer, который сэкономит наше время и избавит от рутины.

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

Пусть баги боятся ваших сценариев, а релизы проходят гладко! ?

Осталось только начать — копируйте, настраивайте, расширяйте и тестируйте с удовольствием. Удачи в автоматизации!" ??