Автор оригинала: 0 minutes QA story
Добро пожаловать!
В сегодняшней статье я расскажу о одном из моих любимых паттернов для тестирования пользовательского интерфейса. Я не буду вдаваться в подробности о том, что это такое и почему его следует использовать. Моя цель сегодня — продемонстрировать реализацию этого паттерна при работе с Playwright и Javascript/Typescript. Если после прочтения и анализа примеров реализации у вас все еще останутся вопросы, я рекомендую подробнее почитать об этом паттерне.
Итак, начнем 🙂
Данная статья это перевод с английского с некоторыми адаптациями. Перевод сделан INZHENERKA.TECH совместно с автором тренажера по “Автоматизация тестирования на Playwright” Дмитрием Ереминым
Сначала на Java
Мне очень нравится, когда при написании автоматических тестов мне не нужно помнить, на каком этапе сценария я нахожусь и какая страница открыта в данный момент. Кажется, что это мелочь, но на самом деле это усложняет разработку из-за так называемого информационного шума. Прежде всего, когда я занят написанием теста, я хочу сосредоточиться на логике теста, а не держать в голове кучу служебной информации.
Эту проблему легко решить в языках программирования с типизацией (таких как Java, C#). Я покажу вам пример, и вы сразу поймете, что речь идет о паттерне Fluent API
Помимо того, что код выглядит очень читаемым, есть еще один побочный эффект: мне не нужно думать о том, где я нахожусь в приложении после выполнения определенного действия, вся логика переходов (по сути, граф нашего приложения) описана внутри объектов страниц (Page Objects). Каждый метод объекта страницы возвращает тип страницы, который ожидается после выполнения действия.
Однако есть проблема…
В отличие от синхронного кода в вышеупомянутых языках, Javascript или Typescript по своей природе не являются синхронными, что означает, что такой код не может быть написан, потому что все методы взаимодействия со страницей будут возвращать Promise<T>. Позвольте мне показать вам это на примере метода open() какой-то страницы (это будет полезно тем, кто не очень знаком с Promise или только начинает понимать основы Javascript):
И теперь я не могу использовать паттерн Fluent API из-за асинхронности Javascript:
Какие у нас есть варианты реализации?
Самый простой
Наиболее очевидный способ — ждать завершения действия и возвращения следующего объекта страницы шаг за шагом:
Честно говоря, это выглядит не очень хорошо 😕. Нужно отметить, что такой код также не решает проблему контекста. Мне все равно приходится помнить, на какой странице я нахожусь в данный момент.
Следующий шаг — использование then()
Класс Promise позволяет нам использовать метод then() и возвращаемое значение для построения цепочек вызовов. Давайте немного изменим наш код и посмотрим, что у нас получится:
Теперь лучше, не нужно запоминать текущую страницу. В принципе, можно использовать это, но все еще выглядит не очень красиво.
Элегантный способ
Прежде всего, хочу поблагодарить Энтони Гора — именно он познакомил меня с замечательной библиотекой, которая помогает решить проблему вызова цепочки методов.
Итак, первое, что нужно сделать, — это добавить новую зависимость в проект:
Если вы работаете с проектом на JavaScript, все в порядке, можно использовать библиотеку.
Если проект работает с TypeScript, потребуются дополнительные действия:
- Проверьте, что команда tsc -v работает. Если нет, вам нужно установить дополнительную зависимость: npm i tsc.
- Затем выполните tsc --init и посмотрите на результат. Там также будет указано, как исправить ошибки, если они возникнут. Если команда была выполнена успешно, в вашем проекте должен появиться файл tsconfig.json.
- Теперь необходимо подключить proxymise в файлы объектов страниц и обернуть класс так, чтобы его можно было использовать в тестах в формате Fluent API. Полный код проекта выглядит так:
Обратите внимание, насколько лаконичным стал наш тест. Это решение ничем не отличается от стандартного Fluent API в Java или C#.
Выводы
Этот пример является базовым для понимания того, как добиться Fluent API в тестах, написанных на Playwright и Typescript. Однако он не является окончательным, его можно улучшать, добавляя новые функции и концепции для облегчения работы разработчиков и поддержки кода. В любом случае, выполнение такого упражнения будет полезным для развития навыков программирования 🙂
Удачи с вашими проектами и не прекращайте автоматизировать!
✅ Подписывайтесь на наше сообщество в тг-канале INZHENERKA.TECH. Где вас ждет больше уроков и статей по автоматизации тестирования – подписаться
Удачи с вашими проектами и не прекращайте автоматизировать!