Rövid útmutató: Folyamatos, végpontok közötti tesztelés beállítása a Microsoft Playwright tesztelési előzetes verziójával

Ebben a rövid útmutatóban a Microsoft Playwright Testing Preview szolgáltatással konfigurálja a folyamatos, teljes körű tesztelést annak ellenőrzésére, hogy a webalkalmazás megfelelően fut-e különböző böngészőkben és operációs rendszereken minden kód véglegesítésével. 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 egy CI-munkafolyamattal rendelkezik, amely a Playwright tesztcsomagot nagy léptékben futtatja a Microsoft Playwright Testing használatával.

Fontos

A Microsoft Playwright Testing jelenleg előzetes verzióban érhető el. A bétaverzióban, előzetes verzióban vagy egyébként még nem általánosan elérhető Azure-szolgáltatásokra vonatkozó jogi feltételekért tekintse meg a Microsoft Azure Előzetes verzió kiegészítő használati feltételeit.

Előfeltételek

• An Azure account with an active subscription. Ha még nincs Azure-előfizetése, kezdés előtt hozzon létre egy ingyenes fiókot.

• Microsoft Playwright Testing-munkaterület. Végezze el a rövid útmutatót: a munkaterület létrehozásához futtassa a playwright-teszteket nagy méretekben .

GitHub Actions

• 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

Azure Pipelines

• Egy Azure DevOps-szervezet és -projekt. Ha nem rendelkezik Azure DevOps-szervezettel, ingyenesen létrehozhat egyet.
• Folyamatdefiníció. Ha segítségre van szüksége az Azure Pipelines használatának megkezdéséhez, tekintse meg az első folyamat létrehozását.

Szolgáltatáselérési jogkivonat konfigurálása

A Microsoft Playwright Testing hozzáférési jogkivonatokkal engedélyezi a felhasználók számára, hogy playwright-teszteket futtasson a szolgáltatással. A Szolgáltatás-hozzáférési jogkivonatot a Playwright portálon hozhatja létre, majd megadhatja a hozzáférési jogkivonatot a szolgáltatáskonfigurációs fájlban.

Hozzáférési jogkivonat létrehozásához és CI-munkafolyamat-titkos kódként való tárolásához hajtsa végre a következő lépéseket:

1. Jelentkezzen be a Playwright portálra az Azure-fiókjával.

2. Válassza a munkaterület beállításai ikont, majd lépjen az Access-jogkivonatok lapra.

   

3. Válassza az Új jogkivonat létrehozása lehetőséget egy új hozzáférési jogkivonat létrehozásához a CI-munkafolyamathoz.

4. Adja meg a hozzáférési jogkivonat adatait, majd válassza a Jogkivonat létrehozása lehetőséget.

   

   

5. Tárolja a hozzáférési jogkivonatot egy CI-munkafolyamat titkos kódjában, hogy ne adja meg a jogkivonatot tiszta szövegben a munkafolyamat-definícióban:

   GitHub Actions

   1. Nyissa meg a GitHub-adattárat, és válassza a Gépház> Secrets és változók>műveletek lehetőséget.

   2. Válassza az Új tárház titkos kódját.

   3. Adja meg a titkos kód részleteit, majd válassza a Titkos kód hozzáadása lehetőséget a CI/CD-titkos kód létrehozásához.

      Paraméter	Érték
      Név	PLAYWRIGHT_Standard kiadásRVICE_ACCESS_TOKEN
      Érték	Illessze be a korábban másolt munkaterület-hozzáférési jogkivonatot.

   4. Válassza az OK gombot a munkafolyamat titkos kódjának létrehozásához.

   Azure Pipelines

   1. Nyissa meg az Azure DevOps-projektet.

   2. Lépjen a Folyamatok lapra, válassza ki a megfelelő folyamatot, majd válassza a Szerkesztés lehetőséget.

   3. Keresse meg a folyamat változóit .

   4. Adjon hozzá egy új változót.

   5. Adja meg a változó részleteit, majd válassza a Titkos kód hozzáadása lehetőséget a CI/CD-titkos kód létrehozásához.

      Paraméter	Érték
      Név	PLAYWRIGHT_Standard kiadásRVICE_ACCESS_TOKEN
      Érték	Illessze be a korábban másolt munkaterület-hozzáférési jogkivonatot.
      Az érték titokban tartása	Az érték ellenőrzése

   6. Kattintson az OK gombra, majd a Mentés gombra a munkafolyamat titkos kódjának létrehozásához.

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 a Playwright portálra az Azure-fiókjával.

2. A munkaterület kezdőlapján válassza a Beállítási útmutató megtekintése lehetőséget.

   Tipp.

   Ha több munkaterülete van, a lap tetején található munkaterület nevére kattintva válthat másik munkaterületre, majd válassza az Összes munkaterület kezelése lehetőséget.

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	Value
   PLAYWRIGHT_Standard kiadásRVICE_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 még nem konfigurálta a Playwright-teszteket a felhőalapú böngészőkben való futtatáshoz, 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:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

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

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. A CI-munkafolyamat definíciójának megnyitása

2. Adja hozzá a következő lépéseket a forgatókönyv-tesztek Microsoft Playwright Testingben 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 Actions

   - 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:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     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 Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       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 Microsoft Playwright Testing munkaterületen futnak a felhőalapú böngészőkben, 20 párhuzamos feldolgozó között.

Figyelmeztetés

A Microsoft Playwright Testing használatával a teljes tesztpercek száma alapján kell fizetnie. 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

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