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

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

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

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

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

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

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

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

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

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

   

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

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

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:

   

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

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

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

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

   

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

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

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

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

   

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

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

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