Разрешить пользователю взаимодействовать с браузером до, после и во время сценариев.

Демонстрация в этой статье показывает три сценария (Нидерланды, Франция, Великобритания). Каждая страна представлена ​​— с использованием определенных страниц и разделов в Википедии, а также через вспомогательные сайты. Выноска используется для объяснения сценария и каждого действия. Тексты всплывающих окон используются для дальнейшего руководства пользователя,

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

На анимации ниже показан полный сценарий для Нидерландов — от запуска первого акта с помощью кнопки «Играть». В сценарии четыре действия — открытие, история, спорт и культура. Каждый акт запускается с кнопки воспроизведения. Акты можно пропускать, Сценарий можно сбросить (в начало) и выбрать другие сценарии. Единственное взаимодействие с пользователем здесь — нажатие кнопки воспроизведения для запуска каждого действия. Однако: пользователь может просматривать Википедию между актами — сеанс браузера доступен пользователю бесплатно.

Примечание: эта демонстрация была создана с помощью ванильной Википедии. Неизменный сайт был загружен в браузере Chromium, созданном через Playwright. Все дальнейшие манипуляции производились из приложения Node.js.

Акт может использовать Playwright из Node.js для управления веб-сайтом, а также имеет полный доступ к DOM браузера и контексту JavaScript. Действие может, например: заполнять поля, выделять текст, нажимать кнопки, прокручивать страницу, открывать ссылки, делать выборки, наводить курсор на элементы, переключаться между вкладками.

Все исходники этого примера доступны на GitHub: https://github.com/lucasjellema/playwright-scenarios/tree/main/step-by-step. Примечание: эта статья предназначена для вдохновения, чтобы показать вам, что возможно с Playwright. Это, конечно, не готовое к использованию решение или отличный пример профессионального чистого кодирования. Пожалуйста, интерпретируйте правильно для того, для чего это было предназначено. И, пожалуйста, поделитесь своими идеями. Что вы думаете о том, что я описал? Имеет ли это смысл? Можете ли вы сами увидеть способ его применения? У вас есть предложения для меня? Пожалуйста, дай мне знать!

Введение

За последние несколько недель я сделал много интересных вещей с Драматургом. Возможность программного взаимодействия с браузером, работающим с любым веб-приложением или веб-сайтом, является мощной. Он открывает множество возможностей для автоматизированных действий браузера, как безголовых (для тестирования, RPA, интеграции, очистки экрана, проверки работоспособности, автоматических отчетов), так и с головокружением (прототипирование, инструкции, демонстрации, ярлыки диплинков, настраиваемые SaaS).

Я описал некоторые вещи, которых достиг с помощью Playwright, в нескольких предыдущих статьях. К ним относятся: внедрение обработчика горячих клавиш в любое веб-приложение, работающее во встроенном браузере Playwright (например, для создания снимков экрана или загрузки всех изображений), добавление панели инструментов на любую веб-страницу, создание API для работы с WhatsApp поверх WhatsApp. Веб-интерфейс, создание REST API перевода поверх Google Translate, создание ссылок Deepmark Booklinks, которые переходят в полностью инициализированный контекст в веб-приложении SaaS, получение отчетов JSON для фильмов с IMDb. Подробнее см.:

Следующая проблема, которую я определил — и в итоге обсудил в этой статье — это: используя Playwright, я хочу создать демонстрацию веб-приложения или веб-сайта. Команды драматурга используются для выполнения действий на веб-странице. Особенность заключается в том, что эти действия должны быть сгруппированы по шагам (так называемые действия). Вместе эти шаги образуют сценарий. С помощью панели инструментов — пользователь может воспроизвести акт, приостановить исполнение, пропустить (акт), сбросить (вернуть исполнение к первому акту). В промежутках между выполнением автоматизированных шагов пользователь может свободно взаимодействовать с веб-страницей. Демонстрационные шаги (также известные как акты) не обязательно выполнять или они не должны быть единственными действиями. Каждый шаг может иметь заголовок и описание, которые могут быть показаны во всплывающем окне. На рисунке показана выноска, описывающая текущий акт и сцену.

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

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

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

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

Шаг 1 вызывает функцию для добавления панели инструментов на каждую страницу в контексте браузера каждый раз после перехода или перезагрузки страницы и перестроения DOM. На этой панели инструментов есть элементы управления для запуска сценария (а также для переключения между сценариями, приостановки выполнения, сброса сценария). Панель инструментов передается функции director; эта функция обрабатывает события панели инструментов, касающиеся выполнения сценария.

Шаг 2 предназначен для внедрения объекта выноски на текущую страницу. Это делается путем прямого манипулирования DOM в функции injectCalloutIntoPage. Заголовок и описание исходного сценария передаются для отображения в выноске.

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

