Rövid útmutató: Folyamatos, végpontok közötti tesztelés beállítása Playwright-munkaterületekkel

Ebben a rövid útmutatóban a Playwright-munkaterületekkel való folyamatos, teljes körű tesztelést állít be annak ellenőrzéséhez, hogy a webalkalmazás megfelelően fut-e a különböző böngészőkben és operációs rendszerekben minden kód véglegesítésével, és a teszteket egyszerűen elháríthatja a szolgáltatás irányítópultján. Megtudhatja, hogyan adhat hozzá Playwright-teszteket egy folyamatos integrációs (CI) munkafolyamathoz, például a GitHub Actionshez, az Azure Pipelineshoz vagy más CI-platformokhoz.

A rövid útmutató elvégzése után rendelkezik egy CI-munkafolyamattal, amely nagy léptékben futtatja a Playwright-tesztcsomagot, és segít a tesztek egyszerű hibaelhárításában a Playwright-munkaterületekkel.

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Ha nincs Azure-előfizetésed, hozz létre egy ingyenes fiókot mielőtt elkezdenéd.

• Playwright-munkaterület. Végezze el a rövid útmutatót: playwright-teszteket futtathat nagy méretekben , és létrehozhat egy munkaterületet.

GitHub-műveletek

• Egy GitHub-fiók. Ha nincs GitHub-fiókja, ingyenesen létrehozhat egyet.
• Egy GitHub-adattár, amely tartalmazza a Playwright teszt specifikációit és a GitHub Actions munkafolyamatot. Adattár létrehozásához lásd : Új adattár létrehozása.
• GitHub Actions-munkafolyamat. Ha segítségre van szüksége a GitHub Actions használatának megkezdéséhez, tekintse meg az első munkafolyamat létrehozását
• Hitelesítés beállítása a GitHub Actionsből az Azure-ba. Lásd: A GitHub Actions használata az Azure-hoz való csatlakozáshoz.

Azure-folyamatok

• Egy Azure DevOps-szervezet és -projekt. Ha nem rendelkezik Azure DevOps-szervezettel, ingyenesen létrehozhat egyet.
• A csővezeték definíciója. Ha segítségre van szüksége az Azure Pipelines használatának megkezdéséhez, nézze meg az első csővezeték létrehozását.
• Azure Resource Manager-szolgáltatáskapcsolat a szolgáltatáshoz való biztonságos hitelesítéshez az Azure Pipelinesból, lásd : Azure Resource Manager szolgáltatáskapcsolat

A szolgáltatásrégió végpontjának URL-címének lekérése

A szolgáltatáskonfigurációban meg kell adnia a régióspecifikus szolgáltatásvégpontot. A végpont a munkaterület létrehozásakor kiválasztott Azure-régiótól függ.

A szolgáltatásvégpont URL-címének lekéréséhez és CI-munkafolyamat-titkos kódként való tárolásához hajtsa végre a következő lépéseket:

1. Jelentkezzen be az Azure Portalra az Azure-fiókjával, és lépjen a munkaterületre.

2. Válassza az Első lépések lapot.

   

3. A régióvégpont hozzáadása beállításban másolja ki a szolgáltatásvégpont URL-címét.

   A végpont URL-címe megegyezik a munkaterület létrehozásakor kiválasztott Azure-régióval.

4. A szolgáltatásvégpont URL-címének tárolása CI-munkafolyamat-titkos kódban:

   Titkos név	Érték
   PLAYWRIGHT_SERVICE_URL	Illessze be a korábban másolt végpont URL-címét.

Szolgáltatáskonfigurációs fájl hozzáadása

Ha nem rendelkezik a szolgáltatással való futtatásra konfigurált Playwright-tesztekkel, adjon hozzá egy szolgáltatáskonfigurációs fájlt az adattárhoz. A következő lépésben ezt a szolgáltatáskonfigurációs fájlt adja meg a Playwright parancssori felületén.

1. Hozzon létre egy új fájlt playwright.service.config.ts a playwright.config.ts fájl mellett.

   Ha szeretné, használja a playwright.service.config.ts fájlt a mintaadattárban.

2. Adja hozzá a következő tartalmat:

   import { defineConfig } from '@playwright/test';
   import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
   import { DefaultAzureCredential } from '@azure/identity';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/pww/docs/config */
   export default defineConfig(
     config,
     createAzurePlaywrightConfig(config, {
       exposeNetwork: '<loopback>',
       connectTimeout: 3 * 60 * 1000, // 3 minutes
       os: ServiceOS.LINUX,
       credential: new DefaultAzureCredential(),
     })
   );
   

   A szolgáltatáskonfiguráció alapértelmezés szerint lehetővé teszi a buildelési folyamatok felgyorsítását úgy, hogy párhuzamosan futtat teszteket a felhőben üzemeltetett böngészők használatával.

3. Mentse és véglegesítse a fájlt a forráskódtárban.

Package.json fájl frissítése

Frissítse a fájlt az package.json adattárban, és adja hozzá a szakasz Playwright Workspaces csomagjának devDependencies részleteit.

