Programmering

Test af webapplikationer med Node.js og Playwright

Moderne applikationsudvikling afhænger af automatiseret test ved hjælp af testrammer for at sikre, at koden er klar til at gå ind i applikationspakker og ud til slutbrugere. For at få mest muligt ud af test er test skrevet før kode og kan integreres i kildekontrol- og CI / CD-rørledninger (kontinuerlig integration / kontinuerlig implementering). Test skal være overalt i din udviklingsproces. Har du brug for at flette en pull-anmodning? Test koden. Har du brug for at forpligte dig til en filial? Test koden.

Men der er et område, hvor test er svært, især når det skal automatiseres. Jeg taler om behovet for at interagere med og teste dynamiske brugergrænseflader. Test af webapplikationer er en kompleks proces. Værktøjer som Selen og webdriver er nøgleelementer til automatisering af sideindhold og for at sikre, at du tester både sideelementer og applikationen som helhed. De er vigtige, hvis du bruger hovedløse browsere i en applikation; Jeg har brugt et sæt Python-scripts i en Twitter-applikation bygget op omkring Selenium og Chromiums webdriver-support til at automatisere at tage skærmbilleder fra en flysporingsapplikation.

Introduktion til Playwright, Microsofts ramme om webtest

Selen og webdriver er ikke de eneste værktøjer til at oprette end-to-end-tests til moderne webapplikationer og browsere. Et populært alternativ er Googles Puppeteer, der håndterer både at sende klik til browsere ved hjælp af de samme teknikker som Chrome's webdriverværktøj og få adgang til fejlretningsoplysninger via de velkendte udviklerværktøjers API'er. En nyere deltager i browserens testliga, Playwright udvikles af Microsoft som et open source-projekt hostet på GitHub.

Playwright tager den grundlæggende dukketeater-arkitektur og bevæger den mere i retning af Selenium, tilføjer en webautomatiseringsramme og forbedrer, hvordan Puppeteer interagerer med sideindhold. Det er designet til hurtigt og nemt at installere ved hjælp af velkendt npm-syntaks ved hjælp af JavaScript til at oprette automatisering og test af webapplikationer. Det fungerer med flere browsere med understøttelse af Chromium-baserede browsere som Edge samt Firefox og Apples WebKit.

Der er en vigtig besked på Playwrights liste over understøttede browsere: Du kan ikke bruge den med Trident- eller EdgeHTML-baserede browsere. Det er ikke overraskende. Microsoft har forpligtet sig til sin Chromium-filial i sin nye Edge, og både den gamle Edge og Internet Explorer er tæt på slutningen af ​​livet. Hvis du vil bruge Playwright til test, træffer du en beslutning om kun at understøtte mainstream moderne browsere, så du bliver nødt til at informere brugerne om, hvad der er i vente for fremtidige udgivelser af eventuelle webapplikationer, du bygger og understøtter.

Test af internettet med Playwright

Evnen til at krydse platformstest på alle de store browsere med det samme sæt scripts er vigtig, ligesom understøttelse af mobile versioner af websteder (da de to vigtigste mobile platforme bruger varianter af deres desktop-browsere Playwright emulerer i øjeblikket mobilvisninger i desktop-browsere ). Det er også vigtigt at understøtte hovedløse tests, hvor du ikke gengiver en browser-brugergrænseflade, men i stedet arbejder med den genererede dokumentobjektmodel (og en skygge-DOM, hvis du bruger moderne browserfunktionalitet og teknologier såsom webkomponenter).

Du kan bruge Playwright til at automatisere en kørende browser på udviklingsdesktops for at inspicere fejl som en del af fejlfinding af applikationer, hvilket sikrer, at du konsekvent løber gennem alle dine teststier, mens du optager yderligere ydeevneoplysninger og ser efter usporede UI-fejl. Alternativt kan den konfigureres som en del af en GitHub-handling til at teste ny kode som en del af en commit eller en fusion, hvilket automatiserer, hvad der ellers kunne være en kompleks manuel test.

Opbygning og kørsel af Playwright-tests

Kom godt i gang med Playwright er lige så let som at oprette et nyt Node.js-projekt. Først skal Node.js installeres på dine testenheder. Da Playwright bruger Node, kan du køre det på udviklings-pc'er eller på servere i din CI / CD-pipeline, hvilket gør det til en del af en GitHub-handling, der kan bruges i hele din softwareudviklingsproces. Alt hvad du behøver er en enkelt npm-kommando, der installerer Playwright-pakken samt binærfilerne til alle understøttede browsere. Når installationen er gennemført, kan du oprette automatiseringsskripter ved hjælp af JavaScript eller TypeScript til at kalde Playwright API'er. Disse er alle asynkrone opkald, så brug afventende udsagn til at styre deres løfter.