Сценарии определяются заголовком и описанием, а также вложенными шагами или действиями. Каждое действие также имеет название и описание, а также действие. Действие — это функция, которая вызывается при выполнении действия. Эта функция управляет выноской, всплывающей или всплывающей подсказкой, а также элементами управления пользовательского интерфейса браузера, элементами DOM и контекстом JavaScript. Вот небольшой пример сценария NL:

  1. определить заголовок и описание для сценария
  2. определить массив со сценами (актами) в сценарии; у каждого действия есть название и описание — они отображаются в выноске
  3. каждое действие имеет действие. это действие является функцией JavaScript на стороне сервера (контекст Node.js), которая получает текущий объект страницы (Playwright) в качестве входных данных; часто эта функция будет оценивать выражения селектора и операторы JavaScript в контексте веб-страницы внутри браузера. Первое действие в этом примере пишет всплывающий текст справки, вводит строку «Нидерланды» в поле поиска и нажимает кнопку поиска. После перезагрузки страницы — с подробностями для Нидерландов — отображается новый текст всплывающей подсказки. Примечание: вызовы waitForUnpause() выполняются для проверки того, что пользователь приостановил выполнение; эти вызовы будут блокироваться в этом случае и до тех пор, пока не закончится пауза
  4. Во втором действии приведен пример вызова scrollToElement — пользовательской функции Node.js — для прокрутки страницы до дескриптора элемента republic, полученного с помощью функции page.$() и селектора для ссылки. элемент с определенным значением атрибута заголовка. Эта прокрутка выполняется в браузере плавно, так что пользователь видит, как происходит прокрутка.

Функция scrollToElement достаточно проста:

Эта функция использует функцию page.evaluate() Playwright для передачи элемента DOM для определенного дескриптора элемента в функцию JavaScript, которая выполняется в контексте браузера. Функция использует функцию элемента DOM scrollIntoView() для выполнения тяжелой работы.

Другой пример того, что могут делать сценарии, — выделение текста. Это тоже оказывается довольно просто. Ссылка находится с определенным текстовым содержимым (относительно Макса Ферстаппена, отсюда и название элемента maxText). Затем выполняется фрагмент кода на стороне браузера, который берет родителя ‹P› этой ссылки, заключает весь его innerHTML в теги ‹mark› и прокручивает этот элемент ‹P› в поле зрения.

Это немного грубо. Работа с Объектами диапазона и выделения является более точным подходом. Тем не менее, это помогает мне в этом примере:

Код заставляет мышь (как бы) наводиться на ссылку, которая вызывает всплывающее окно с изображением Рембрандта:

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

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

В основе лежит функция director(): она обрабатывает события панели инструментов, относящиеся к сценариям (воспроизведение, сброс, пропуск, пауза, переключение). Эти события фиксируются в контексте браузера и передаются в контекст Node.js — из обработчиков событий onclick на ссылках панели инструментов. Этот оператор создает мост из браузера обратно в Node.js.

В основе лежит функция director(): она обрабатывает события панели инструментов, относящиеся к сценариям (воспроизведение, сброс, пропуск, пауза, переключение). Эти события фиксируются в контексте браузера и передаются в контекст Node.js — из обработчиков событий onclick на ссылках панели инструментов. Этот оператор создает мост из браузера обратно в Node.js:

Вызов context.exposeBinding гарантирует, что директор функции Node.js будет доступен в любом месте браузера в объекте окна как directorFunction. Эта функция вызывается из обработчиков onclick на панели инструментов.

А теперь о самой функции Director(). Он получает исходный объект, который содержит страницу и контекст браузера, от Playwright и входной параметр инструкции от обработчика onclick, чтобы указать, какое действие было запущено (следующее, также известное как воспроизведение, пропуск, сброс, пауза, переключение).

В зависимости от значения instruction функция будет манипулировать объектом scenarioStatus, который отслеживает текущий сценарий и его статус (следующее действие, приостановлено или нет). Например, для пропуска следующее действие просто увеличивается. Пауза означает либо паузу, либо возобновление паузы (используется как переключатель) и ничего не делает, кроме управления флагом в scenarioStatus. Возможно, мне следует добавить визуальную индикацию. Сброс означает сброс следующего акта на 0 или начало сценария. Переключение интерпретируется как выбор следующего сценария. Вызов populateCallOut() выполняется для синхронизации выноски с текущим сценарием и его следующим предстоящим действием.

Наконец, next, также известный как воспроизведение, является триггером для выполнения действия для действия, означающего вызов его функции. Режиссер не может остановить действие после его выполнения. Однако само действие может свериться с состоянием сценарияPaused и соблюдать его, ожидая завершения паузы.

Ресурсы

Весь код для этой статьи находится на GitHub: https://github.com/lucasjellema/playwright-scenarios/tree/main/step-by-step

CodePen о речевых пузырях от @RajRajeshDn — https://codepen.io/RajRajeshDn/pen/oZdRJw

Статья о расширенной позиции в CSS: https://www.internetingishard.com/html-and-css/advanced-positioning/

CSS — Поведение прокрутки — https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

StackOverflow — получить координаты X и Y элемента DOM — https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element-relative-to-the-browser-window

W3 Schools — как создать элемент выноски — https://www.w3schools.com/howto/howto_js_callout.asp

Выделите искомый текст на странице только с помощью Javascript от kapeel kokane — https://dev.to/comscience/highlight-searched-text-on-a-page-with-just-javascript-17b3

Новые селекторы Playwright 1.7.0 — для текстовых селекторов CSS — https://github.com/microsoft/playwright/blob/v1.7.0/docs/selectors.md#css-extension-visible

Документация драматурга:

TL;DR:запускать демонстрации или инструкции по действиям в браузере. Разрешить пользователю приостанавливать и пропускать действия, а также сбрасывать и переключать сценарии. Разрешить пользователю взаимодействовать с браузером до, после и во время сценариев. Библиотека Playwright с открытым исходным кодом используется из пользовательского приложения Node.js, в котором определяются сценарии с использованием достаточного количества селекторов CSS и манипулирования DOM.

Первоначально опубликовано на https://technology.amis.nl 31 декабря 2020 г.