Programmering

Testing av webapplikasjoner med Node.js og Playwright

Moderne applikasjonsutvikling avhenger av automatisert testing, ved hjelp av testrammer for å sikre at koden er klar til å gå inn i applikasjonspakker og ut til sluttbrukere. For å få mest mulig ut av testingen blir testene skrevet før koden og kan integreres i kildekontroll og CI / CD (kontinuerlig integrasjon / kontinuerlig distribusjon) rørledninger. Tester bør være overalt i utviklingsprosessen. Trenger du å slå sammen en pull-forespørsel? Test koden. Trenger du å forplikte deg til en filial? Test koden.

Men det er ett område der testing er vanskelig, spesielt når det må automatiseres. Jeg snakker om behovet for å samhandle med og teste dynamiske brukergrensesnitt. Nettapplikasjonstesting er en kompleks prosess. Verktøy som Selen og webdriver er nøkkelelementer for å automatisere sideinnhold og for å sikre at du tester både sideelementer og applikasjonen som helhet. De er viktige hvis du bruker hodeløse nettlesere i et program; Jeg har brukt et sett med Python-skript i en Twitter-applikasjon bygget rundt Selenium og Chromiums webdriver-støtte for å automatisere å ta skjermbilder fra et flysporingsprogram.

Vi presenterer Playwright, Microsofts rammeverk for nettprøving

Selen og webdriver er ikke de eneste verktøyene for å bygge end-to-end-tester for moderne webapplikasjoner og nettlesere. Et populært alternativ er Googles Puppeteer, som håndterer både sending av klikk til nettlesere ved hjelp av de samme teknikkene som Chrome's webdriver-verktøy, og tilgang til feilsøkingsinformasjon via de kjente utviklerverktøyenes API-er. En nyere aktør i nettleserens testliga, Playwright blir utviklet av Microsoft som et open source-prosjekt som er vert på GitHub.

Playwright tar den grunnleggende dukketeaterarkitekturen og beveger den mer i retning av Selenium, legger til et rammeverk for nettautomatisering og forbedrer hvordan Puppeteer samhandler med sideinnhold. Den er designet for å installeres raskt og enkelt ved hjelp av kjent npm-syntaks, ved hjelp av JavaScript for å bygge automatisering og testing av webapplikasjoner. Den fungerer med flere nettlesere, med støtte for Chromium-baserte nettlesere som Edge, samt Firefox og Apples WebKit.

Det er en viktig melding i Playwrights liste over støttede nettlesere: Du kan ikke bruke den med Trident- eller EdgeHTML-baserte nettlesere. Det er ikke overraskende. Microsoft har forpliktet seg til sin Chromium-filial i sin nye Edge, og både den gamle Edge og Internet Explorer er nær livets slutt. Hvis du skal bruke Playwright til testing, tar du en beslutning om å støtte bare vanlige moderne nettlesere, så du må informere brukerne om hva som er i vente for fremtidige utgivelser av nettprogrammer du bygger og støtter.

Testing av nettet med Playwright

Evnen til å teste plattformer på alle de store nettleserne med samme sett med skript er viktig, det samme er støtte for mobilversjoner av nettsteder (ettersom de to viktigste mobile plattformene bruker varianter av stasjonære nettlesere Playwright emulerer for øyeblikket mobilvisninger i stasjonære nettlesere ). Også viktig er støtte for hodeløse tester, der du ikke gjengir et nettlesergrensesnitt, men i stedet arbeider med den genererte dokumentobjektmodellen (og en skyggedom hvis du bruker moderne nettleserfunksjonalitet og teknologier som webkomponenter).

Du kan bruke Playwright til å automatisere en løpende nettleser på utviklingsdesktops for å inspisere feil som en del av feilsøking av applikasjoner, slik at du konsekvent løper gjennom alle testbanene dine mens du registrerer ytterligere ytelsesinformasjon og ser etter usporede UI-feil. Alternativt kan den settes opp som en del av en GitHub-handling for å teste ny kode som en del av en commit eller en fusjon, og automatisere det som ellers kan være en kompleks manuell test.

Bygg og kjører Playwright-tester

Å komme i gang med Playwright er like enkelt som å sette opp et nytt Node.js-prosjekt. Først må Node.js installeres på testenhetene dine. Siden Playwright bruker Node, kan du kjøre den på utviklings-PC-er eller på servere i CI / CD-rørledningen din, noe som gjør den til en del av en GitHub-handling som kan brukes gjennom hele programvareutviklingsprosessen. Alt du trenger er en enkelt npm-kommando, som installerer Playwright-pakken samt binærfiler for alle støttede nettlesere. Når installasjonen er fullført, kan du opprette automatiseringsskript ved hjelp av JavaScript eller TypeScript for å ringe Playwright APIer. Dette er alle asynkrone samtaler, så bruk ventende uttalelser for å håndtere løftene.

