Краткое руководство. Настройка непрерывного сквозного тестирования с помощью Предварительной версии Microsoft Playwright Testing
В этом кратком руководстве вы настроили непрерывное комплексное тестирование с помощью Предварительной версии Microsoft Playwright Testing, чтобы проверить правильность работы веб-приложения в разных браузерах и операционных системах с каждым фиксацией кода и устранением неполадок с помощью панели мониторинга службы. Узнайте, как добавить тесты Playwright в рабочий процесс непрерывной интеграции (CI), например GitHub Actions, Azure Pipelines или другие платформы CI.
После выполнения этого краткого руководства у вас есть рабочий процесс CI, который запускает набор тестов Playwright в большом масштабе и помогает легко устранять неполадки с помощью Microsoft Playwright Testing.
Внимание
Тестирование Microsoft Playwright в настоящее время находится в предварительной версии. Юридические условия, применимые к функциям Azure, которые находятся в бета-версии, предварительной версии или в противном случае еще не выпущены в общедоступную версию, см . в дополнительных условиях использования для предварительных версий Microsoft Azure.
Необходимые компоненты
Учетная запись Azure с активной подпиской. Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.
Рабочая область Microsoft Playwright Testing. Выполните краткое руководство. Выполните тесты Playwright в масштабе и создайте рабочую область.
- Учетная запись GitHub. Если у вас нет учетной записи GitHub, ее можно создать бесплатно.
- Репозиторий GitHub, содержащий спецификации тестирования Playwright и рабочий процесс GitHub Actions. Сведения о создании репозитория см. в статье "Создание нового репозитория".
- Рабочий процесс GitHub Actions. Если вам нужна помощь по началу работы с GitHub Actions, см . статью о создании первого рабочего процесса.
- Настройте проверку подлинности из GitHub Actions в Azure. См. статью "Использование GitHub Actions для подключения к Azure"
Получение URL-адреса конечной точки региона службы
В конфигурации службы необходимо предоставить конечную точку службы для конкретного региона. Конечная точка зависит от региона Azure, выбранного при создании рабочей области.
Чтобы получить URL-адрес конечной точки службы и сохранить его в виде секрета рабочего процесса CI, выполните следующие действия:
Войдите на портал Playwright с помощью учетной записи Azure.
На домашней странице рабочей области выберите руководство по настройке представления.
Совет
Если у вас несколько рабочих областей, можно переключиться на другую рабочую область, выбрав имя рабочей области в верхней части страницы, а затем выберите " Управление всеми рабочими областями".
Чтобы добавить конечную точку региона в настройке, скопируйте URL-адрес конечной точки службы.
URL-адрес конечной точки соответствует региону Azure, выбранному при создании рабочей области.
Сохраните URL-адрес конечной точки службы в секрете рабочего процесса CI:
Имя секрета Значение PLAYWRIGHT_SERVICE_URL Вставьте URL-адрес конечной точки, скопированный ранее.
Добавление файла конфигурации службы
Если у вас нет тестов Playwright, настроенных для запуска со службой, добавьте файл конфигурации службы в репозиторий. На следующем шаге необходимо указать этот файл конфигурации службы в интерфейсе командной строки playwright.
Создайте файл
playwright.service.config.ts
вместе с файломplaywright.config.ts
.При необходимости используйте
playwright.service.config.ts
файл в примере репозитория.Добавьте в него следующее содержимое:
import { defineConfig } from '@playwright/test'; import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing'; import config from './playwright.config'; /* Learn more about service configuration at https://aka.ms/mpt/config */ export default defineConfig( config, getServiceConfig(config, { exposeNetwork: '<loopback>', timeout: 30000, os: ServiceOS.LINUX, useCloudHostedBrowsers: true }), { /* Playwright Testing service reporter is added by default. This will override any reporter options specified in the base playwright config. If you are using more reporters, please update your configuration accordingly. */ reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], } );
По умолчанию конфигурация службы позволяет выполнять следующие действия.
- Ускорение конвейеров сборки путем параллельного выполнения тестов с помощью браузеров, размещенных в облаке.
- Упрощение устранения неполадок с простым доступом к результатам теста и артефактам, опубликованным в службе.
Однако вы можете использовать любой из этих функций или обоих. Узнайте , как использовать функции службы и обновить файл конфигурации службы в соответствии с вашими требованиями.
Сохраните и зафиксируйте файл в репозиторий исходного кода.
Обновление файла package.json
Обновите файл в репозитории package.json
, чтобы добавить сведения о пакете службы Тестирования Microsoft Playwright в devDependencies
разделе.
"devDependencies": {
"@azure/microsoft-playwright-testing": "^1.0.0-beta.6"
}
Включение артефактов в конфигурации Playwright
playwright.config.ts
В файле проекта убедитесь, что вы собираете все необходимые артефакты.
use: {
trace: 'on-first-retry',
video:'retain-on-failure',
screenshot:'on'
},
Настройка конфигурации службы
Создайте новый файл
PlaywrightServiceSetup.cs
в корневом каталоге проекта. Этот файл упрощает проверку подлинности клиента с помощью службы.Добавьте в него следующее содержимое:
using Azure.Developer.MicrosoftPlaywrightTesting.NUnit; using NUnit.Framework; namespace PlaywrightTests; // Remember to change this as per your project namespace [SetUpFixture] public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
Сохраните и зафиксируйте файл в репозиторий исходного кода.
Установка пакета службы
В проекте установите пакет Microsoft Playwright Testing.
dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease
Эта команда обновляет файл проекта csproj
, добавив сведения о пакете службы в ItemGroup
раздел. Не забудьте зафиксировать эти изменения.
<ItemGroup>
<PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
</ItemGroup>
Добавьте или обновите .runsettings
файл для проекта.
Если вы еще не настроили тесты Playwright для запуска с помощью службы, добавьте .runsettings
файл в репозиторий. На следующем шаге необходимо указать этот файл конфигурации службы в интерфейсе командной строки playwright.
Создайте новый файл
.runsettings
.При необходимости используйте
.runsettings
файл в примере репозитория.Добавьте в него следующее содержимое:
<?xml version="1.0" encoding="utf-8"?> <RunSettings> <TestRunParameters> <!-- The below parameters are optional --> <Parameter name="Os" value="linux" /> <!--<Parameter name="RunId" value="sample-run-id1" />--> <Parameter name="ServiceAuthType" value="EntraId" /> <Parameter name="UseCloudHostedBrowsers" value="true" /> <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" /> <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />--> <Parameter name="EnableGitHubSummary" value="false" /> <!--<Parameter name="ExposeNetwork" value="*" />--> </TestRunParameters> <!-- NUnit adapter --> <NUnit> <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files --> <NumberOfTestWorkers>10</NumberOfTestWorkers> </NUnit> <!-- General run configuration --> <RunConfiguration> <EnvironmentVariables> <!-- For debugging selectors, it's recommend to set the following environment variable --> <!--<DEBUG>pw:api*</DEBUG>--> </EnvironmentVariables> </RunConfiguration> <!-- Playwright --> <Playwright> <BrowserName>chromium</BrowserName> <ExpectTimeout>5000</ExpectTimeout> <LaunchOptions> <Headless>false</Headless> <!--Channel>msedge</Channel--> </LaunchOptions> </Playwright> <LoggerRunSettings> <Loggers> <!--microsoft playwright testing service logger for reporting --> <Logger friendlyName="microsoft-playwright-testing" enabled="True" /> <!--could enable any logger additionally --> <Logger friendlyName="trx" enabled="false" /> </Loggers> </LoggerRunSettings> </RunSettings>
Параметры в этом файле позволяют:
- Ускорение конвейеров сборки путем параллельного выполнения тестов с помощью браузеров, размещенных в облаке.
- Опубликуйте результаты теста и артефакты в службе для быстрого устранения неполадок.
Однако вы можете использовать любой из этих функций или обоих. Узнайте , как использовать функции службы и обновить файл конфигурации службы в соответствии с вашими требованиями.
Сохраните и зафиксируйте файл в репозиторий исходного кода.
Включение артефактов в настройке Playwright
Настройте playwright для записи артефактов, таких как снимок экрана, видео и трассировки.
- Снимки экрана см. в разделе "Снимки экрана"
- Видео см . в записях для тестов
- Сведения о трассировках см. в записи трассировки
После сбора этих артефактов подключите их к TestContext
ним, чтобы убедиться, что они доступны в тестовых отчетах. Дополнительные сведения см . в нашем примере проекта для NUnit.
Настройка проверки подлинности
Компьютер CI, на котором выполняются тесты Playwright, должен пройти проверку подлинности с помощью службы тестирования Playwright, чтобы получить браузеры для выполнения тестов и публикации результатов теста и артефактов.
Служба предлагает два метода проверки подлинности: идентификатор Microsoft Entra и маркеры доступа. Настоятельно рекомендуется использовать идентификатор Microsoft Entra для проверки подлинности конвейеров.
Настройка проверки подлинности с помощью идентификатора Microsoft Entra
Если вы используете GitHub Actions, вы можете подключиться к службе с помощью GitHub OpenID Connect. Выполните действия, чтобы настроить интеграцию:
Необходимые компоненты
Вариант 1. Приложение Microsoft Entra
Создайте приложение Microsoft Entra с субъектом-службой, портал Azure, Azure CLI или Azure PowerShell.
Скопируйте значения для идентификатора клиента, идентификатора подписки и идентификатора каталога (клиента), чтобы использовать его позже в рабочем процессе GitHub Actions.
Owner
Назначьте субъекту-службе роль илиContributor
роль, созданную на предыдущем шаге. Эти роли должны быть назначены в рабочей области Playwright Testing. Дополнительные сведения см. в статье об управлении доступом.Настройте учетные данные федеративного удостоверения в приложении Microsoft Entra для доверия маркеров, выданных GitHub Actions в репозитории GitHub.
Вариант 2. Управляемое удостоверение, назначаемое пользователем
Создание управляемого удостоверения, назначаемого пользователем.
Скопируйте значения для идентификатора клиента, идентификатора подписки и идентификатора каталога (клиента), чтобы использовать его позже в рабочем процессе GitHub Actions.
Owner
Назначьте управляемому удостоверению, назначенному пользователем, илиContributor
роли, созданному на предыдущем шаге. Эти роли должны быть назначены в рабочей области Playwright Testing. Дополнительные сведения см. в статье об управлении доступом.Настройте учетные данные федеративного удостоверения в управляемом удостоверении , назначаемом пользователем, для доверия маркеров, выданных GitHub Actions в репозитории GitHub.
Создавайте секреты GitHub
- Добавьте значения, которые вы получили на предыдущем шаге в качестве секретов в репозиторий GitHub. См . раздел "Настройка секрета действия GitHub". Эти переменные используются в рабочем процессе GitHub Action в последующих шагах.
Секрет Github | Источник (приложение Microsoft Entra или управляемое удостоверение) |
---|---|
AZURE_CLIENT_ID |
Client ID |
AZURE_SUBSCRIPTION_ID |
ИД подписки |
AZURE_TENANT_ID |
Идентификатор каталога (клиента) |
Примечание.
Для повышения безопасности настоятельно рекомендуется использовать секреты GitHub для хранения конфиденциальных значений, а не их непосредственно в файле рабочего процесса.
Настройка проверки подлинности с помощью маркеров доступа
Внимание
Настоятельно рекомендуется использовать идентификатор Microsoft Entra для проверки подлинности в службе. Если вы используете маркеры доступа, см. инструкции по управлению маркерами доступа
Вы можете создать маркер доступа из рабочей области Playwright Testing и использовать его в настройке. Однако настоятельно рекомендуется использовать идентификатор Microsoft Entra для проверки подлинности из-за повышенной безопасности. Маркеры доступа, в то время как удобные, функции, такие как долгоживущие пароли и более подвержены скомпрометации.
Проверка подлинности с помощью маркеров доступа по умолчанию отключена. Чтобы использовать, включите проверку подлинности на основе маркера доступа.
Сохраните маркер доступа в секрете рабочего процесса CI и используйте его в рабочем процессе GitHub Actions или yaml-файле Azure Pipeline.
Имя секрета | Значение |
---|---|
PLAYWRIGHT_SERVICE_ACCESS_TOKEN | Вставьте значение созданного ранее маркера доступа. |
Обновление определения рабочего процесса
Обновите определение рабочего процесса CI, чтобы запустить тесты Playwright с помощью интерфейса командной строки Playwright. Передайте файл конфигурации службы в качестве входного параметра для интерфейса командной строки Playwright. Вы настраиваете среду, указывая переменные среды.
Открытие определения рабочего процесса CI
Добавьте следующие шаги, чтобы запустить тесты Playwright в Microsoft Playwright Testing.
Ниже описаны изменения рабочего процесса для действий GitHub или Azure Pipelines. Аналогичным образом можно выполнять тесты Playwright с помощью интерфейса командной строки Playwright на других платформах CI.
# This step is to sign-in to Azure to run tests from GitHub Action workflow. # Choose how to set up authentication to Azure from GitHub Actions. This is one example. name: Playwright Tests (Microsoft Playwright Testing) on: push: branches: [main, master] pull_request: branches: [main, master] permissions: # Required when using Microsoft Entra ID to authenticate id-token: write contents: read jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Login to Azure with AzPowershell (enableAzPSSession true) uses: azure/login@v2 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} enable-AzPSSession: true - name: Install dependencies working-directory: path/to/playwright/folder # update accordingly run: npm ci - name: Run Playwright tests working-directory: path/to/playwright/folder # update accordingly env: # Regional endpoint for Microsoft Playwright Testing PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. run: npx playwright test -c playwright.service.config.ts --workers=20 - name: Upload Playwright report uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: path/to/playwright/folder/playwright-report/ # update accordingly retention-days: 10
Обновите определение рабочего процесса CI, чтобы запустить тесты Playwright с помощью интерфейса командной строки Playwright NUnit.
.runsettings
Передайте файл в качестве входного параметра для интерфейса командной строки Playwright. Вы настраиваете среду, указывая переменные среды.
Откройте определение рабочего процесса CI.
Добавьте следующие шаги, чтобы запустить тесты Playwright в Microsoft Playwright Testing.
Ниже описаны изменения рабочего процесса для действий GitHub или Azure Pipelines. Аналогичным образом можно выполнять тесты Playwright с помощью интерфейса командной строки Playwright на других платформах CI.
on: push: branches: [ main, master ] pull_request: branches: [ main, master ] permissions: # Required when using AuthType as EntraId id-token: write contents: read jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 # This step is to sign-in to Azure to run tests from GitHub Action workflow. # Choose how to set up authentication to Azure from GitHub Actions. This is one example. - name: Login to Azure with AzPowershell (enableAzPSSession true) uses: azure/login@v2 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} enable-AzPSSession: true - name: Setup .NET uses: actions/setup-dotnet@v4 with: dotnet-version: 8.0.x - name: Restore dependencies run: dotnet restore working-directory: path/to/playwright/folder # update accordingly - name: Build run: dotnet build --no-restore working-directory: path/to/playwright/folder # update accordingly - name: Run Playwright tests working-directory: path/to/playwright/folder # update accordingly env: # Regional endpoint for Microsoft Playwright Testing PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. run: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20 - name: Upload Playwright report uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: path/to/playwright/folder/playwright-report/ # update accordingly retention-days: 10
Сохраните и зафиксируйте изменения.
При активации рабочего процесса CI тесты Playwright выполняются в рабочей области Microsoft Playwright Testing в облачных браузерах в 20 параллельных рабочих ролей. Собранные результаты и артефакты публикуются в службе и могут просматриваться на портале службы.
Параметры тестового запуска можно определить в .runsettings
файле. Дополнительные сведения см. в статье об использовании параметров пакета службы
Примечание.
Функция создания отчетов включена по умолчанию для существующих рабочих областей. Это развертывается на этапах и займет несколько дней. Чтобы избежать сбоев, убедитесь, что Rich diagnostics using reporting
для рабочей области установлен параметр ON, прежде чем продолжить. Дополнительные сведения см. в разделе "Включение отчетов для рабочей области".
Внимание
При тестировании Microsoft Playwright плата взимается на основе количества общих минут тестирования, потребляемых и опубликованных результатов теста. Если вы являетесь первым пользователем или приступить к работе с бесплатной пробной версией, вы можете начать с выполнения одного теста в масштабе вместо полного набора тестов, чтобы избежать исчерпания бесплатных минут тестирования и результатов теста.
После успешного выполнения теста можно постепенно увеличить тестовую нагрузку, выполнив дополнительные тесты со службой.
Вы можете выполнить один тест со службой с помощью следующей командной строки:
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
Просмотр тестов и результатов на портале Playwright
Теперь можно устранить неполадки конвейера CI на портале Playwright.
После завершения тестового запуска создается ссылка на портал Playwright. Откройте эту ссылку, чтобы просмотреть подробные результаты теста и связанные артефакты. На портале отображаются важные сведения, в том числе:
- Сведения о сборке CI
- Общее состояние выполнения теста
- ИД фиксации, связанный с тестовой запуском
Портал Playwright предоставляет все необходимые сведения для устранения неполадок. Вы можете:
- Переключение между повторными попытками.
- Просмотр подробных журналов ошибок, шагов тестирования и присоединенных артефактов, таких как снимки экрана или видео.
- Перейдите непосредственно к средству просмотра трассировки для более глубокого анализа.
Средство просмотра трассировки позволяет выполнять тест визуально. Вы можете:
- Используйте временную шкалу, чтобы навести указатель мыши на отдельные шаги, показыв состояние страницы до и после каждого действия.
- Проверьте подробные журналы, моментальные снимки DOM, сетевое действие, ошибки и выходные данные консоли для каждого шага.
После завершения тестового запуска вы получите ссылку на портал Playwright в терминале. Откройте эту ссылку, чтобы просмотреть подробные результаты теста и связанные артефакты. На портале отображаются важные сведения, в том числе:
- Сведения о сборке CI
- Общее состояние выполнения теста
- ИД фиксации, связанный с тестовой запуском
Портал Playwright предоставляет все необходимые сведения для устранения неполадок. Вы можете:
- Просмотр подробных журналов ошибок и присоединенных артефактов, таких как снимки экрана или видео.
- Перейдите непосредственно к средству просмотра трассировки для более глубокого анализа.
Примечание.
Некоторые метаданные, такие как владелец, описание и категория, в настоящее время не отображаются на панели мониторинга службы. Если вы хотите просмотреть дополнительные сведения, отправьте проблему GitHub в нашем репозитории.
Средство просмотра трассировки позволяет выполнять тест визуально. Вы можете:
- Используйте временную шкалу, чтобы навести указатель мыши на отдельные шаги, показыв состояние страницы до и после каждого действия.
- Проверьте подробные журналы, моментальные снимки DOM, сетевое действие, ошибки и выходные данные консоли для каждого шага.
Совет
Функции службы Microsoft Playwright Testing можно использовать независимо. Вы можете публиковать результаты теста на портале без использования функции размещенных в облаке браузеров, а также использовать только облачные браузеры для ускорения набора тестов без публикации результатов теста. Дополнительные сведения см. в разделе "Использование функций службы".
Примечание.
Результаты теста и артефакты, которые вы публикуете, хранятся в службе в течение 90 дней. После этого они автоматически удаляются.
Связанный контент
Вы успешно настроили непрерывный комплексный рабочий процесс тестирования для выполнения тестов Playwright в большом масштабе в облачных браузерах.