Øvelse: Dekonstruer en dramatikertest

Fuldført

Lad os nu dykke dybere ned i specifikationen og konfigurationen af playwright-test. Åbn det projekt, vi oprettede i det forrige afsnit i din foretrukne kodeeditor (vi anbefaler Visual Studio Code, som er det, vi bruger i dette modul), og udforsk de filer, der er installeret af Playwright.

Om testkonfiguration

Lad os starte med at lære om testkonfiguration af playwright.

• Filen playwright.config.ts definerer standardkonfigurationen for Test Runner.
• TestConfig-API'en beskriver de tilgængelige konfigurationsegenskaber til tilpasning.
• Kommandolinjegrænsefladen Playwright Test giver dig mulighed for at tilsidesætte konfigurationsegenskaberne eller filplaceringen på kørselstidspunktet.

Lad os se, hvordan standardkonfigurationsfilen fra Playwright (første installation) ser ud. Følgende playwright.config.ts kodestykke forenkles af hensyn til klarheden:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  
  use: {
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Vi kan se dokumentationen til grundlæggende konfiguration for at forstå, hvad denne kode gør:

• testDir: Mappe på øverste niveau til rekursiv søgning efter testfiler.
• fullyParallel: Beslut, om alle test i alle filer skal køre parallelt.
• forbidOnly: Afslut med fejl, hvis test.only bruges (f.eks. nyttig på CI).
• retries: Maks. antal forsøg pr. test (nyttig til web først-antagelser).
• workers: Maksimalt antal samtidige arbejdsprocesser (til parallelisering af test).
• reporter: Vælg mellem tilgængelige rapportindstillinger (indbygget og brugerdefineret).
• use: Angiv globale indstillinger for alle test (kan tilsidesættes i projekt- eller testområdet).
• projects: Kør test i flere konfigurationer (browsere, emulatorer, indstillinger).

Kør testene af demo-todo-appen

Mappen med testeksempler indeholder test til en demo-todo-app. Først skal du kopiere denne specifikationsfil (demo-todo-app.spec.ts) og indsætte den i mappen med test .

Kør dine test:

npx playwright test

Denne gang kører Playwright test fra begge specifikationsfiler i vores testmappe.

Running 78 tests using 5 workers
  78 passed (15.4s)

To open last HTML report run:
  npx playwright show-report

Wow, det er flere test. Lad os åbne HTML-rapporten for at se, hvad der skete.

npx playwright show-report

Rapporten fortæller os, at alle test blev kørt på de tre forskellige browserprogrammer: Chromium, Firefoxog Webkit.

Du kan fjerne filen demo-todo-app.spec.tsfra testmappen .

Konfigurer projekter

Et projekt er en gruppe test, der kører med den samme konfiguration og kan bruges til at køre test på forskellige browsere og enheder. I det sidste afsnit lærte vi, hvordan du kører en test i Chromium-browseren ved at tilføje indstillingen -- project efter testkommandoen i kommandolinjegrænsefladen.

Projekter defineres i projektmatrixen i konfigurationsfilen. Playwright leveres som standard med tre projekter, der allerede er defineret: chromium, firefox og webkit. Derfor kørte vores test på alle tre browsere.

Hvert projekt har en name egenskab og en use egenskab. Indstillingen use definerer, hvad projektet skal bruge. For eksempel Desktop Chrome-enheden til chromiumprojektet.

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

I den playwright.config.ts fil i mappen learn-playwright skal du kommentere de andre projekter og kun lade chromprojektet være og derefter køre testene.

npx playwright test

Udmærket! Vi kan se, at vi nu har de to testcases kørende på et enkelt browserprojekt, hvilket giver os to testudførelser.

Running 2 tests using 2 workers
  2 passed (1.2s)

To open last HTML report run:
  npx playwright show-report

Lad os køre kommandoen show-report og se, hvordan rapporten nu kun viser os de to test i den ene browser.

Udforsk emulering

Dramatiker understøtter emulering til mobiltest. Du kan vælge enhedsprofiler fra understøttede emuleringsprofiler og tilføje dem som et nyt projekt i konfigurationsfilen.

Du vil måske bemærke, at standardkonfigurationsfilen (playwright.config.ts) har et afsnit med kommentarer til test af mobilvisningsporte. Lad os fjerne kommenteringen af projektet til Mobile Safari.

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12 Pro'] },
    },
  ],

Sådan ser profilbeskrivelsen for iPhone 12 Pro ud:

  "iPhone 12 Pro": {
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like macOS X)* *AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
    "screen": {
      "width": 390,
      "height": 844
    },

    "viewport": {
      "width": 390,
      "height": 664
    },

    "deviceScaleFactor": 3,
    "isMobile": true,
    "hasTouch": true,
    "defaultBrowserType": "webkit"
  },

