Как написать скрипт для браузера

Обновлено: 03.07.2024

Как получить доступ к сервисам AWS из сценария браузера с помощью Amazon Cognito Identity.

Как преобразовать текст в синтезированную речь с помощью Amazon Polly.

Как использовать объект presigner для создания предварительно подписанного URL.

Сценарий

Amazon Polly – это облачный сервис, который преобразует текст в реалистичную речь. Вы можете использовать Amazon Polly для разработки приложений, повышающих вовлеченность и доступность. Amazon Polly поддерживает несколько языков и включает множество реалистичных голосов. Дополнительные сведения об Amazon Polly см. в Руководстве по Amazon Polly для разработчиков.

В этом примере показано, как настроить и запустить простой сценарий браузера, который принимает введенный вами текст, отправляет этот текст в Amazon Polly, а затем возвращает URL-адрес синтезированного аудио текста для воспроизведения. Сценарий браузера использует Amazon Cognito Identity для предоставления учетных данных, необходимых для доступа к сервисам AWS. Вы увидите основные шаблоны загрузки и использования SDK для JavaScript в сценариях браузера.

Воспроизведение синтезированной речи в этом примере зависит от браузера, поддерживающего аудио HTML 5.

Сценарий браузера использует SDK для JavaScript для синтеза текста с помощью следующих API:

Шаг 1. Создайте пул удостоверений Amazon Cognito

В этом упражнении вы создаете и используете пул удостоверений Amazon Cognito, чтобы предоставить неавторизованный доступ к скрипту вашего браузера для сервиса Amazon Polly. При создании пула удостоверений также создаются две роли IAM: одна для поддержки пользователей, прошедших проверку подлинности поставщиком удостоверений, а другая — для поддержки гостевых пользователей, не прошедших проверку подлинности.

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

Чтобы создать пул удостоверений Amazon Cognito

Войдите в консоль управления AWS и откройте консоль Amazon Cognito в консоли Amazon Web Services.

Выберите «Управление пулами удостоверений» на начальной странице консоли.

На следующей странице выберите Создать новый пул удостоверений.

Если других пулов удостоверений нет, консоль Amazon Cognito пропустит эту страницу и вместо этого откроет следующую страницу.

В мастере Приступая к работе введите имя пула удостоверений в поле Имя пула удостоверений.

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

Выберите «Создать пул».

На следующей странице выберите Просмотреть сведения, чтобы просмотреть имена двух ролей IAM, созданных для вашего пула удостоверений. Запишите имя роли для неаутентифицированных удостоверений. Это имя необходимо для добавления необходимой политики для Amazon Polly.

Выберите «Разрешить».

На странице примера кода выберите платформу JavaScript. Затем скопируйте или запишите идентификатор пула удостоверений и регион. Эти значения необходимы для замены REGION и IDENTITY_POOL_ID в скрипте браузера.

После создания пула удостоверений Amazon Cognito вы можете добавить разрешения для Amazon Polly, необходимые для сценария вашего браузера.

Шаг 2. Добавьте политику к созданной роли IAM

Чтобы разрешить скрипту браузера доступ к Amazon Polly для синтеза речи, используйте роль IAM без аутентификации, созданную для вашего пула удостоверений Amazon Cognito. Для этого необходимо добавить к роли IAM-политику. Дополнительные сведения о ролях IAM см. в разделе «Создание роли для делегирования разрешений сервису AWS» в Руководстве пользователя IAM.

Чтобы добавить политику Amazon Polly к роли IAM, связанной с пользователями, не прошедшими проверку подлинности

На панели навигации в левой части страницы выберите "Роли".

В списке ролей IAM нажмите ссылку для роли неаутентифицированных удостоверений, ранее созданную Amazon Cognito.

На странице "Сводка" для этой роли выберите "Прикрепить политики".

На странице "Прикрепить разрешения" для этой роли найдите и установите флажок AmazonPollyFullAccess.

Вы можете использовать этот процесс, чтобы разрешить доступ к любому сервису Amazon.

Выберите Прикрепить политику.

После создания пула удостоверений Amazon Cognito и добавления разрешений для Amazon Polly к роли IAM для пользователей, не прошедших проверку подлинности, вы готовы к созданию веб-страницы и сценария браузера.

Шаг 3. Создайте HTML-страницу

Пример приложения состоит из одной HTML-страницы, содержащей пользовательский интерфейс и сценарий браузера. Для начала создайте документ HTML и скопируйте в него следующее содержимое. Страница содержит поле ввода и кнопку, элемент для воспроизведения синтезированной речи и элемент