Resultatet er en veldig klar måte å bygge skript på, og starter med å åpne en hodeløs nettleserinstans, og deretter navigere til en side før du samhandler med sideinstanser. Det er lurt å først lage tester med fulle nettlesere, slik at du kan følge hvordan Playwright samhandler med applikasjonen din. Et nyttig slow-mo-alternativ kjører interaksjoner med en mer menneskelig hastighet, noe som gjør det lettere å visualisere og administrere tester som kjører i stasjonære nettlesere. Når en test har blitt feilsøkt og kjører bra, kan du flytte den til hodeløs modus og deretter kjøre den som en del av en CI / CD-implementering.

Playwright inkluderer et CLI-verktøy som kan registrere interaksjoner med nettsteder, og automatisk generere JavaScript som trengs for å kjøre tester. Codegen-alternativet er et nyttig verktøy for raskt å komme i gang med Playwright, og viser deg koden som samhandler med sideelementer som du deretter kan bruke som en mal for dine egne tester, kopiere og redigere generert kode etter behov. TypeScript-støtte kan hjelpe til med å skrive mer komplekse tester, ved hjelp av sterk skriving for å håndtere variabler.

Arbeider med webapplikasjoner i Playwright

En av Playwrights mer nyttige funksjoner er støtten til nettleserkontekster. Disse lar deg kjøre isolerte handlinger i en enkelt nettleserforekomst, slik at du kan sette opp flere sammenhenger for å teste flere interaksjoner samtidig. Inne i hver kontekst oppretter du sider, som er best tenkt på som faner i en stasjonær nettleser. Sider støtter sine egne klikkinteraksjoner og kan overvåkes parallelt. Når du er på en side, kan du bruke forskjellige måter å finne innhold å samhandle med, ved å bruke CSS- eller XPath-velgere, HTML-attributter eller tekst. Hvis du er kjent med Selen, bør du finne navigering gjennom sider som er kjent, med den ekstra muligheten til å vente på at en side skal lastes inn helt eller på at dynamisk innhold skal gjengis i en enkeltsides webapplikasjon.

Du kan bruke evalueringsfunksjoner til å sende parametere til og fra websider til JavaScript-kode som kjører i sidekonteksten. Resultatene returneres til en testskriptløper i Node.js for analyse, og gir deg verktøyene som trengs for å bestå eller mislykkes tester. Playwright fungerer med F12-nettleserutstyret, slik at det kan gjøre mye mer enn å bare samhandle med sideinnhold. Den kan overvåke nettverkstrafikk, slik at du kan bruke den til å teste både autentisering og nedlasting av filer, blant annet. Den har tilgang til nettleserkonsollen og registrerer feil som kanskje ikke er umiddelbart synlige på en gjengitt side: for eksempel sporing av CSS-problemer eller JavaScript-biblioteker som ikke kan lastes inn.

Det er mye i Playwright, og det er et overbevisende alternativ til Selenium for testing av nettleserprogrammer. Med Microsoft kontinuerlig å legge til F12-utviklerverktøyene i Edge, vil det være interessant å se Playwright legge til nye funksjoner som utvider alternativene dine for å teste nettleserverdede applikasjoner og progressive webapper sammen med tradisjonelle webapplikasjoner.

Utover JavaScript: Testing i Python og C #

Microsoft ga nylig ut en ny versjon av Playwright for utviklere som foretrekker å bygge tester i Python i stedet for JavaScript. Det er et nyttig alternativ, ettersom mange eksisterende Selen-testrammer er Python-baserte, og det lar deg koble testkoden din til analytiske pakker for mer detaljert resultatanalyse ved hjelp av Pythons rike økosystem med statistiske applikasjoner og verktøy.

Playwright inkluderer språkbindinger for C #, slik at du kan bringe Playwright inn i eksisterende testrammer for ASP.NET eller andre .NET-verktøy. Du trenger ikke å endre måten du jobber for å få inn nye verktøy, og Microsoft lover flere språkbindinger for Java og Ruby. Det er utsiktene til mer i fremtiden, ettersom Playwright-dokumentasjonen sier at den er designet for å støtte bindinger for ethvert språk. Med all koden på GitHub er det muligheten til å lage dine egne bindinger for ditt testspråk du velger, og sende dem inn som en pull-forespørsel til prosjektet.

$config[zx-auto] not found$config[zx-overlay] not found