Записывайте, воспроизводите и измеряйте потоки пользователей

Jecelyn Yeen

Sofia Emelianova

Взгляните на новую панель «Рекордер» (функция предварительного просмотра) на видео ниже.

Пройдите это руководство, чтобы узнать, как использовать панель «Рекордер» для записи, воспроизведения и измерения пользовательских потоков.

Примечание. Это предварительная функция Chrome 97. Наша команда активно работает над этой функцией и ждет ваших отзывов для дальнейших улучшений.

Дополнительную информацию о том, как делиться записанными пользовательскими потоками, редактировать их и их шаги, см. в справочнике по функциям Recorder .

Примечание. Эта функция доступна только в Chrome, но не в Chromium.

Откройте панель «Рекордер»

1. Откройте Инструменты разработчика .

2. Нажмите «Дополнительные параметры». > Дополнительные инструменты > Диктофон .

   

   Альтернативно используйте командное меню , чтобы открыть панель «Рекордер» .

   

Введение

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

В следующих разделах мы расскажем вам, как записывать, воспроизводить и проверять следующий процесс оформления заказа с помощью панели «Рекордер» :

1. Добавьте кофе в корзину.
2. Добавьте в корзину еще один кофе.
3. Перейдите на страницу корзины.
4. Удалите один кофе из тележки.
5. Запустите процесс оформления заказа.
6. Заполните платежные реквизиты.
7. Проверить.

Запишите поток пользователя

1. Откройте эту демонстрационную страницу. Нажмите кнопку «Начать новую запись» , чтобы начать.
2. Введите «касса кофе» в текстовом поле «Имя записи» .
   Примечание. Текстовое поле атрибута селектора и флажки типов селектора для записи являются необязательными. В этом уроке оставьте значения по умолчанию такими, какие они есть.

Дополнительные сведения см. в разделе Общие сведения о селекторах . 1. Нажмите кнопку «Начать новую запись» . Запись начата. На панели отображается надпись «Запись...» , указывающая, что запись идет. 1. Нажмите «Капучино» , чтобы добавить его в корзину. 1. Нажмите «Американо» , чтобы добавить его в корзину. Обратите внимание, что рекордер показывает шаги, которые вы выполнили на данный момент. 1. Перейдите на страницу корзины и удалите Американо из корзины.

Примечание. При желании вы можете удалить «Американо» на странице меню, наведя указатель мыши на кнопку «Всего» и щелкнув «-» рядом с «Американо» во всплывающем меню.

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

1. Нажмите кнопку «Итого: $19,00» , чтобы начать процесс оформления заказа. 1. В форме платежных реквизитов заполните текстовые поля «Имя» и «Электронная почта » и отметьте « Я хочу получать обновления заказов и рекламные сообщения». флажок. 1. Нажмите кнопку «Отправить» , чтобы завершить процесс оформления заказа.

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

1. На панели «Рекордер» нажмите Кнопка завершения записи , чтобы завершить запись.

Воспроизведение пользовательского потока

После записи пользовательского потока вы можете воспроизвести его, нажав на значок Кнопка повтора .

Вы можете увидеть повтор потока пользователя на странице. Ход воспроизведения также отображается на панели «Рекордер» .

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

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

Имитировать медленную сеть

Вы можете имитировать медленное сетевое соединение, настроив параметры воспроизведения . Например, разверните «Настройки воспроизведения» и выберите «Медленный 3G» в раскрывающемся списке «Сеть» .

В будущем могут поддерживаться дополнительные настройки. Поделитесь с нами настройками повтора, которые вы хотели бы иметь!

Измерьте поток пользователей

Вы можете измерить производительность пользовательского потока, нажав кнопку «Измерить производительность» . Например, оформление заказа — это критически важный пользовательский поток на веб-сайте покупок. С помощью панели «Рекордер» вы можете один раз записать процесс оформления заказа и регулярно измерять его.

Нажатие кнопки «Измерить производительность» сначала запускает воспроизведение пользовательского потока, а затем открывает трассировку производительности на панели «Производительность» .

Узнайте, как анализировать производительность вашей страницы во время выполнения с помощью панели «Производительность» . Вы можете установить флажок Web Vitals на панели «Производительность» , чтобы просмотреть показатели Web Vitals и определить возможности улучшения пользовательского опыта просмотра.

Редактировать шаги

Давайте рассмотрим основные параметры редактирования шагов записанного рабочего процесса.

Полный список параметров редактирования см. в разделе «Шаги редактирования в справочнике по функциям».

Развернуть шаги

Разверните каждый шаг, чтобы увидеть детали действия. Например, разверните шаг «Нажмите элемент «Капучино» .

На шаге выше показаны два селектора . Дополнительные сведения см. в разделе Общие сведения о селекторе записи .

При воспроизведении пользовательского потока Recorder пытается запросить элемент с помощью одного из селекторов по порядку. Например, если средство записи успешно запросит элемент с помощью первого селектора, оно пропустит второй селектор и перейдет к следующему шагу.

Добавление и удаление селекторов из шага

Вы можете добавлять или удалять любые селекторы. Например, вы можете удалить селектор №2 , потому что в этом случае достаточно только aria/Cappuccino . Наведите курсор на селектор №2 и нажмите - , чтобы удалить его.

Редактировать селекторы за один шаг

Селектор также доступен для редактирования. Например, если вы хотите выбрать «Мокка» вместо «Капучино» , вы можете:

1. Вместо этого измените значение селектора на aria/Mocha .

   

   Либо нажмите кнопку «Выбрать» . кнопку, а затем нажмите Мокко на странице.

2. Воспроизведите поток сейчас, он должен выбрать Mocha вместо Cappuccino .

3. Попробуйте отредактировать другие свойства шага, такие как тип , цель , значение и т. д.

Добавляйте и удаляйте шаги

Также есть варианты добавления и удаления шагов. Это полезно, если вы хотите добавить дополнительный шаг или удалить случайно добавленный шаг. Вместо того, чтобы перезаписывать пользовательский поток, вы можете просто отредактировать его:

1. Щелкните правой кнопкой мыши шаг, который хотите изменить, или щелкните значок трехточечный значок рядом с ним.

   

2. Вы можете выбрать Удалить шаг , чтобы удалить его. Например, событие Scroll после шага Mocha не является обязательным.

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

4. В Assert Element отредактируйте новый шаг, указав следующие сведения:

   • тип: ожиданиеForElement
   • селектор №1: .cup
   • оператор: == (нажмите кнопку «Добавить оператор »)
   • количество: 9 (нажмите кнопку «Добавить количество »)

5. Воспроизведите процесс сейчас, чтобы увидеть изменения.

Следующие шаги

Поздравляем, вы завершили урок!

Чтобы изучить дополнительные функции и рабочие процессы (например, импорт и экспорт), связанные с устройством записи , см. Справочник по функциям устройства записи .