Øvelse: Brug af dramatiker i Visual Studio Code

Fuldført

I det forrige afsnit gennemgik vi kernebegreber, der er relateret til konfiguration af playwright-test og playwright-testspecifikation, men vi brugte kommandolinjegrænsefladen Playwright til at udføre vores test og få vist rapporter.

Hvad nu, hvis vi kunne gøre det i vores Visual Studio Code-miljø og have en mere visuel interaktionsproces til oprettelse, kørsel og fejlfinding af vores test?

Med Playwright Test for Visual Studio Code Extension får du en enestående udvikleroplevelse og nogle unikke værktøjsfunktioner , der kan gøre det til din foretrukne måde at interagere med Playwright Test-løberen på. Lad os gå ind og få en rundvisning.

Introduktion

Dokumentationen til Playwright indeholder et omfattende selvstudium med gennemgangen af videoen, som vi anbefaler, at du ser på din egen tid. I denne lektion forsøger vi at gennemgå en delmængde af disse øvelser for at gøre dig fortrolig med brugen.

]

Installér dramatikerudvidelse

Installér udvidelsen fra Visual Studio Code Marketplace. Når det er installeret, skal du se et bægerikon i venstre side af visual Studio Code-vinduet som vist på skærmbilledet. Bemærk, hvordan udvidelsen automatisk registrerer og indsamler testspecifikationerne i projektet.

Kør test (uden hoved)

Hvis du vil køre test uden hoved (intet browservindue), skal du sørge for, at indstillingerne Vis browser og Vis sporingsfremviser ikke er markeret. Vælg den grønne afspilningsknap på linje 3 i filen example.spec.ts for at køre den første test. Du kan også vælge de grå afspilningsknapper på margenteksten Test explorer for at køre alle test i filen eller for at køre en bestemt test.

Når du har kørt dine test, åbner fanen Testresultater et vindue, hvor du kan se hele oversigten over udførelser af test. Du kan også analysere ned i en test og vælge Kør test for at køre den pågældende test igen.

Vis browser (overskrift)

Hvis du vil køre i overskriftstilstand , hvilket betyder, at du kører dine test med et browservindue åbent, kan du markere afkrydsningsfeltet Vis browser , før du kører testene.

Dramatiker er en meget hurtig bruger, hvilket kan gøre det svært at holde styr på, hvad der sker i testen, når du bruger Vis browser. Vi anbefaler, at du bruger indstillingen Vis sporingsfremviser til fejlfinding.

Vis sporingsfremviser (overskrift)

Markér afkrydsningsfeltet Vis sporingsfremviser , og vælg den grønne afspilningsknap for den anden test. Dette starter vinduet sporingsfremviser, som viser dig en visuel repræsentation af udførelse af testen.

Øverst kan du se en tidslinje for testen, som du kan holde markøren over for at se browserens tilstand. Hvis du vil vælge et bestemt tidsinterval, du vil fokusere på, skal du vælge og trække tidslinjen.

I venstre margentekst kan du se de handlinger, der blev udført under udførelsen af testen. Hvis du vælger handlingen locator.click , får du vist en rød prik på knappen Kom i gang i DOM-snapshottet.

Derefter skal du vælge antagelsen expect.toBeVisible , hvorefter du kan se, at vores DOM-snapshot er ændret, så siden Installation vises med et fremhævning på overskriften, som vi hævder. Over DOM-snapshottet kan du vælge knapperne Før og Efter for at se DOM-tilstanden før og efter, at handlingen blev udført.

Du kan åbne DOM-snapshottet i et separat vindue ved at vælge pop ud-ikonet i øverste højre hjørne. Det kan være nyttigt, hvis du vil undersøge DOM under fejlfinding af din test.

Når du taler om fejlfinding, kan du også vælge en lokalisering fra DOM-snapshottet ved at vælge knappen Vælg Locator i nederste panel. Hold derefter over elementer på DOM-snapshottet for at se lokalisering for det pågældende element. Hvis du vælger et element, føjes det til feltet Locator nederst i sporingsfremviseren, hvor du kan redigere det, før du kopierer det til udklipsholderen.

Du er velkommen til selv at udforske resten af funktionerne i sporingsfremviseren, f.eks. fanerne Opkald, Konsol, Netværk og Kilde .

Fejlfindingstest

I forbindelse med fejlfinding anbefaler vi, at du kører dine test med indstillingen Vis sporingsfremviser og bruger sporingen af din test for bedre at forstå, hvad der sker.

Men med udvidelsen Visual Studio Code kan du også foretage fejlfinding af dine test direkte i Visual Studio Code, se fejlmeddelelser, oprette pausepunkter og foretage direkte fejlfinding af dine test. Få mere at vide i dokumentationen , eller se følgende video for at få en fornemmelse af support til fejlfinding.

Generér test

CodeGen genererer dine test for dig, når du udfører handlinger i browseren, hvilket gør det til den nemmeste måde at komme i gang med at oprette test til komplekse arbejdsprocesser.

Hvis du vil generere en test, skal du vælge knappen Optag ny i testmargenteksten i Visual Studio Code. Dette åbner et browservindue, hvor du kan udføre handlinger, der registreres og omdannes til en test. Du vil også bemærke, at der oprettes en ny fil i tests mappen med den genererede test.

Skriv en URL-adresse i browservinduet, og begynd at udføre handlinger, som en bruger ville gøre. Du kan se de handlinger, der registreres i testfilen i VS Code.

Lad os genskabe den enkle test, vi kørte tidligere, ved at gå til webstedet Playwright og vælge knappen Kom i gang . Vi kan derefter vælge ikonet Assert Visibility på værktøjslinjen Codegen og vælge overskriften Installation for at bekræfte, at den er synlig.

Få mere at vide om generering af test i følgende video.

Næste trin

I dette afsnit har du lært, hvordan du bruger udvidelsen Visual Studio Code til at finde og køre test, og hvordan du arbejder med sporingsfremviseren for at få en mere visuel oplevelse til fejlfinding af test.

Du har også lært, hvordan Visual Studio Code indeholder mere omfattende værktøjer til generering af test ved hjælp af funktionerne Optag en ny test, Vælg Locator og Optag ved markør. Nu er det tid til at anvende dine læringer om grundlæggende funktioner i Playwright i et guidet projekt for at oprette en specifikation af test fra ende til anden til vores eksempelapp.