Rövid útmutató: Végpontok közötti tesztek futtatása nagy méretekben a Microsoft Playwright tesztelési előzetesével

Ebben a rövid útmutatóban megtudhatja, hogyan futtathatja a Playwright-teszteket magas párhuzamos felhőbeli böngészőkkel a Microsoft Playwright Testing Preview használatával. A felhőinfrastruktúra használatával ellenőrizheti az alkalmazást több böngészőben, eszközön és operációs rendszeren.

A rövid útmutató elvégzése után egy Microsoft Playwright Testing-munkaterülettel rendelkezik a playwright-tesztek nagy méretekben történő futtatásához.

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.
• Az Azure-fiókhoz tulajdonosi, közreműködői vagy klasszikus rendszergazdai szerepkörre van szükség.
• Egy drámaíró projekt. Ha nem rendelkezik projektel, hozzon létre egyet a Playwright első lépések dokumentációjában, vagy használja a Microsoft Playwright Testing mintaprojektet.

Create a workspace

A Playwright-tesztek felhőalapú böngészőkben történő nagy léptékű futtatásához először létre kell hoznia egy Microsoft Playwright Testing-munkaterületet a Playwright portálon.

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

2. Ha már van munkaterülete, válasszon ki egy meglévő munkaterületet, és lépjen a következő lépésre.

   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. Ha még nincs munkaterülete, válassza az + Új munkaterület lehetőséget, majd adja meg a következő információkat:

   Mező	Description
   Munkaterület neve	Adjon meg egy egyedi nevet a munkaterület azonosításához. A név csak alfanumerikus karakterekből állhat, és hossza 3 és 64 karakter között lehet.
   Azure-előfizetés	Válassza ki a Microsoft Playwright Tesztelési munkaterülethez használni kívánt Azure-előfizetést.
   Region	Válasszon ki egy földrajzi helyet a munkaterület üzemeltetéséhez. Ez az a hely, ahol a tesztfuttatási adatokat a munkaterület tárolja.

   

4. Válassza a Munkaterület létrehozása lehetőséget a munkaterület létrehozásához az előfizetésben.

   A munkaterület létrehozása során létrejön egy új erőforráscsoport és egy Microsoft Playwright Testing Azure-erőforrás az Azure-előfizetésben.

Amikor a munkaterület létrehozása befejeződött, a rendszer átirányítja a beállítási útmutatóba.

Hozzáférési jogkivonat létrehozása a szolgáltatáshitelesítéshez

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. Először létrehoz egy szolgáltatás-hozzáférési jogkivonatot a Playwright portálon, majd egy környezeti változóban tárolja az értéket.

A hozzáférési jogkivonat létrehozásához hajtsa végre a következő lépéseket:

1. A munkaterület beállítási útmutatójában, a Hozzáférési jogkivonat létrehozása területen válassza a Jogkivonat létrehozása lehetőséget.

   

2. Másolja ki a munkaterület hozzáférési jogkivonatát.

   Egy későbbi lépésben szüksége lesz a hozzáférési jogkivonat értékére a környezet konfigurálásához.

   

A szolgáltatásrégió végpontjának konfigurálása

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 hajtsa végre a következő lépéseket:

1. A régióvégpont hozzáadása a beállításban másolja ki a munkaterület régióvégpontját.

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

   

Saját környezet beállítása

A környezet beállításához konfigurálnia kell a PLAYWRIGHT_SERVICE_ACCESS_TOKEN környezeti változókat PLAYWRIGHT_SERVICE_URL az előző lépésekben kapott értékekkel.

Javasoljuk, hogy a dotenv modullal kezelje a környezetet. Ezzel dotenvdefiniálja a környezeti változókat a .env fájlban.

1. Adja hozzá a modult dotenv a projekthez:

   npm i --save-dev dotenv
   

2. Hozzon létre egy .env fájlt a playwright.config.ts fájl mellett a Playwright-projektben:

   PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Ügyeljen arra, hogy a {MY-ACCESS-TOKEN} szöveg helyőrzőit {MY-REGION-ENDPOINT} cserélje le a korábban másolt értékekre.

