Мы считаем, что визуальные тесты - это тесты с наименьшими усилиями и максимальной ценностью, которые вы можете написать. Дать вашей команде полную уверенность в пользовательском интерфейсе, который ваши пользователи видят и с которым взаимодействуют каждый день, бесценно - и помощь большему количеству команд раскрыть эту ценность - большая часть нашей миссии в Percy.
Чтобы сделать визуальное тестирование более доступным, в этом году мы представили наш бесплатный план (и более дешевые планы). Мы также много вложили в создание новых SDK для поддержки большего количества фреймворков веб-приложений, фреймворков сквозного тестирования, библиотек компонентов и статических сайтов.
Но нам нужен был способ, чтобы люди могли приступить к визуальному тестированию за минуты, не прибегая к надстройке над существующим набором тестов или фреймворком. Нам нужен был способ протестировать все, что работает в браузере.
Наш новейший SDK PercyScript делает именно это, облегчая, как никогда, начало работы с визуальным тестированием.
Как это работает
С PercyScript вы можете добавить визуальное тестирование ко всему, что работает в браузере, включая живые URL-адреса. Вы можете приступить к работе с PercyScript всего за несколько минут и с помощью всего нескольких строк JavaScript.
Вот полностью рабочий PercyScript:
Этот сценарий открывает браузер, посещает локальное приложение, делает снимок и отправляет его Перси для визуального тестирования.
PercyScript может быть настолько простым или продвинутым, насколько вы его сделаете. Он использует Google Puppeteer внизу, что означает, что PercyScript может полностью взаимодействовать с элементами, щелкая, печатая, ожидая и т. Д.
В оставшейся части этого поста мы покажем вам, как установить и настроить PercyScript с помощью примера приложения TodoMVC, но вы также можете добавить PercyScript в свое собственное приложение. Затем мы внесем некоторые визуальные изменения и проведем нашу первую визуальную проверку.
Шаг 1. Установите и настройте PercyScript
Примечание. Для этого руководства необходимы Node.js и git
Во-первых, давайте настроим наш пример приложения:
$ git clone https://github.com/percy/example-todomvc.git $ cd example-todomvc/ $ npm install $ npm run start
Теперь вы можете посетить http: // localhost: 8000 и самостоятельно поиграть с приложением todos.
Затем мы установим PercyScript и напишем наши первые визуальные тесты для этого приложения.
Не отключайте сервер и откройте новый терминал для запуска:
$ npm install -D @percy/script
Это добавит @percy/script в ваш package.json файл.
Затем создайте файл с именем snapshots.js и добавьте свой первый PercyScript:
Вот и все! 🎉
Следующий шаг - запустить этот PercyScript и увидеть визуальные изменения.
Шаг 2. Запустите визуальные тесты
Если вы еще этого не сделали, зарегистрируйтесь в учетной записи Percy, назовите свою организацию и создайте свой первый проект.
Примечание. После регистрации учетной записи Percy начнется 14-дневный пробный период, но по истечении этого срока вы будете переведены на наш бесплатный план, который включает 5000 бесплатных снимков каждый месяц.
Percy предназначен для работы вместе с вашими сборками CI, но в этом руководстве мы собираемся запускать PercyScript локально. Скопируйте переменную среды PERCY_TOKEN из экрана нового проекта или настроек проекта, затем запустите:
$ export PERCY_TOKEN=aaabbbcccdddeee $ npx percy exec —- node snapshots.js # Or if you're using Windows: $ set PERCY_TOKEN=aaabbbcccdddeee $ npx percy exec —- node snapshots.js
Примечание. Замените токен на PERCY_TOKEN, относящийся к вашему проекту.
Вы должны увидеть такой вывод:
$ npx percy exec —- node snapshots.js [percy] created build #1: https://percy.io/test/example-todomvc/builds/1738842 [percy] percy has started. [percy] snapshot taken: ‘TodoMVC home page’ [percy] snapshot taken: ‘TodoMVC with a new todo’ [percy] stopping percy… [percy] waiting for 2 snapshots to complete… [percy] done. [percy] finalized build #1: https://percy.io/test/example-todomvc/builds/1738842
Что происходит за кадром? Percy работает, делая снимок DOM везде, где вызывается команда Percy snapshot. Затем мы воссоздаем страницу или компонент в нашей пользовательской среде рендеринга. Новые снимки сравниваются с базовыми снимками, чтобы определить, какие пиксели изменились.
Вы увидите, что поскольку это первая сборка, сравнивать ее не с чем. Он также был «автоматически одобрен», потому что фиксация была сделана на мастере, и мы предполагаем, что мастер-сборки готовы к производству.
Теперь, когда вы интегрированы и продвинули свою первую сборку, определяющую базовый уровень, давайте внесем изменения и просмотрим результат в Перси!
Шаг 3. Внесите и просмотрите визуальные изменения
Давайте создадим новую функциональную ветку и внесем визуальные изменения.
В текстовом редакторе отредактируйте index.html и сделайте текст h1 в строке 11 фиолетовым:
<h1 style="color:#9e66bf;">
Теперь снова запустите снимки:
$ npx percy exec —- node snapshots.js
Вернитесь к Перси или щелкните ссылку сборки Перси, чтобы увидеть визуальные изменения.
Вы сделали свой первый визуальный обзор!
Вы можете использовать PercyScript таким же образом с чем угодно в сети. Мы рады добавить этот новый SDK в Percy и упростить начало работы с визуальным тестированием.
Готовы интегрировать Перси в свой рабочий процесс?
- Ознакомьтесь с документацией по PercyScript и учебником
- Узнайте больше о рабочем процессе визуального обзора Перси с CI
- Читайте о добавлении интеграции исходного кода
Percy - это универсальное решение для визуального тестирования, которое вселяет в вашу команду уверенность в каждом визуальном изменении перед его отправкой. Узнайте больше на https://percy.io. 🕵️♀️
