Взгляните на новую панель «Рекордер» (функция предварительного просмотра) на видео ниже.
Пройдите это руководство, чтобы узнать, как использовать панель «Рекордер» для записи, воспроизведения и измерения пользовательских потоков.
Дополнительную информацию о том, как делиться записанными пользовательскими потоками, редактировать их и их шаги, см. в справочнике по функциям Recorder .
Откройте панель «Рекордер»
- Откройте Инструменты разработчика .
Нажмите «Дополнительные параметры».
> Дополнительные инструменты > Диктофон .
Альтернативно используйте командное меню , чтобы открыть панель «Рекордер» .
Введение
Мы будем использовать эту демонстрационную страницу заказа кофе . Оформление заказа — это обычный поток пользователей на торговых сайтах.
В следующих разделах мы расскажем вам, как записывать, воспроизводить и проверять следующий процесс оформления заказа с помощью панели «Рекордер» :
- Добавьте кофе в корзину.
- Добавьте в корзину еще один кофе.
- Перейдите на страницу корзины.
- Удалите один кофе из тележки.
- Запустите процесс оформления заказа.
- Заполните платежные реквизиты.
- Проверить.
Запишите поток пользователя
- Откройте эту демонстрационную страницу. Нажмите кнопку «Начать новую запись» , чтобы начать.
- Введите «касса кофе» в текстовом поле «Имя записи» .
Дополнительные сведения см. в разделе Общие сведения о селекторах . 1. Нажмите кнопку «Начать новую запись» . Запись начата. На панели отображается надпись «Запись...» , указывающая, что запись идет. 1. Нажмите «Капучино» , чтобы добавить его в корзину. 1. Нажмите «Американо» , чтобы добавить его в корзину. Обратите внимание, что рекордер показывает шаги, которые вы выполнили на данный момент.
1. Перейдите на страницу корзины и удалите Американо из корзины.
Однако вам придется добавить шаг наведения вручную после завершения записи, поскольку средство записи не фиксирует события наведения автоматически. 1. Нажмите кнопку «Итого: $19,00» , чтобы начать процесс оформления заказа. 1. В форме платежных реквизитов заполните текстовые поля «Имя» и «Электронная почта » и отметьте « Я хочу получать обновления заказов и рекламные сообщения». флажок. 1. Нажмите кнопку «Отправить» , чтобы завершить процесс оформления заказа. 1. На панели «Рекордер» нажмите
Кнопка завершения записи , чтобы завершить запись.
Воспроизведение пользовательского потока
После записи пользовательского потока вы можете воспроизвести его, нажав на значок Кнопка повтора .
Вы можете увидеть повтор потока пользователя на странице. Ход воспроизведения также отображается на панели «Рекордер» .
Если вы допустили ошибку во время записи или что-то не работает, вы можете отладить свой пользовательский поток : замедлить его воспроизведение, установить точку останова и выполнить его шаг за шагом.
Имитировать медленную сеть
Вы можете имитировать медленное сетевое соединение, настроив параметры воспроизведения . Например, разверните «Настройки воспроизведения» и выберите «Медленный 3G» в раскрывающемся списке «Сеть» .
В будущем могут поддерживаться дополнительные настройки. Поделитесь с нами настройками повтора, которые вы хотели бы иметь!
Измерьте поток пользователей
Вы можете измерить производительность пользовательского потока, нажав кнопку «Измерить производительность» . Например, оформление заказа — это критически важный пользовательский поток на веб-сайте покупок. С помощью панели «Рекордер» вы можете один раз записать процесс оформления заказа и регулярно измерять его.
Нажатие кнопки «Измерить производительность» сначала запускает воспроизведение пользовательского потока, а затем открывает трассировку производительности на панели «Производительность» .
Узнайте, как анализировать производительность вашей страницы во время выполнения с помощью панели «Производительность» . Вы можете установить флажок Web Vitals на панели «Производительность» , чтобы просмотреть показатели Web Vitals и определить возможности улучшения пользовательского опыта просмотра.
Редактировать шаги
Давайте рассмотрим основные параметры редактирования шагов записанного рабочего процесса.
Полный список параметров редактирования см. в разделе «Шаги редактирования в справочнике по функциям».
Развернуть шаги
Разверните каждый шаг, чтобы увидеть детали действия. Например, разверните шаг «Нажмите элемент «Капучино» .
На шаге выше показаны два селектора . Дополнительные сведения см. в разделе Общие сведения о селекторе записи .
При воспроизведении пользовательского потока Recorder пытается запросить элемент с помощью одного из селекторов по порядку. Например, если средство записи успешно запросит элемент с помощью первого селектора, оно пропустит второй селектор и перейдет к следующему шагу.
Добавление и удаление селекторов из шага
Вы можете добавлять или удалять любые селекторы. Например, вы можете удалить селектор №2 , потому что в этом случае достаточно только aria/Cappuccino
. Наведите курсор на селектор №2 и нажмите -
, чтобы удалить его.
Редактировать селекторы за один шаг
Селектор также доступен для редактирования. Например, если вы хотите выбрать «Мокка» вместо «Капучино» , вы можете:
Вместо этого измените значение селектора на aria/Mocha .
Либо нажмите кнопку «Выбрать» .
кнопку, а затем нажмите Мокко на странице.
Воспроизведите поток сейчас, он должен выбрать Mocha вместо Cappuccino .
Попробуйте отредактировать другие свойства шага, такие как тип , цель , значение и т. д.
Добавляйте и удаляйте шаги
Также есть варианты добавления и удаления шагов. Это полезно, если вы хотите добавить дополнительный шаг или удалить случайно добавленный шаг. Вместо того, чтобы перезаписывать пользовательский поток, вы можете просто отредактировать его:
Щелкните правой кнопкой мыши шаг, который хотите изменить, или щелкните значок
трехточечный значок рядом с ним.
Вы можете выбрать Удалить шаг , чтобы удалить его. Например, событие Scroll после шага Mocha не является обязательным.
Допустим, вы хотите подождать, пока на странице не отобразятся 9 чашек кофе, прежде чем выполнять какие-либо действия. В меню шагов Mocha выберите «Добавить шаг перед ».
В Assert Element отредактируйте новый шаг, указав следующие сведения:
- тип: ожиданиеForElement
- селектор №1: .cup
- оператор: == (нажмите кнопку «Добавить оператор »)
- количество: 9 (нажмите кнопку «Добавить количество »)
Воспроизведите процесс сейчас, чтобы увидеть изменения.
Следующие шаги
Поздравляем, вы завершили урок!
Чтобы изучить дополнительные функции и рабочие процессы (например, импорт и экспорт), связанные с устройством записи , см. Справочник по функциям устройства записи .