Figyelmeztetés

Győződjön meg arról, hogy nem adja hozzá a fájlt a .env forráskódtárhoz, hogy elkerülje a hozzáférési jogkivonat értékének kiszivárgását.

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

Ha a Playwright-teszteket a Microsoft Playwright Tesztelési munkaterületén szeretné futtatni, a Playwright konfigurációs fájl mellett hozzá kell adnia egy szolgáltatáskonfigurációs fájlt is. A szolgáltatáskonfigurációs fájl a környezeti változókra hivatkozik a munkaterület végpontjának és a hozzáférési jogkivonatnak a lekéréséhez.

A szolgáltatáskonfiguráció hozzáadása a projekthez:

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 a fájlt.

A tesztek nagy méretekben való futtatása a Microsoft Playwright Testing használatával

Most már előkészítette a playwright-tesztek felhőben való futtatásának konfigurációját a Microsoft Playwright Testing használatával. A playwright parancssori felülettel futtathatja a teszteket, vagy használhatja a Playwright Test Visual Studio Code bővítményt.

Egyetlen teszt futtatása nagy léptékben

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.

Hajtsa végre az alábbi lépéseket egyetlen playwright-teszt futtatásához a Microsoft Playwright Testing használatával:

Drámaíró parancssori felülete

Ha a Playwright CLI használatával szeretné futtatni a teszteket a Microsoft Playwright Testing használatával, adja át a szolgáltatás konfigurációs fájlját parancssori paraméterként.

1. Nyisson meg egy terminálablakot.

2. Írja be a következő parancsot a Playwright-teszt távoli böngészőkben való futtatásához a munkaterületen:

   Cserélje le a {name-of-file.spec.ts} szöveges helyőrzőt a tesztspecifikációs fájl nevére.

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

   A teszt befejezése után megtekintheti a teszt állapotát a terminálban.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Ha egyetlen Playwright-tesztet szeretne futtatni a Visual Studio Code-ban a Microsoft Playwright Testing használatával, válassza ki a szolgáltatáskonfigurációs fájlt a Test Explorer nézetben. Ezután válassza ki és futtassa a tesztet a tesztek listájából.

1. Telepítse a Playwright Test Visual Studio Code bővítményt.

2. Nyissa meg a Test Explorer nézetet a tevékenységsávon.

   A tesztkezelő automatikusan észleli a Playwright-teszteket és a projekt szolgáltatáskonfigurációját.

   

3. Válassza az Alapértelmezett profil kiválasztása lehetőséget, majd válassza ki az alapértelmezett projekteket a szolgáltatáskonfigurációs fájlból.

   Figyelje meg, hogy a szolgáltatásfuttatási profilok a playwright.service.config.ts korábban hozzáadott fájlból származnak.

   Az alapértelmezett profil beállításával automatikusan futtathatja a teszteket a szolgáltatással, vagy egyszerre több Playwright-projektet is futtathat.

   

4. A tesztek listájában válassza a teszt melletti Teszt futtatása gombot a futtatáshoz.

   A teszt az alapértelmezett profilban kiválasztott projekteken fut. Ha egy vagy több projektet választott ki a szolgáltatáskonfigurációból, a teszt távoli böngészőkben fut a munkaterületen.

   

   Tipp.

   A tesztkód hibakeresése akkor is lehetséges, ha távoli böngészőkben futtatja a teszteket a Hibakeresés teszt gomb használatával.

5. A teszteredményeket közvetlenül a Visual Studio Code-ban tekintheti meg.

   

Mostantól több tesztet is futtathat a szolgáltatással, vagy futtathatja a teljes tesztcsomagot távoli böngészőkben.

Figyelmeztetés

A tesztcsomag méretétől függően előfordulhat, hogy a tesztpercekért további díjakat kell fizetnie a kiszámolt ingyenes tesztperceken túl.

