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

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

Предпосылки

• Учетная запись Azure с активной подпиской. Если у вас нет подписки на Azure, создайте бесплатную учетную запись перед началом.
• Для учетной записи Azure требуется владелец, участник или одна из классических ролей администратора.
• Проект Playwright, использующий раннер Playwright и JavaScript SDK (NUnit и другие инструменты запуска в настоящее время не поддерживаются). Если у вас нет проекта, создайте его с помощью документации по началу работы с Playwright или используйте пример проекта Playwright Workspaces.
• Проект Playwright должен использовать пакет Playwright (@plawright/test) версии 1.57 или более поздней.
• Azure CLI. Если у вас нет Azure CLI, см. статью "Установка Azure CLI".
• Рабочая область Playwright должна использовать аутентификацию Microsoft Entra ID. Проверка подлинности с помощью токена доступа не поддерживается при создании отчетов.

Включение отчетов и связывание учетной записи хранения с рабочей областью

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

Новая рабочая область

1. Войдите в портал Azure, используя учетные данные вашей подписки Azure.

2. На домашней странице портала найдите и выберите "Тестирование приложений Azure".

   

3. В Центре тестирования приложений Azure выберите "Создать " в разделе "Рабочие области Playwright"

   

4. На странице Создание ресурса рабочей области Playwright введите следующие сведения:

   Поле	Description
   Subscription	Выберите подписку Azure, которую вы хотите использовать для этой рабочей области Playwright.
   Группа ресурсов	Выберите существующую группу ресурсов. Или выберите Create new и введите уникальное имя для новой группы ресурсов.
   Имя	Введите уникальное имя рабочей области. Имя может состоять только из буквенно-цифровых символов и дефисов и иметь длину от 3 до 24 символов.
   Местоположение	Выберите географическое расположение для рабочей области. Это расположение также определяет, где хранятся результаты выполнения теста.
   Отчеты	Переключатель по умолчанию установлен в положение "Включено", чтобы пользователи могли сохранять и просматривать свои тестовые отчёты из рабочей области Playwright. Если вы хотите отключить отчетность, переключите настройку на "Отключено".
   Учетная запись хранения	Переключатель по умолчанию находится в положении 'Вкл', для того чтобы пользователи могли сохранять и просматривать свои отчеты о выполнении тестов из рабочей области Playwright. Если вы хотите отключить отчеты, переключите параметр на "Отключено".

   Замечание

   Отчёты Playwright Workspaces используют Azure Storage для хранения тестовых отчётов и других артефактов. Затраты на хранение определяются на основе настроек сохранения данных в учетной записи хранения.

   Замечание

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

5. Завершив настройку ресурса, нажмите кнопку "Проверить и создать".

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

   

Существующая рабочая область

1. Войдите в портал Azure, используя учетные данные вашей подписки Azure.

2. На домашней странице портала найдите и выберите "Тестирование приложений Azure".

   

3. В центре тестирования приложений Azure выберите "Просмотреть ресурсы".

   

4. Найдите и откройте рабочую область Playwright.

5. В левой панели навигации выберите Настройки: > конфигурация хранилища.

6. Установите тумблер "Отчеты" в положение Включено, и выберите учетную запись хранения, чтобы связать с рабочей областью Playwright.

   

   Замечание

   Отчеты Playwright Workspaces используют Azure Storage для хранения как тестовых отчетов, так и других артефактов. Затраты на хранение определяются на основе параметров удержания данных в учетной записи хранения.

7. Нажмите кнопку "Сохранить".

Добавьте ролевые роли управления доступом (RBAC) для связанной учётной записи хранения

1. Откройте связанную учетную запись хранения на портале Azure.

2. Перейдите на вкладку Управление доступом (IAM).

   

3. выберите Добавить назначение ролей.

   

4. В разделе «Роли должностных функций» найдите и выберите роль Участник данных хранилища Blob и нажмите «Далее».

   

5. Выберите и добавьте всех участников, выполняющих тесты.

   

6. Нажмите кнопку "Рецензирование и назначение".

Установка пакета рабочих пространств Playwright

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

npm init @azure/playwright@latest

Эта команда создает playwright.service.config.ts файл, который направляет и проверяет подлинность Playwright в рабочих пространствах Playwright.

Если у вас уже есть этот файл, пакет просит перезаписать его.

Включите репортер HTML и Playwright Workspaces.

Чтобы использовать функцию отчетности в Playwright Workspaces, включите отчет html и репортер Playwright Workspaces, добавив следующий параметр в файл playwright.service.config.ts —

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Включение артефактов в настройке Playwright

В файле playwright.config.ts проекта убедитесь, что вы собираете все необходимые артефакты.