Lad os køre vores test igen.

npx playwright test

Koden kører vores to test på chromium- og Mobile Safari-projekterne. Vi kan se, at vi nu har to testudførelser.

Running 4 tests using 4 workers
  4 passed

Lad os åbne rapporten for at se, hvad der skete:

npx playwright show-report

Dette tjener rapporten på en lokal server og åbner browseren til den pågældende URL-adresse.

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

Bemærk, hvordan de samme to testcases udføres, nu med chromium browser og Mobile Safari enheds emulator. Vi kan se, at emulatoren tager lidt længere tid at køre hver test sammenlignet med browsermotorerne.

Vi kan tilsidesætte de standardprofilegenskaber, der er via konfigurationsfilen playwright (global) eller i en testspecifikationsfil (lokal tilsidesættelse) – men for at prøve det, skal vi først forstå use-direktivet.

Før vi gør det, skal vi nulstille vores playwright.config.ts fil for at køre test på chromium-, firefox- og webkit-projekter. Du kan holde Mobile Safari-projektet aktivt indtil videre.

Udforsk use indstillinger

Dramatikeren har en use egenskab til at konfigurere testløberen for følgende funktioner:

• Grundlæggende: Angiv baseURL (kort til "/"-rute) og storageState (f.eks. indlæsningsgodkendelse).
• Emulering: Emulerer en ægte enhed; f.eks. mobil eller tablet.
• Netværk: Konfigurer forbindelser; Angiv f.eks. legitimationsoplysninger for HTTP-godkendelse.
• Optagelse: Hent sporinger for at hjælpe med fejlfinding eller skærmbilleder eller video.

Du kan angive disse indstillinger globalt i konfigurationsfilen (for alle test) eller lokalt kun for en bestemt test eller gruppe af test.

Hvis du vil slå sporinger til og tage et skærmbillede af vores projekter, skal use vi bruge funktionen Optagelse. Det giver os mulighed for at få en forståelse af, hvad der sker i testkørsel, på systemniveau. Opdater objektet på øverste niveau use i playwright.config.ts på følgende måde:

export default defineConfig({
  testDir: './tests',
  ..
  use: {
    trace: 'on',
    screenshot: 'on',
  },
  ..
});

Lad os køre testen igen.

npx playwright test

Bemærk, hvordan den samlede tid, det tog at køre testene, steg drastisk. Aktivering af sporinger og optagelsesmedier er tidskrævende handlinger og bør bruges efter eget skøn – typisk for at hjælpe med fejlfinding af problemer.

Running 4 tests using 3 workers
  4 passed

Lad os åbne HTML-rapporten for at se, hvad der skete.

npx playwright show-report

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

Vælg en linje for at få vist denne test i detaljer.

Det er dyrt at aktivere indstillinger som optagelse, så brug efter eget skøn. for eksempel til fejlfinding på CI.

Lad os se på den detaljerede visning af en af vores test ved hjælp af det chromium projekt som defineret i vores konfigurationsfil.

1. Detaljevisningen indeholder et skærmbillede (fra page.goto). Dette er nyttigt til test af visuel regression.

   

2. Det vigtigste er, at vi får et link til en sporing til vores test. Hvis du vil åbne sporingen, skal du vælge sporingslinket i listevisningen eller billedet af sporingen i detaljevisningen af testen.

   

3. Sporingen giver os et detaljeret overblik over vores test. Herfra kan vi nemt gennemgå hver handling og udforske netværksanmodningerne, konsollen og endda åbne DOM-snapshottet og undersøge det (f.eks. når der foretages fejlfinding).

   

Lad os gå tilbage til rapporten og vælge en af testene på vores Mobile Safari-projekt. Detaljesiden for mobilprojektet afspejler den emulerede profilvisning, hvor vi igen kan udforske sporingen for vores emulerede test.

Det anbefales ikke at aktivere sporinger for hver testkørsel for produktionskørsler. Lad os ændre konfigurationen tilbage for at køre sporinger på det første forsøg på en mislykket test. På den måde har vi en sporing, der kan hjælpe med at foretage fejlfinding af problemet, hvis vores test mislykkes på CI.

Lad os også fjerne skærmbilledeindstillingen, da vi ikke har brug for det i øjeblikket.

export default defineConfig({
  testDir: './tests',
  ..
  use: {
    trace: 'on-first-retry',
  },
  ..
});

Vi har dækket meget her og har brug for at komme videre. Men som en udfordring for dig selv kan du prøve nogle af de andre use muligheder og køre test for at se, hvordan udførelse og rapportering ændres. Prøv f.eks. at efterligne et dark farveskema eller ændre viewport for at tilsidesætte standarderne for enhedsprofilen.

Du har lært meget om testkonfiguration. Lad os nu udforske Testspecifikation.