Teljes tesztcsomag futtatása nagy léptékben

Most, hogy ellenőrizte, hogy egyetlen tesztet futtathat-e a Microsoft Playwright Testing használatával, nagy méretekben futtathat egy teljes Playwright-tesztcsomagot.

Hajtsa végre a következő lépéseket egy teljes playwright tesztcsomag futtatásához a Microsoft Playwright Testing használatával:

Drámaíró parancssori felülete

Ha több Playwright-tesztet vagy egy teljes tesztcsomagot futtat a Microsoft Playwright Testing használatával, parancssori paraméterként megadhatja a párhuzamos feldolgozók számát.

1. Nyisson meg egy terminálablakot.

2. Írja be a következő parancsot a Playwright tesztcsomag távoli böngészőkben való futtatásához a munkaterületen:

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

   A tesztcsomag méretétől függően ez a parancs legfeljebb 20 párhuzamos feldolgozón futtatja a teszteket.

   A teszt befejezése után megtekintheti a teszt állapotát a terminálban.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   To open last HTML report run:
   
       npx playwright show-report
   

Visual Studio Code

A Playwright tesztcsomag futtatása a Visual Studio Code-ban a Microsoft Playwright Testing használatával:

1. Nyissa meg a Test Explorer nézetet a tevékenységsávon.

2. A Tesztek futtatása gombra kattintva futtathatja az összes tesztet a Microsoft Playwright Testing használatával.

   Az összes teszt futtatásakor a rendszer az alapértelmezett profilt használja. Az előző lépésben úgy konfigurálta az alapértelmezett profilt, hogy a szolgáltatáskonfigurációból származó projekteket használjon.

   

   Tipp.

   A tesztkód hibakeresése akkor is lehetséges, ha távoli böngészőkben futtatja a teszteket a Hibakeresési tesztek gombbal.

3. Másik lehetőségként kiválaszthat egy adott szolgáltatáskonfigurációt a listából, hogy csak egy adott böngészőkonfiguráció tesztjeit futtassa.

   

4. Az összes teszteredményt megtekintheti a Teszteredmények lapon.

Tesztfuttatások megtekintése a Playwright portálon

Nyissa meg a Playwright portált a munkaterület tesztfuttatási metaadatainak és tevékenységnaplójának megtekintéséhez.

Az egyes tesztek tevékenységnaplói a következő adatokat futtatják: a teszt teljes befejezési ideje, a párhuzamos feldolgozók száma és a tesztelési percek száma.

Párhuzamos feldolgozó konfigurációjának optimalizálása

Ha a tesztek zökkenőmentesen futnak a szolgáltatással, kísérletezzen a párhuzamos feldolgozók számának módosításával annak az optimális konfigurációnak a meghatározásához, amely minimálisra csökkenti a tesztelési befejezési időt.

A Microsoft Playwright Testing használatával akár 50 párhuzamos feldolgozóval is futtathat. Számos tényező befolyásolja a projekt legjobb konfigurációját, például az ügyfélgép processzorát, memóriáját és hálózati erőforrásait, a célalkalmazás terheléskezelési kapacitását és a tesztekben végrehajtott műveletek típusát.

Megadhatja a párhuzamos feldolgozók számát a Playwright PARANCSSOR parancssorán, vagy konfigurálhatja a workers tulajdonságot a Playwright szolgáltatás konfigurációs fájljában.

További információ a tesztcsomagok befejezésének optimalizálásához szükséges optimális konfiguráció meghatározásáról.

Következő lépés

Sikeresen létrehozott egy Microsoft Playwright Testing-munkaterületet a Playwright portálon, és futtatta a Playwright-teszteket a felhőbeli böngészőkben.

Folytassa a következő rövid útmutatóval, a folyamatos, végpontok közötti tesztelés beállításához futtassa a Playwright-teszteket a CI-/CD-munkafolyamatban.

Folyamatos, végpontok közötti tesztelés beállítása CI/CD-ben