Автор: Филип Рик (Filip Hric)
Оригинал статьи
Перевод: Ольга Алифанова

Несколько дней назад я изучал инструмент Replay и имел возможность взглянуть как на ряд новых возможностей, так и на инструмент в целом. Меня он очень впечатлил и как тестировщика, и как разработчика.

Я думаю, у Replay есть потенциал стать неотъемлемой частью процесса разработки, так как он наводит мостик между разработчиками, тестировщиками и всеми, кто работает над продуктом.

Если разработчик когда-либо возвращал вам баг-репорт с комментарием «не воспроизводится», или вы дебажили противную проблему с пачкой console.log(), то знаете, как сложен может быть дебаг. Цель Replay – чтобы этот процесс стал проще и (хотите верьте, хотите нет) радостнее.

Что такое Replay?

Если кратко, Replay.io – это инструмент, записывающий все, что делает ваше приложение, и дающий вам суперспособности дебага. Запись – это комбинация видео, исходного кода, снимков состояния DOM и инструментов разработчика, способных путешествовать во времени; все это позволяет вам ретроактивно добавлять операторы печати к работе приложения. Лучший способ показать его возможности – это увидеть его в действии. Replay.io можно использовать разными способами – начнем с наиболее простого.

Создание записи

Для создания записи скачайте браузер Replay.io, откройте его и нажмите на запись. После этого можно взаимодействовать с приложением, как в обычном браузере. К примеру, можно воспроизвести баг, на который вы наткнулись.

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

Путешествие во времени с DevTools

Запись может сделать кто угодно, и это снимает большой груз с плеч разработчиков. Однако создание записи – всего лишь начало пути. Replay.io дает вам набор инструментов, очень похожих на инструменты разработчика Chrome или Firefox.

Однако теперь они прикреплены к вашей записи. Вы можете ретроактивно изучать элементы, просматривать вызовы API на вкладке сети, читать логи консоли, и так далее.

Изучение кода приложения

На первый взгляд все очень похоже на trace-viewer Playwright или временную шкалу Cypress. Оба они позволяют по-своему путешествовать во времени. Но Replay.io делает куда более мощные штуки.

Помимо снимков состояния и сетевой деятельности можно получить доступ к полному исходному коду вашего приложения. К примеру, я могу провести дальнейшее исследование компонента приложения, ответственного за создание задачи.

В режиме просмотра кода я могу кликнуть на кнопку «+» для добавления оператора печати. Теперь он будет показывать имя компонента в консоли, предоставляя информацию о количестве вызовов функции в ходе записанного взаимодействия.

Но этот оператор печати еще мощнее, чем кажется. Мы можем передать в него переменную из нашего приложения. Таким образом переданная через приложение информация становится для нас видимой. Заметьте, что теперь в консоли видно «Hello world ????» и «new todo» – после того, как мы использовали переменную newTodo внутри оператора печати.

Это позволяет следить за информационным потоком и эффективнее дебажить. Мы не только видим, что что-то произошло, но и можем разобраться, почему оно произошло.

Если вы используете React с менеджером состояний вроде Jotai или Redux, то Replay.io позволяет взглянуть на состояние каждого компонента. Панель React в инструментах разработчика Replay.io позволяет прослеживать состояние компонента по всей временной шкале.

Дебаг ваших тестов

Записанная информация очень полезна, но все еще круче. Как я уже упоминал, Replay.io – это по сути браузер. Вместо ручного воспроизведения бага вы можете использовать ваш тест-прогон для создания записей для вас. Это интегрируется как в Cypress, так и в Playwright.

Настройка довольно проста. В Replay есть плагин Cypress, работающий аналогично любому другому плагину. Вы устанавливаете его как пакет и включаете в файлы support/e2e.ts file и cypress.config.ts.

1  npm i @replayio/cypress
support/e2e.ts
1  require('@replayio/cypress/support');
cypress.config.ts
1  import { defineConfig } from "cypress";
2  import replay from "@replayio/cypress";
3
4  export default defineConfig({
5    e2e: {
6      setupNodeEvents(on, config) {
7        replay(on, config);
8        return config
9      },
10    },
11  });

После этого Replay.io нужно настроить в вашей CI. Я пользуюсь GitHub Actions, но настроить это можно практически в любом провайдере CI.

1  name: Replay test
2  on: [push]
3  jobs:
4    cypress-run:
5      runs-on: ubuntu-latest
6      steps:
7        - name: Checkout
8          uses: actions/checkout@v2
9        - name: Cypress run
10          uses: cypress-io/github-action@v5
11          with:
12            browser: replay-chromium
13            start: npm run dev
14        - name: Upload replays
15          if: always()
16          uses: replayio/action-upload@v0.5.0
17          with:
18            api-key: ${{ secrets.RECORD_REPLAY_API_KEY }}

Ключ API можно получить прямо из браузера Replay и добавить его в качестве секретного в ваш GitHub-проект. Если вы не знаете, как настраивать GitHub Actions, посмотрите мою статью на эту тему.

После настройки можно запустить тест, и вы получите то же самое, что и раньше. Но в дополнение к этому Replay.io также запишет ваш прогон. Эти записи доступны прямо из браузера Replay.io. Через них можно пробежаться так же, как через временную шкалу Cypress в открытом режиме.

Однако помните – Replay записывает все, и вы можете изучать не только свой тест, но и свое приложение. Если тест по любой причине стал нестабильным, вам больше не нужно воспроизводить эту нестабильность локально – воспользуйтесь Replay.io, чтобы разобраться, что происходит и в вашем тесте, и в вашем приложении.

В завершение скажу, что Replay.io может быть полезным компаньоном для записи багов и передачи этой информации разработчиком. Он помогает провести дебаг приложения, добавляя операторы печати к прошлым или будущим событиям, а также поможет с дебагом тестов, предоставляя всю информацию прямо из прогона.

Я думаю, что этот инструмент сэкономит вам кучу времени, сделав дебаг проще, быстрее и, откровенно говоря, увлекательнее.

Обсудить в форуме