use: 
{
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
}

Настройка конечной точки браузера

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

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

1. Войдите на портал Azure с помощью учетной записи Azure и перейдите в рабочую область.

2. Выберите страницу "Начало работы ".

   

3. Чтобы добавить конечную точку браузера в настройку, скопируйте URL-адрес конечной точки.

   Убедитесь, что этот URL-адрес доступен в переменной PLAYWRIGHT_SERVICE_URL среды.

   

Настройка среды

Чтобы настроить среду, необходимо настроить PLAYWRIGHT_SERVICE_URL переменную среды со значением, полученным на предыдущих шагах.

Используйте модуль dotenv для управления средой. dotenvС помощью этого параметра можно определить переменные среды в .env файле.

1. Добавьте модуль в dotenv проект:

   npm i --save-dev dotenv
   

2. Добавьте следующий фрагмент кода в playwright.service.config.ts:

   require('dotenv').config();
   

3. Создайте файл вместе с файлом .envplaywright.config.ts в проекте Playwright:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Обязательно замените {MY-REGION-ENDPOINT} заполнитель текста значением, скопированным ранее.

Настройка проверки подлинности

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

Замечание

Репортер Playwright Workspaces поддерживает только аутентификацию на основе Microsoft Entra ID. Если вы используете токены доступа для проверки подлинности, вы не можете создавать отчеты.

Настройка проверки подлинности с помощью идентификатора Microsoft Entra

Идентификатор Microsoft Entra — это единственная поддерживаемая проверка подлинности для использования функции создания отчетов в рабочей области Playwright. На локальном компьютере разработки можно использовать Azure CLI для входа.

az login

Замечание

Если вы являетесь частью нескольких клиентов Microsoft Entra, убедитесь, что вы входите в клиент, в котором принадлежит ваша рабочая область. Идентификатор клиента можно получить из портал Azure. См. статью "Поиск клиента Microsoft Entra". После получения идентификатора войдите с помощью команды. az login --tenant <TenantID>

Запустите тесты с помощью рабочих пространств Playwright

Вы выполнили настройку для выполнения тестов Playwright в облаке с помощью рабочих областей Playwright. Вы можете использовать интерфейс командной строки Playwright для выполнения тестов или использовать расширение Playwright Test Visual Studio Code.

Playwright CLI

1. Откройте окно терминала.

2. Введите следующую команду, чтобы запустить набор тестов Playwright в удаленных браузерах в рабочей области:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

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

Visual Studio Code

Чтобы запустить набор тестов Playwright в Visual Studio Code с помощью рабочих областей Playwright:

1. Откройте представление обозревателя тестов в строке действий.

2. Нажмите кнопку "Выполнить тесты ", чтобы запустить все тесты с помощью рабочих областей Playwright.

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

   

   Подсказка

   Нажмите кнопку "Отладка тестов" для отладки кода теста при выполнении тестов в удаленных браузерах.

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

   

4. Просмотрите все результаты теста на вкладке результатов теста .

Отладка запусков тестов и результатов на портале Azure

Добавьте роли управления доступом (RBAC) для связанного хранилища

1. Откройте связанную учетную запись хранения на портале Azure.

2. Перейдите на вкладку Управление доступом (IAM).

   

3. выберите Добавить назначение ролей.

   

4. В разделе "Роли привилегированного администратора" найдите и выберите роль участника* и нажмите кнопку "Далее".

   

5. Выберите и добавьте всех участников, которые могут просматривать тестовые отчеты.

   

6. Нажмите кнопку "Рецензирование и назначение".

(Только если трассировка включена) Разрешить просмотр общедоступной трассировки списка в связанной учетной записи хранения

1. Откройте связанную учетную запись хранения на портале Azure.

2. Перейдите к параметрам —> общий доступ к ресурсам (CORS).

   

3. В службе объектного хранилища Blob добавьте новую запись:

   • Допустимые источники: https://trace.playwright.dev
   • Разрешенные методы: GET, OPTIONS
   • Максимальный возраст: введите значение от 0 до 2147483647.

   

4. Нажмите кнопку "Сохранить".

Просмотр сохраненных тестовых отчетов на портале Azure

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

1. После завершения тестового запуска репортер создает ссылку на страницу тестовых запусков на портале Azure. Откройте эту ссылку, чтобы просмотреть подробные результаты теста и связанные артефакты.

   

2. Страница "Тестовые запуски" предоставляет все необходимые сведения для устранения неполадок. Вы можете:

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

   

3. Средство просмотра трассировки позволяет пошагово проходить выполнение теста визуально. Вы можете:

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

   

Подсказка

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