"devDependencies": {
    "@azure/playwright": "latest"
}

Szolgáltatáscsomag telepítése

A projektben telepítse a Playwright Workspaces csomagot.

dotnet add package Azure.Developer.Playwright.NUnit

Ez a parancs úgy frissíti a projekt fájlját, hogy hozzáadja csproj a szolgáltatáscsomag részleteit a ItemGroup szakaszhoz. Ne felejtse el véglegesíteni ezeket a módosításokat.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Szolgáltatáskonfiguráció beállítása

1. Hozzon létre egy új fájlt PlaywrightServiceNUnitSetup.cs a projekt gyökérkönyvtárában. Ez a fájl megkönnyíti az ügyfél hitelesítését a szolgáltatással.
2. Adja hozzá a következő tartalmat:

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}

3. Mentse és véglegesítse a fájlt a forráskódtárban.

Hitelesítés beállítása

A Playwright-teszteket futtató CI-gépnek hitelesítenie kell magát a Playwright Workspaces szolgáltatással, hogy lekérje a böngészőket a tesztek futtatására.

A szolgáltatás két hitelesítési módszert kínál: a Microsoft Entra-azonosítót és az Access-jogkivonatokat. Határozottan javasoljuk, hogy a csővezetékek hitelesítéséhez használja a Microsoft Entra ID-t.

Hitelesítés beállítása a Microsoft Entra-azonosítóval

GitHub-műveletek

Ha GitHub Actionst használ, a GitHub OpenID Connect használatával csatlakozhat a szolgáltatáshoz. Az integráció beállításához kövesse az alábbi lépéseket:

Előfeltételek

1. lehetőség: Microsoft Entra-alkalmazás

• Microsoft Entra-alkalmazás létrehozása szolgáltatásazonossággal az Azure Portal, Azure CLI vagy Azure PowerShell használatával.

• Másolja ki az ügyfél-azonosító, az előfizetés-azonosító és a címtár-(bérlői) azonosító értékeit a GitHub Actions munkafolyamat későbbi részében való használathoz.

• Rendelje hozzá a Owner vagy Contributor szerepkört az előző lépésben létrehozott szolgáltatásnévhez. Ezeket a szerepköröket a Playwright munkaterületen kell hozzárendelni. További részletekért tekintse meg a hozzáférés kezelését.

• Konfiguráljon összevont identitás-hitelesítő adatokat egy Microsoft Entra-alkalmazáson , hogy megbízzon a GitHub Actions által a GitHub-adattárban kibocsátott jogkivonatokban.

2. lehetőség: Felhasználó által hozzárendelt felügyelt identitás

• Felhasználó által hozzárendelt felügyelt identitás létrehozása.

• Másolja ki az ügyfél-azonosító, az előfizetés-azonosító és a címtár-(bérlői) azonosító értékeit a GitHub Actions munkafolyamat későbbi részében való használathoz.

• Rendelje hozzá a OwnerContributor szerepkört az előző lépésben létrehozott, felhasználó által hozzárendelt felügyelt identitáshoz. Ezeket a szerepköröket a Playwright munkaterületen kell hozzárendelni. További részletekért tekintse meg a hozzáférés kezelését.

• Konfiguráljon egy federált identitás hitelesítő adatot egy felhasználóhoz rendelt felügyelt identitáson, hogy megbízhasson a GitHub Actions által kibocsátott jogkivonatokban a GitHub-adattárban.

GitHub-titkos kódok létrehozása

• Adja hozzá az előző lépésben kapott értékeket titkos kulcsként a GitHub-adattárhoz. Lásd a GitHub Action Secret beállítását. Ezeket a változókat a GitHub Action munkafolyamata használja a következő lépésekben.

GitHub-titkos kód	Forrás (Microsoft Entra-alkalmazás vagy felügyelt identitás)
AZURE_CLIENT_ID	Ügyfélazonosító
AZURE_SUBSCRIPTION_ID	Előfizetés azonosító
AZURE_TENANT_ID	Címtár (bérlő) azonosítója

Megjegyzés:

A fokozott biztonság érdekében erősen ajánlott a GitHub Titkos kulcsok használata a bizalmas értékek tárolására ahelyett, hogy közvetlenül a munkafolyamat-fájlba foglalja őket.

Azure-folyamatok

Ha Azure Pipelinest használ, szolgáltatáskapcsolatokkal csatlakozhat a szolgáltatáshoz. Az integráció beállításához kövesse az alábbi lépéseket:

• Alkalmazásregisztráció létrehozása számítási feladatok identitás-összevonásával. Válassza ki a Playwright-munkaterülethez társított előfizetést és erőforráscsoportot. Az erőforráscsoport neve általában megegyezik a Playwright-munkaterület nevével.

• Használja ezt a szolgáltatáskapcsolatot az Azure Pipeline yaml-fájljában a következő lépésekben látható módon.

Hitelesítés beállítása hozzáférési jogkivonatokkal

Figyelmeztetés

Határozottan javasoljuk, hogy a Microsoft Entra ID-t használja a szolgáltatáshoz való hitelesítéshez. Hozzáférési jogkivonatok használata esetén lásd : Hozzáférési jogkivonatok kezelése

