Запись и воспроизведение потоков пользователей и измерение производительности
Используйте средство "Запись" , чтобы записать ряд шагов в окне браузера или на вкладке, где открывается средство разработки, а затем воспроизвести их автоматически, при необходимости также измеряя производительность.
Когда следует использовать средство записи
Используйте средство "Запись" , если вы хотите ускорить повторяющиеся задачи, автоматически повторяя ряд взаимодействий с пользователем в браузере.
Средство записи записывает взаимодействия с пользователем, например щелчки мышью, ввод с клавиатуры и события навигации по страницам, и позволяет автоматически воспроизводить взаимодействия. Средство записи также можно использовать для измерения производительности среды выполнения при воспроизведении записанных взаимодействий с пользователем. Средство записи позволяет записывать любое количество потоков пользователей и воспроизводить их сколько угодно раз.
В оставшейся части этой статьи мы будем использовать средство записи для автоматизации добавления задач в демонстрационном приложении TODO.
Открытие средства записи
Откройте приложение TODO на новой вкладке или окне.
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В DevTools на панели действий выберите вкладку Средство записи . Если эта вкладка не отображается, нажмите кнопку Другие инструменты (
") и выберите Пункт Запись. Откроется средство "Запись ":
Запись потока пользователя
Чтобы начать запись нового потока пользователя, выполните приведенные далее действия.
Щелкните Создать новую запись.
В разделе Имя записи введите имя записи, например "Добавление задач TODO".
Нажмите кнопку Начать запись в нижней части средства записи :
На отображаемой веб-странице взаимодействуйте со страницей. Например, введите "задача 1" в поле Добавление входных данных задачи и нажмите клавишу ВВОД. Повторите эти шаги несколько раз.
Рядом с именем записи появится красный кружок, указывающий на то, что запись выполняется. Средство записи записывает ваши взаимодействия и отображает их в виде списка шагов:
Чтобы остановить запись, в нижней части списка записанных взаимодействий нажмите кнопку Завершить запись .
Запись останавливается, а круг рядом с именем записи становится синим, указывая, что запись завершена:
Запись других потоков пользователей
Чтобы записать новый поток пользователя, после остановки записи предыдущего потока пользователя:
Нажмите кнопку Создать новую запись (
) в левом верхнем углу средства Записи :
Повторите шаги из раздела Запись потока пользователя выше.
Воспроизведение потока пользователя
Вы можете воспроизвести потоки пользователей из списка записанных потоков пользователей или при просмотре сведений о конкретном потоке пользователя.
Чтобы просмотреть список записанных потоков пользователей, щелкните раскрывающееся меню на панели инструментов Средства записи в верхней части окна, а затем выберите 2 записи. Метка может отображать разное количество записей в зависимости от количества сделанных записей.
Чтобы просмотреть сведения о заданном пользовательском потоке, щелкните раскрывающийся список, который находится на панели инструментов Средства записи вверху, а затем щелкните имя потока пользователя.
Воспроизведение потока пользователя из списка записей
Нажмите кнопку Воспроизвести запись рядом с записью:
Подождите, пока средство записи воспроизводит ранее записанные взаимодействия с пользователем. Анимация воспроизводимых шагов отображается в средстве "Запись ":
После завершения воспроизведения анимация останавливается, а средство "Запись" отображает шаги записи.
Воспроизведение потока пользователя из записи
Нажмите кнопку Воспроизвести в правом верхнем углу средства записи :
Подождите, пока средство записи воспроизводит ранее записанные взаимодействия с пользователем. Анимация воспроизводимых шагов отображается в средстве "Запись ":
После завершения воспроизведения анимация останавливается, а средство "Запись" отображает шаги записи.
Медленное воспроизведение потока пользователя для изучения проблем
Чтобы увидеть, что происходит на отрисовываемой странице во время воспроизведения взаимодействия с пользователем, замедлите скорость воспроизведения. По умолчанию средство записи воспроизводит потоки пользователей так быстро, как это возможно.
Чтобы снизить скорость воспроизведения, выполните следующие действия.
Щелкните стрелку раскрывающегося списка рядом с элементом Воспроизведение в правом верхнем углу средства записи , а затем выберите скорость в раскрывающемся меню, например Медленный, Очень медленный или Чрезвычайно медленный:
Приостановка при воспроизведении пользовательского потока с помощью точек останова
Чтобы проверить отрисованную веб-страницу в определенной точке потока пользователя, приостановите воспроизведение с помощью точки останова.
Чтобы добавить точку останова в поток пользователя, выполните приведенные далее действия.
Рядом с этапом потока, на котором необходимо приостановить, нажмите кнопку Открыть действия шага (
) и выберите Добавить точку останова:
Чтобы запустить поток пользователя, щелкните Воспроизвести в правом верхнем углу средства записи .
Воспроизведение приостанавливается, когда достигает шага с точкой останова. Кнопки Продолжить и Выполнить один шаг также становятся доступны на панели инструментов:
Нажмите кнопку Выполнить один шаг , чтобы выполнить следующий шаг и снова приостановить, или нажмите кнопку Продолжить , чтобы продолжить воспроизведение до достижения следующей точки останова (или конца потока пользователя).
Измерение производительности
Чтобы оценить скорость работы веб-сайта при воспроизведении ряда взаимодействий с пользователем, используйте средство recorder . Записав пользовательский поток один раз, вы можете многократно воспроизвести запись, одновременно работая над улучшением производительности веб-сайта в среде выполнения.
Чтобы записать новый поток пользователя, выполните действия, описанные в разделе Запись потока пользователя.
Чтобы воспроизвести пользовательский поток при измерении производительности, щелкните панель Производительность в правом верхнем углу средства записи :
Подождите, пока средство записи воспроизводит ранее записанные взаимодействия с пользователем.
Откроется средство "Производительность ", в котором отображается запись производительности веб-сайта во время воспроизведения взаимодействия с пользователем:
Изменение шагов пользовательского потока
После записи потока пользователя можно изменить шаги потока пользователя. Например, можно добавить новые шаги, удалить существующие шаги или изменить сведения о шаге.
Добавление нового шага
Чтобы добавить новый шаг в существующий поток пользователя, выполните приведенные далее действия.
Нажмите кнопку Открыть действия шага (
рядом с шагом до или после которого требуется добавить новый шаг, а затем выберите Добавить шаг до или Добавить шаг после:
Следуйте инструкциям в разделе Изменение шага ниже, чтобы изменить сведения о новом шаге, который вы добавили. Новый шаг временно называется Wait for element.
Изменение шага
Чтобы изменить сведения о существующем шаге, выполните следующие действия:
Чтобы открыть раздел сведений на шаге, который требуется изменить, нажмите кнопку треугольника (
) рядом с шагом. Откроется раздел сведений на шаге:
Измените сведения о шаге, например тип шага, селекторы элемента DOM, к которому применяется шаг, или свойства шага. Различные типы шагов и их свойства перечислены в разделе ниже. Изменения сохраняются автоматически.
Изменение типа шага
Чтобы изменить тип шага при редактировании сведений о шаге, выполните следующие действия:
Щелкните поле ввода рядом с полем введите. Например, если шаг, который вы редактируете, имеет тип waitForElement, щелкните поле ввода, содержащее значение waitForElement.
Удалите содержимое поля ввода, а затем выберите новый тип шага, который вы хотите использовать, в появившемся раскрывающемся меню:
При редактировании шага в потоке пользователя можно использовать следующие типы шагов. Каждый тип шага имеет список свойств, которые применяются к шагу.
| Тип шага | Описание | Свойства |
|---|---|---|
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.
Вы можете изменить селекторы шага с помощью любого из подходов:
Выбор элемента на отображаемой веб-странице.
Добавление, удаление или изменение селектора вручную.
Чтобы изменить селекторы, выбрав элемент на отображаемой веб-странице, щелкните Выбрать элемент на странице для обновления селекторов, а затем щелкните элемент на отображаемой веб-странице, которую вы хотите выбрать. Средство записи обновляет список селекторов в соответствии с выбранным элементом:
Вы можете вручную добавить, удалить или изменить селектор:
Чтобы добавить или удалить селектор, в разделе Селекторы наведите указатель мыши на селектор и нажмите кнопку Добавить селектор или Удалить селектор:
Чтобы изменить значение селектора, в разделе Селекторы щелкните поле ввода, содержащее значение селектора, а затем введите новое значение для селектора:
Удаление шага
Чтобы удалить шаг из существующего пользовательского потока, выполните приведенные далее действия.
Нажмите кнопку Открыть действия шага (
) рядом с этапом, который требуется удалить, а затем выберите Удалить шаг:
Удаление потока пользователя
Чтобы удалить ранее записанный пользовательский поток, при просмотре списка записей щелкните Удалить запись (
) рядом с записью, которую нужно удалить:
Экспорт и импорт пользовательских потоков в виде файлов
Чтобы предоставить общий доступ к потоку пользователя другим пользователям, экспортируйте записанный поток пользователя в виде JSON-файла. Например, общий доступ к потоку пользователя может помочь другим пользователям воспроизвести ошибку, выполнив тот же набор шагов, что и вы.
Экспорт потока пользователя в виде файла
Чтобы предоставить общий доступ к потоку пользователя другому пользователю, экспортируйте поток пользователя в виде JSON-файла:
При просмотре шагов пользовательского потока нажмите кнопку Экспорт (
на панели инструментов Средства записи , а затем выберите JSON:
Выберите расположение для сохранения файла. Файл сохраняется с именем потока пользователя и расширением
.json.
Импорт потока пользователя из файла
Чтобы импортировать поток пользователя из JSON-файла, выполните следующее:
На панели инструментов Средства записи нажмите кнопку Импорт записи (
):
В открывшемся диалоговом окне выбора файлов выберите JSON-файл потока пользователя и нажмите кнопку Открыть . Поток пользователя импортируется и отображается в списке записей в средстве записи .
Экспорт пользовательского потока для автоматизации тестирования
Чтобы создать тестовый скрипт и запустить его автоматически с помощью платформы автоматизации тестирования, экспортируйте пользовательский поток в виде файла тестового .js скрипта следующим образом:
При просмотре шагов пользовательского потока на панели инструментов Средство записи нажмите кнопку Экспорт (
а затем выберите формат экспорта:
Формат экспорта Платформа автоматизации тестирования @puppeteer/replayЭкспортирует поток пользователя в виде тестового скрипта для библиотеки воспроизведения . См . репозиторий puppeteer /replay . Puppeteer Экспортирует пользовательский поток в виде тестового скрипта для платформы автоматизации тестирования Puppeteer. См . раздел Puppeteer. Puppeteer (включая анализ Lighthouse) Экспортирует поток пользователя в виде тестового скрипта для платформы автоматизации тестирования Puppeteer и включает в себя анализ производительности веб-сайта Lighthouse. Откроется диалоговое окно Сохранить как .
Выберите расположение для сохранения файла. Файл сохраняется с именем потока пользователя и расширением
.js.