Resultatet er en meget klar måde at oprette scripts på, startende med at åbne en headless browserinstans og derefter navigere til en side, før du interagerer med sideinstanser. Det er en god idé at indledningsvis oprette tests med fulde browsere, så du kan følge, hvordan Playwright interagerer med din applikation. En nyttig slow-mo-mulighed kører interaktioner med en mere menneskelig hastighed, hvilket gør det lettere at visualisere og administrere tests, der kører i desktop-browsere. Når en test er blevet fejlagtigt og kører godt, kan du flytte den til hovedløs tilstand og derefter køre den som en del af en CI / CD-implementering.

Playwright inkluderer et CLI-værktøj, der kan registrere interaktioner med websteder, der automatisk genererer den JavaScript, der er nødvendig for at køre tests. Codegen-indstillingen er et nyttigt værktøj til hurtigt at komme i gang med Playwright og viser dig den kode, der interagerer med sideelementer, som du derefter kan bruge som en skabelon til dine egne tests, kopiere og redigere genereret kode efter behov. TypeScript-understøttelse kan hjælpe med at skrive mere komplekse tests ved hjælp af stærk skrivning til at styre variabler.

Arbejde med webapplikationer i Playwright

En af Playwrights mere nyttige funktioner er dens understøttelse af browserkontekster. Disse giver dig mulighed for at køre isolerede handlinger i en enkelt browserinstans, så du kan oprette flere sammenhænge til at teste flere interaktioner på samme tid. Inden for hver kontekst opretter du sider, der bedst betragtes som faner i en desktop-browser. Sider understøtter deres egne klikinteraktioner og kan overvåges parallelt. Når du er på en side, kan du bruge forskellige måder at finde indhold til at interagere med ved hjælp af CSS- eller XPath-vælgere, HTML-attributter eller tekst. Hvis du er fortrolig med Selen, bør du finde navigering gennem sider, der er velkendte, med den ekstra mulighed for at vente på, at en side er fuldt indlæst, eller at dynamisk indhold gengives i en enkelt-sides webapplikation.

Du kan bruge evalueringsfunktioner til at sende parametre til og fra websider til JavaScript-kode, der kører i sidekonteksten. Resultaterne returneres til en test script-løber i Node.js til analyse, hvilket giver dig de nødvendige værktøjer til at bestå eller fejle tests. Playwright arbejder med F12-browserudviklingsværktøjerne, så det kan gøre meget mere end blot at interagere med sideindhold. Det kan overvåge netværkstrafik, så du kan bruge den til blandt andet at teste både godkendelse og download af filer. Det kan få adgang til browserkonsollen og registrere fejl, der muligvis ikke umiddelbart er synlige på en gengivet side: for eksempel sporing af CSS-problemer eller JavaScript-biblioteker, der ikke kan indlæses.

Der er meget i Playwright, og det er et overbevisende alternativ til Selenium til test af browserapplikationer. Når Microsoft løbende tilføjer F12-udviklerværktøjerne i Edge, vil det være interessant at se Playwright tilføje nye funktioner, der udvider dine muligheder for at teste browserhostede applikationer og progressive webapps sammen med traditionelle webapplikationer.

Ud over JavaScript: Test i Python og C #

Microsoft udgav for nylig en ny version af Playwright til udviklere, der foretrækker at oprette tests i Python i stedet for JavaScript. Det er en nyttig mulighed, da mange eksisterende Selen-testrammer er Python-baserede, og det giver dig mulighed for at linke din testkode til analytiske pakker til mere detaljeret resultatanalyse ved hjælp af Pythons rige økosystem med statistiske applikationer og værktøjer.

Playwright inkluderer sprogbindinger til C #, så du kan bringe Playwright ind i eksisterende testrammer til ASP.NET eller andre .NET-værktøjer. Du skal ikke være nødt til at ændre den måde, du arbejder på for at få nye værktøjer, og Microsoft lover yderligere sprogbindinger til Java og Ruby. Der er udsigten til mere i fremtiden, da Playwright-dokumentationen siger, at den er designet til at understøtte bindinger til ethvert sprog. Med al koden på GitHub er der mulighed for at oprette dine egne bindinger til dit valgte sprog og indsende dem som en pull-anmodning til projektet.