элемент для отображения сообщений. (Обратите внимание, что полный пример показан внизу этой страницы.)

Для получения дополнительной информации об элементе см. аудио .

Сохраните файл HTML, назвав его polly.html . После того как вы создали пользовательский интерфейс для приложения, вы готовы добавить код сценария браузера, который запускает приложение.

Шаг 4. Напишите сценарий браузера

Первое, что нужно сделать при создании сценария браузера, — включить SDK для JavaScript, добавив

(Чтобы найти текущий номер SDK_VERSION_NUMBER, см. Справочник по API для SDK для JavaScript в Справочном руководстве по API AWS SDK для JavaScript.

Шаг 5. Запустите образец

Чтобы запустить пример приложения, загрузите polly.html в веб-браузер. Вот как должно выглядеть представление в браузере.

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

Полный пример

Вот полная HTML-страница со сценарием браузера. Он также доступен здесь, на GitHub .

Возможные улучшения

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

Поэкспериментируйте с другими форматами вывода звука.

Добавьте возможность выбора любого из различных голосов, предоставляемых Amazon Polly.

Интегрируйте поставщика удостоверений, например Facebook или Amazon, для использования с ролью IAM с проверкой подлинности.

Используйте API chrome.scripting для выполнения скрипта в разных контекстах.

Чтобы использовать API chrome.scripting, необходимо указать "manifest_version" 3 или выше и включить разрешение "scripting" в файле манифеста.

Вы можете использовать API chrome.scripting для добавления JavaScript и CSS на веб-сайты. Это похоже на то, что вы можете делать со скриптами содержимого, но с помощью API chrome.scripting расширения могут принимать решения во время выполнения.

Вы можете использовать параметр target, чтобы указать цель для внедрения JavaScript или CSS.

Единственным обязательным полем является tabId . По умолчанию внедрение выполняется в основном фрейме указанной вкладки.

Для запуска во всех кадрах указанной вкладки можно установить для логического значения allFrames значение true .

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

Нельзя одновременно указывать свойства frameIds и allFrames.

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

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

Примечание. В настоящее время поддерживается не более одного файла.

При внедрении JavaScript с помощью scripting.executeScript() вы можете указать функцию для выполнения вместо файла. Эта функция должна быть функциональной переменной, доступной для текущего контекста расширения.

Эта функция будет выполняться в контексте целевого объекта инъекции. Однако это не перенесет какой-либо текущий контекст выполнения функции. Таким образом, связанные параметры (включая этот объект) и внешние переменные приведут к ошибкам. Например, следующий код не будет работать и выдаст ошибку ReferenceError, поскольку при выполнении функции цвет не определен:

Это можно обойти с помощью свойства args:

При внедрении CSS на страницу можно также указать строку, которая будет использоваться в свойстве css. Этот параметр доступен только для scripting.insertCSS() ; вы не можете выполнить строку с помощью scripting.executeScript() .

Результаты выполнения JavaScript передаются расширению. Для каждого кадра включается один результат. Основной фрейм гарантированно будет первым индексом результирующего массива; все остальные кадры расположены в недетерминированном порядке.

scripting.insertCSS() не возвращает никаких результатов.

Если результирующее значение выполнения скрипта является обещанием, Chrome будет ждать, пока обещание будет выполнено, и вернет результирующее значение.

При написании сценария для информационных панелей, отчетов и других представлений Dundas BI вам может быть полезно использовать инструменты разработчика вашего веб-браузера при тестировании и отладке. В этой статье показано, как использовать инструменты разработчика Google Chrome в сочетании с редактором скриптов.

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

2. Отладка с помощью инструментов разработчика Chrome

Чтобы отлаживать скрипт с помощью инструментов разработчика Chrome, просто вставьте следующую строку в то место скрипта, где вы хотите начать отладку:

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

Далее нажмите "Создать".

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

Затем запустите Инструменты разработчика Chrome из меню Chrome в правом верхнем углу или нажмите CTRL + SHIFT + I . Откроются инструменты разработчика в отдельном окне.

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

Например, вы можете:

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

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

Сценарии браузера автоматизируют автономные веб-браузеры Chrome. Они выполняются браузерными ботами.

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

Если вы работали с инструментами автоматизации браузера, такими как Selenium, Puppeteer или Playwright, вы уже понимаете концепцию браузерных скриптов. Реализация Speedway основана на Playwright.

Шаги в скрипте браузера

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

Вы также можете написать свой собственный JavaScript для выполнения на странице или в собственной среде Loadster.

Loadster всегда выполняет шаги браузера последовательно.

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

Нажмите

Шаг щелчка щелкает элемент на странице.

Этапы кликов полезны для нажатия на ссылки или кнопки, как это может делать пользователь.

Шаг ввода имитирует ввод текста в элемент ввода, например текстовое поле или текстовую область.

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

Выбрать

Шаг выбора позволяет выбрать параметр из элемента выбора HTML на странице.

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

Если вы хотите выбрать Хорватию, на шаге можно указать CR для выбора по значению, "Хорватия" с двойными кавычками для выбора по имени или [1] с квадратными скобками для выбора по индексу.

Вы также можете программно выбирать элементы в блоке кода.

Файлы

Для взаимодействия с элементом ввода файла, например , используйте шаг "Файлы". Выполнение шага с файлами эквивалентно щелчку на средстве выбора файлов, открытию диалогового окна выбора файлов и выбору файла из вашей локальной файловой системы в реальном браузере.

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

Оценить блок

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

Очистить

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

Скриншот

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

Создание снимка экрана может потребовать больших ресурсов процессора для движков Loadster, но не влияет на ваш сервер.

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

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

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

Подождать

видимый — элемент существует в модели DOM и не является прозрачным, скрытым или скрытым за другим элементом.
скрытый — элемент существует в DOM, но скрыт CSS или скрыт другим элементом.
attached — элемент существует в DOM.
detached — элемент был удален из модели DOM.

Если элемент так и не достигнет желаемого состояния, шаг в конечном итоге завершится с ошибкой.

Блок кода

Блок кода позволяет вам писать собственный код JavaScript, который выполняется в среде Loadster, а не в браузере. Блоки кода предназначены для реализации собственных циклов, условной логики и потока управления в сценарии.

В блоках кода у вас есть доступ к современному синтаксису ECMAScript, например стрелочным функциям () => <> и const и let , а также к стандартным функциям синтаксического анализа, таким как JSON.parse(str) и XML.parse(str) .

Блоки кода очень эффективны, и фактически вы можете написать весь скрипт в блоке кода. Подробнее о них читайте в разделе «Кодовые блоки».

Поскольку блок кода не выполняется в браузере, он не имеет прямого доступа к переменным в контексте браузера, таким как window или document . Взгляните на Evaluate Blocks, если вам нужен доступ к ним.

Запись скрипта браузера

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

Установка браузерного расширения Loadster Recorder

Чтобы записать трафик вашего браузера и создать скрипт Speedway, вам понадобится бесплатный Loadster Recorder для Chrome или Loadster Recorder для Firefox.

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

Расширение для браузера имеет открытый исходный код, и вы можете ознакомиться с исходным кодом на GitHub.

Запись вашей активности в браузере

Чтобы начать запись, откройте новый или существующий сценарий браузера и нажмите «Запись». Speedway начнет взаимодействовать с расширением браузера Loadster Recorder.

Введите URL первой страницы, которую вы хотите записать.

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

Когда закончите, нажмите «Остановить запись».

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

Редактирование скриптов браузера

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

Вот несколько вещей, которые подходят для всех типов шагов:

Добавьте шаг, нажав кнопку на панели инструментов с соответствующим типом шага.
Выберите шаг или шаги, щелкнув (или удерживая клавишу Shift) в нейтральной области шага, например в левом маркере.
Скопируйте и вставьте шаги, выбрав их и используя обычные сочетания клавиш (control-c/v или command-c/v). Вы даже можете копировать и вставлять их между сценариями.
Дублируйте шаг, наведя указатель мыши на значок дубликата справа от шага и нажав на него.
Удалите шаг, наведя указатель мыши и нажав значок удаления справа от шага.
Чтобы отключить или включить шаг, наведите указатель мыши на значок переключателя справа от шага и щелкните его.Отключенные шаги остаются в сценарии, но не воспроизводятся (например, их комментирование).
Перетащите, чтобы изменить порядок шагов, щелкнув нейтральную область, например левый маркер, и перетащив ее в новое место.

Кроме того, у каждого типа шага есть свои атрибуты, которые можно редактировать отдельно.

Редактирование шагов ожидания

Этапы ожидания просты. Они просто заставляют бота приостановить выполнение скрипта на определенное количество секунд.

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

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

Редактирование шагов браузера

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

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

Проверка в сценариях браузера

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

Читайте также: