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

  • Статья

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

Когда следует использовать средство записи

Используйте средство "Запись" , если вы хотите ускорить повторяющиеся задачи, автоматически повторяя ряд взаимодействий с пользователем в браузере.

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

В оставшейся части этой статьи мы будем использовать средство записи для автоматизации добавления задач в демонстрационном приложении TODO.

Открытие средства записи

  1. Откройте приложение TODO на новой вкладке или окне.

  2. Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.

  3. В DevTools на панели действий выберите вкладку Средство записи . Если эта вкладка не отображается, нажмите кнопку Другие инструменты (значок ") и выберите Пункт Запись. Откроется средство "Запись ":

    Демонстрационная версия приложения TODO и средство записи в средствах разработки рядом с ним

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

Чтобы начать запись нового потока пользователя, выполните приведенные далее действия.

  1. Щелкните Создать новую запись.

  2. В разделе Имя записи введите имя записи, например "Добавление задач TODO".

  3. Нажмите кнопку Начать запись в нижней части средства записи :

    Имя записи и кнопка запуска записи

  4. На отображаемой веб-странице взаимодействуйте со страницей. Например, введите "задача 1" в поле Добавление входных данных задачи и нажмите клавишу ВВОД. Повторите эти шаги несколько раз.

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

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

  5. Чтобы остановить запись, в нижней части списка записанных взаимодействий нажмите кнопку Завершить запись .

    Запись останавливается, а круг рядом с именем записи становится синим, указывая, что запись завершена:

    Завершенная запись и кнопка воспроизведения

Запись других потоков пользователей

Чтобы записать новый поток пользователя, после остановки записи предыдущего потока пользователя:

  1. Нажмите кнопку Создать новую запись (кнопка Создать новую запись) в левом верхнем углу средства Записи :

    Кнопка

  2. Повторите шаги из раздела Запись потока пользователя выше.

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

Вы можете воспроизвести потоки пользователей из списка записанных потоков пользователей или при просмотре сведений о конкретном потоке пользователя.

  • Чтобы просмотреть список записанных потоков пользователей, щелкните раскрывающееся меню на панели инструментов Средства записи в верхней части окна, а затем выберите 2 записи. Метка может отображать разное количество записей в зависимости от количества сделанных записей.

  • Чтобы просмотреть сведения о заданном пользовательском потоке, щелкните раскрывающийся список, который находится на панели инструментов Средства записи вверху, а затем щелкните имя потока пользователя.

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

  1. Нажмите кнопку Воспроизвести запись рядом с записью:

    Список записей с кнопкой

  2. Подождите, пока средство записи воспроизводит ранее записанные взаимодействия с пользователем. Анимация воспроизводимых шагов отображается в средстве "Запись ":

    Воспроизводимые взаимодействия, отображаемые в виде анимации в средстве

    После завершения воспроизведения анимация останавливается, а средство "Запись" отображает шаги записи.

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

  1. Нажмите кнопку Воспроизвести в правом верхнем углу средства записи :

    Кнопка Воспроизведения на странице сведений о записанном потоке пользователя

  2. Подождите, пока средство записи воспроизводит ранее записанные взаимодействия с пользователем. Анимация воспроизводимых шагов отображается в средстве "Запись ":

    Воспроизводимые взаимодействия, отображаемые в виде анимации в средстве

    После завершения воспроизведения анимация останавливается, а средство "Запись" отображает шаги записи.

Медленное воспроизведение потока пользователя для изучения проблем

Чтобы увидеть, что происходит на отрисовываемой странице во время воспроизведения взаимодействия с пользователем, замедлите скорость воспроизведения. По умолчанию средство записи воспроизводит потоки пользователей так быстро, как это возможно.

Чтобы снизить скорость воспроизведения, выполните следующие действия.

  • Щелкните стрелку раскрывающегося списка рядом с элементом Воспроизведение в правом верхнем углу средства записи , а затем выберите скорость в раскрывающемся меню, например Медленный, Очень медленный или Чрезвычайно медленный:

    Кнопка

Приостановка при воспроизведении пользовательского потока с помощью точек останова

Чтобы проверить отрисованную веб-страницу в определенной точке потока пользователя, приостановите воспроизведение с помощью точки останова.

Чтобы добавить точку останова в поток пользователя, выполните приведенные далее действия.

  1. Рядом с этапом потока, на котором необходимо приостановить, нажмите кнопку Открыть действия шага (значок Открыть действия шага) и выберите Добавить точку останова:

    Кнопка

  2. Чтобы запустить поток пользователя, щелкните Воспроизвести в правом верхнем углу средства записи .

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

    Приостановленное воспроизведение на шаге с точкой останова

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

Измерение производительности

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

  1. Чтобы записать новый поток пользователя, выполните действия, описанные в разделе Запись потока пользователя.

  2. Чтобы воспроизвести пользовательский поток при измерении производительности, щелкните панель Производительность в правом верхнем углу средства записи :

    Кнопка панели

  3. Подождите, пока средство записи воспроизводит ранее записанные взаимодействия с пользователем.

    Откроется средство "Производительность ", в котором отображается запись производительности веб-сайта во время воспроизведения взаимодействия с пользователем:

    Инструмент

Изменение шагов пользовательского потока

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

Добавление нового шага

Чтобы добавить новый шаг в существующий поток пользователя, выполните приведенные далее действия.

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

    Значок

  2. Следуйте инструкциям в разделе Изменение шага ниже, чтобы изменить сведения о новом шаге, который вы добавили. Новый шаг временно называется Wait for element.

Изменение шага

Чтобы изменить сведения о существующем шаге, выполните следующие действия:

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

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

  2. Измените сведения о шаге, например тип шага, селекторы элемента DOM, к которому применяется шаг, или свойства шага. Различные типы шагов и их свойства перечислены в разделе ниже. Изменения сохраняются автоматически.

Изменение типа шага

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

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

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

    Раскрывающееся меню

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

Тип шага Описание Свойства
change Измените значение поля ввода формы. селекторы: способы поиска элемента, к которому применяется этот шаг.
value: значение, которое необходимо задать для поля ввода формы.
click Щелкните элемент . селекторы: способы поиска элемента, к которому применяется этот шаг.
offsetX/offsetY: как далеко от левого верхнего угла элемента, который нужно щелкнуть.
close Закройте окно браузера. Нет.
doubleClick Дважды щелкните элемент. селекторы: способы поиска элемента, к которому применяется этот шаг.
offsetX/offsetY: как далеко от левого верхнего угла элемента дважды щелкнуть.
emulateNetworkConditions Эмулировать различные условия сети. Скачать/upload: скорость скачивания и отправки в байтах в секунду.
задержка: минимальная задержка от запроса, отправляемого в полученный ответ, в миллисекундах.
hover Эмулировать указатель, наведенный на элемент. селекторы: способы поиска элемента, к которому применяется этот шаг.
keyDown Нажмите клавишу вниз. селекторы: способы поиска элемента, к которому применяется этот шаг.
клавиша: какую клавишу следует нажать.
keyUp Отпустите нажатую клавишу. селекторы: способы поиска элемента, к которому применяется этот шаг.
key: какой ключ следует освободить.
navigate Перейдите на другую веб-страницу. url: URL-адрес страницы для перехода.
scroll Прокрутите страницу до позиции. X/y: необязательные горизонтальные и вертикальные координаты позиции для прокрутки на странице.
setViewport Изменение размера окна просмотра, коэффициента пикселей устройства и возможностей. Ширина/height: размер окна просмотра.
deviceScaleFactor: коэффициент пикселей устройства.
isMobile: является ли окно просмотра окном просмотра мобильного устройства.
hasTouch: поддерживает ли окно просмотра события касания.
isLandscape. Указывает, находится ли окно просмотра в альбомной ориентации.
waitForElement Дождитесь появления элемента или нескольких элементов на веб-странице. селекторы: способы поиска элемента, к которому применяется этот шаг.
waitForExpression Подождите, пока выражение JavaScript не будет иметь значение true. expression: вычисляемое выражение JavaScript.
Изменение селекторов шага

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

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

Селектор может быть любого из следующих типов:

  • Селектор CSS, например #my-element-with-id или .my-class.
  • Селектор XPath с префиксом xpath/, например xpath//html/body/form/div/label.
  • Текстовое содержимое элемента с префиксом text/, например text/Add a task.

Вы можете изменить селекторы шага с помощью любого из подходов:

  • Выбор элемента на отображаемой веб-странице.

  • Добавление, удаление или изменение селектора вручную.

  • Чтобы изменить селекторы, выбрав элемент на отображаемой веб-странице, щелкните Выбрать элемент на странице для обновления селекторов, а затем щелкните элемент на отображаемой веб-странице, которую вы хотите выбрать. Средство записи обновляет список селекторов в соответствии с выбранным элементом:

    Кнопка

  • Вы можете вручную добавить, удалить или изменить селектор:

    • Чтобы добавить или удалить селектор, в разделе Селекторы наведите указатель мыши на селектор и нажмите кнопку Добавить селектор или Удалить селектор:

      Кнопки Добавить и удалить селектор

    • Чтобы изменить значение селектора, в разделе Селекторы щелкните поле ввода, содержащее значение селектора, а затем введите новое значение для селектора:

      Поле ввода значения селектора

Удаление шага

Чтобы удалить шаг из существующего пользовательского потока, выполните приведенные далее действия.

  1. Нажмите кнопку Открыть действия шага (значок Открыть действия шага) рядом с этапом, который требуется удалить, а затем выберите Удалить шаг:

    Кнопка

Удаление потока пользователя

Чтобы удалить ранее записанный пользовательский поток, при просмотре списка записей щелкните Удалить запись (значок удалить запись) рядом с записью, которую нужно удалить:

Список записей и кнопка

Экспорт и импорт пользовательских потоков в виде файлов

Чтобы предоставить общий доступ к потоку пользователя другим пользователям, экспортируйте записанный поток пользователя в виде JSON-файла. Например, общий доступ к потоку пользователя может помочь другим пользователям воспроизвести ошибку, выполнив тот же набор шагов, что и вы.

Экспорт потока пользователя в виде файла

Чтобы предоставить общий доступ к потоку пользователя другому пользователю, экспортируйте поток пользователя в виде JSON-файла:

  1. При просмотре шагов пользовательского потока нажмите кнопку Экспорт (экспорт) на панели инструментов Средства записи , а затем выберите JSON:

    Раскрывающееся меню кнопки Экспорт и параметр JSON

  2. Выберите расположение для сохранения файла. Файл сохраняется с именем потока пользователя и расширением .json.

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

Чтобы импортировать поток пользователя из JSON-файла, выполните следующее:

  1. На панели инструментов Средства записи нажмите кнопку Импорт записи (значок Импорт записи):

    Кнопка Импорт записи

  2. В открывшемся диалоговом окне выбора файлов выберите JSON-файл потока пользователя и нажмите кнопку Открыть . Поток пользователя импортируется и отображается в списке записей в средстве записи .

Экспорт пользовательского потока для автоматизации тестирования

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

  1. При просмотре шагов пользовательского потока на панели инструментов Средство записи нажмите кнопку Экспорт (экспорт), а затем выберите формат экспорта:

    Раскрывающееся меню кнопки

    Формат экспорта Платформа автоматизации тестирования
    @puppeteer/replay Экспортирует поток пользователя в виде тестового скрипта для библиотеки воспроизведения . См . репозиторий puppeteer /replay .
    Puppeteer Экспортирует пользовательский поток в виде тестового скрипта для платформы автоматизации тестирования Puppeteer. См . раздел Puppeteer.
    Puppeteer (включая анализ Lighthouse) Экспортирует поток пользователя в виде тестового скрипта для платформы автоматизации тестирования Puppeteer и включает в себя анализ производительности веб-сайта Lighthouse.

    Откроется диалоговое окно Сохранить как .

  2. Выберите расположение для сохранения файла. Файл сохраняется с именем потока пользователя и расширением .js.