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

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

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

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

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

  1. Откройте Инструменты разработчика .
  2. Нажмите « Дополнительные параметры». Более. > Дополнительные инструменты > Диктофон .

    Рекордер в меню.

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

    Команда «Показать рекордер» в меню «Команды».

Введение

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

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

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

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

  1. Откройте эту демонстрационную страницу. Нажмите кнопку «Начать новую запись», чтобы начать.
  2. Введите «касса кофе» в текстовом поле «Имя записи» . Начать новую запись.
  3. Нажмите кнопку «Начать новую запись» . Запись начата. На панели отображается надпись «Запись...», указывающая, что запись идет. запись идет.
  4. Нажмите на капучино , чтобы добавить его в корзину.
  5. Нажмите на Американо , чтобы добавить его в корзину. Обратите внимание, что рекордер показывает шаги, которые вы выполнили на данный момент. Действия на панели «Рекордер».
  6. Перейдите на страницу корзины и удалите Американо из корзины.
  7. Нажмите кнопку «Итого: $19,00», чтобы начать процесс оформления заказа.
  8. В форме платежных реквизитов заполните текстовые поля «Имя» и «Электронная почта» и установите флажок « Я хочу получать обновления заказов и рекламные сообщения». флажок. Форма платежных реквизитов.
  9. Нажмите кнопку «Отправить» , чтобы завершить процесс оформления заказа.
  10. На панели «Рекордер» нажмите Завершить запись. Кнопка завершения записи , чтобы завершить запись.

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

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

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

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

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

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

Настройки повтора.

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

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

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

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

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

Панель производительности.

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

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

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

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

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

На панели рекордера элемент «Капучино» был расширен и теперь отображает тип, цель, селекторы, смещение X и смещение Y.

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

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

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

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

На панели средства записи DevTools отображается возможность удалить селектор.

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

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

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

    Отредактируйте селектор.

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

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

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

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

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

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

    Раскрывающееся меню шага с опциями удаления и добавления шагов до или после.

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

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

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

    • тип: ожиданиеForElement
    • селектор №1: .cup
    • оператор: == (нажмите кнопку «Добавить оператор» )
    • количество: 9 (нажмите кнопку «Добавить количество» ) Новый этап оформления заказа кофе был обновлен с учетом вышеупомянутых деталей.
  5. Повтор. Воспроизведите процесс сейчас, чтобы увидеть изменения.

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

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

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