Létrehozhat egy hozzáférési jogkivonatot a Playwright-munkaterületről, és használhatja azt a beállításban. A fokozott biztonság miatt azonban erősen ajánljuk a Microsoft Entra ID-t a hitelesítéshez. A hozzáférési jogkivonatok, bár kényelmesek, úgy működnek, mint a hosszú élettartamú jelszavak, és fokozottabban kitettek a kompromittálódás veszélyének.

1. A hozzáférési jogkivonatokat használó hitelesítés alapértelmezés szerint le van tiltva. A használathoz engedélyezze a hozzáférési jogkivonaton alapuló hitelesítést.

2. Hitelesítés beállítása hozzáférési jogkivonatokkal.

3. Tárolja a hozzáférési jogkivonatot egy CI-munkafolyamat titkos kódjában, és használja a GitHub Actions munkafolyamatban vagy az Azure Pipeline yaml-fájljában.

Titkos név	Érték
PLAYWRIGHT_SERVICE_ACCESS_TOKEN	Illessze be a korábban létrehozott Hozzáférési jogkivonat értékét.

A munkafolyamat-definíció frissítése

Frissítse a CI munkafolyamat-definícióját a playwright-tesztek playwright parancssori felülettel való futtatásához. Adja át a szolgáltatáskonfigurációs fájlt a Playwright parancssori felület bemeneti paramétereként. A környezetet környezeti változók megadásával konfigurálhatja.

1. Nyissa meg a CI munkafolyamat-definícióját.

2. Adja hozzá a következő lépéseket a forgatókönyv-tesztek Playwright-munkaterületeken való futtatásához.

   Az alábbi lépések a GitHub Actions vagy az Azure Pipelines munkafolyamat-módosításait ismertetik. Hasonlóképpen futtathatja a Playwright-teszteket a Playwright CLI használatával más CI-platformokon is.

   GitHub-műveletek

   
     # 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 (Playwright Workspaces)
     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 Playwright Workspaces
               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
   

   Azure-folyamatok

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN) # Not recommended, use Microsoft Entra ID authentication. 
   
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

Frissítse a CI munkafolyamat-definícióját, hogy a Playwright NUnit parancssori felülettel futtassa a playwright-teszteket. A környezetet környezeti változók megadásával konfigurálhatja.

1. Nyissa meg a CI munkafolyamat-definícióját.

2. Adja hozzá a következő lépéseket a forgatókönyv-tesztek Playwright-munkaterületeken való futtatásához.

   Az alábbi lépések a GitHub Actions vagy az Azure Pipelines munkafolyamat-módosításait ismertetik. Hasonlóképpen futtathatja a Playwright-teszteket a Playwright CLI használatával más CI-platformokon is.

   GitHub-műveletek

   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 Playwright Workspaces
             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 -- 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
   

   Azure-folyamatok

   - task: UseDotNet@2
     inputs:
       packageType: 'sdk'
       version: '8.x'
       installationPath: $(Agent.ToolsDirectory)/dotnet
   
   - checkout: self
   
   - script: dotnet restore
     displayName: 'Restore dependencies'
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - script: dotnet build --no-restore
     displayName: 'Build'
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN) # Not recommended, use Microsoft Entra ID authentication. 
   
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service using Microsoft Entra ID.
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         dotnet test -- NUnit.NumberOfTestWorkers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Mentse és véglegesítse a módosításokat.

   A CI-munkafolyamat aktiválásakor a Playwright-tesztek a Playwright-munkaterületen futnak a felhőben üzemeltetett böngészőkben, 20 párhuzamos feldolgozó között. Az eredmények közzé lesznek téve a szolgáltatásban, és megtekinthetők az Azure Portalon.

Figyelmeztetés

A Playwright-munkaterületek esetén a díjak a felhasznált teljes tesztpercek száma alapján kerülnek felszámításra. Ha Ön első felhasználó, vagy elsőként kezdi meg az ingyenes próbaverziót, előfordulhat, hogy a teljes tesztcsomag helyett egyetlen tesztet futtat, hogy elkerülje az ingyenes tesztpercek kimerítését.

Miután ellenőrzi, hogy a teszt sikeresen lefut-e, fokozatosan növelheti a tesztterhelést, ha további teszteket futtat a szolgáltatással.

A szolgáltatással egyetlen tesztet futtathat a következő parancssor használatával:

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

Tesztfuttatások és eredmények megtekintése

A playwright minden tesztfuttatáshoz gyűjthet olyan részletes tesztösszetevőket, mint a naplók, a nyomkövetések és a képernyőképek. A CI-folyamat tesztösszetevőinek megtekintéséhez tekintse meg a Playwright dokumentációját.

Kapcsolódó tartalom

Sikeresen beállított egy folyamatos, végpontok közötti tesztelési munkafolyamatot a Playwright-tesztek nagy léptékű futtatásához a felhőalapú böngészőkben.

• Hozzáférés biztosítása a felhasználóknak a munkaterülethez

• Munkaterületek kezelése