Allt om testautomatiserings-verktyget Playwright

Att hitta det perfekta testautomatiseringsverktyget är inte en lätt uppgift. Vilken typ av automationsverktyg som behövs för att anpassa sig till livscykeln för mjukvarutestning beror mycket på dess resurser, team och strategi. Så att tro att det finns ett testautomatiseringsverktyg som är det absolut bästa och passar lika bra för alla är att lura sig själv. Däremot finns flera olika populära verktyg som är trendiga just nu och som är designade för att enkelt anpassas till ditt projekt. Några exempel på de populära automationsverktygen som används i både enkla och komplexa system för att ge tillförlitlig och korrekt testkvalitet är Selenium, Appium, Katalon Studio, Cypress och Playwright.

Idag riktar vi ljuset mot ett av de senaste automationsverktygen som har visat sig vara en framgång - Playwright.

I mina tidigare projekt har jag, precis som många andra testare stött på vissa utmaningar som saktade ner frontend-automatiseringsprocessen.

• Att skriva boilerplate-kod, dvs repetitiva kod, för att ställa in webbläsarna

• Långsamma testkörningar

• Opålitliga wait-time

• Svårt att hitta selektor – tidskrävande att hitta element

• Flaky tester som passar eller failar när de vill

För att nämna några.

Det var inte förrän min fantastiska kollega introducerade mig för Playwright som automationsvärlden lyste upp för mig.

Vad är Playwright?

Playwright är ett ramverk för öppen källkod för end-to-end-testautomatisering som kommer från Puppeteer, som är node.js-baserat och underhålls av Microsoft.

I den traditionella Seleniums arkitektur skickas varje HTTP-förfrågan separat och får ett JSON-svar, vilket leder till en fram och tillbaka kommunikation som resulterar i att hela processen saktar ner. Playwright, å andra sidan, använder ett enda API. 

Verktyget använder en enda websocket för att kommunicera med alla drivrutiner. Det är därför Playwright är ett av de snabbaste och enklaste automationsramverken i mjukvarutestvärlden. Snabbt och enkelt = Playwright. Så hur funkar det? Efter att ha läst den här artikeln kommer du att få en känsla av om detta ramverk kan vara tillförlitligt nog att använda för programvaran du arbetar med.

Varför använda Playwright?

Ärligt talat, för mig var detta det enklaste ramverket att sätta upp. Ett oneliner-kommando ställer in din miljö och du kan börja automatisera.

Några av anledningarna till att team väljer Playwright som automatiseringsramverk är att det stöder flera språk som JavaScript, Java, Python och .NET C#. Samt även en mängd olika testramverk som Mocha, Jest, Jasmine och Cucumber. Och det coola med tester i Playwright är att den kör headless, dvs en testexekvering utan ett grafiskt gränssnitt så man ser inte webbläsaren, och testerna är alltid händelsestyrda.

Hur funkar inställningen?

Playwright är kompatibel med alla moderna operativsystem (Windows, Mac och Linux) så länge du har:

1. 1. Nod JS
2. 2. Visual Studio-kod
3.  

Skapa en mapp i ditt operativsystem, till exempel LEARN-PLAYWRIGHT, och öppna mappen i VS Code. Kör projektets rotkatalog med följande kommando,

npm init playwright@latest   

Så här ser mappstrukturen ut för ett typiskt Playwrightprojekt. Du får ett exempel på en testprojektstruktur med en enkel_som inkluderar alla förutsättningar innan du skapar en testspecifikation. I följande exempel valde jag typskript som språk, därav är filnamnen i ts.

Playwright.config.ts innehåller avsnittet som kallas projekt och specificerar processen som vi kommer att testa. Det är här du kan konfigurera webbläsaren, sammanhanget och sidfixturerna. Du kan ange alternativ globalt eller lokalt och aktivera inspelning eller testinsamling.

Dessa webbläsare kommer att köras som standard. Testerna kommer att köras under Chromium, Firefox och WebKit (Safari).

Exempeltesterna som kommer att köras finns i filen example.spec.ts.

Playwright förser dig med JSON-filen som använder "test" som skript för att köra tester.

Så här ser en standard JSON-fil ut.

En betydande egenskap hos Playwright är att den, som standard, kör alla tester som ”headless”. För att ändra detta beteende, använd headless: false som ett startalternativ i konfigurationsfilen.

Webbläsarkompatibilitet och testkörning

Playwright är även kompatibel med alla moderna webbläsare inklusive Microsoft Edge (Chromium), Apple Safari (med Webkit), Mozilla Firefox och Chrome. Den är aktiverad för att köra flera tester parallellt som standardinställning, ytterligare en faktor som snabbar upp exekveringstiden.

Kör ditt första test med kommandot  

npx playwright test

Kommandot för att köra tester är  

npx playwright test --headed 

Om du vill köra webbläsare med npm-användare  

npm run test -- --headed

Om du vill köra ett enstaka projekt, låt oss säga Chromium, då använder du kommandot   

npx playwright test --project=chromium 

Och den kommer bara att köras i Chromium. Under utförandet har testerna auto-waits för att ha kontrollerna tillgängliga, så det finns ingen anledning att lägga en extra wait-/sleep time. 

Eftersom vi har tre olika webbläsare som vi testar, delar Playwright upp den automatiskt i tre separata arbetare. När testkörningen är klar, genererar den resultaten i mappen som heter playwright report.

Tips för att skriva tester

Som jag har nämnt tidigare tar det kort tid att komma igång med att skriva tester, eftersom ett rent, strukturerat format finns i din första testfil som du kör. Du kan helt enkelt byta ut dina personliga skript för att komma igång. Senare kan du förbättra din kodstruktur för att göra den renare och mer objektorienterad.

Snabbt sätt att hitta selektor och iframes

Använd metoden "page.waitForSelector()" för att vänta på att ett element på sidan ska visas. Denna metod tar en selektor som ett argument och returnerar ett promise som visar sig när elementet hittas. När du har identifierat selektorn för elementet du vill interagera med kan du använda metoden "page.click()" för att interagera med elementet.

När du kör i webbläsaren med rubriker, anropa metoden page.pause() från ditt skript. Att använda metoden page.pause() är ett enkelt sätt att pausa körningen av Playwright-skriptet och inspektera sidan i utvecklarverktyg. Det kommer också att öppna Playwright Inspector för att hjälpa till med felsökning.

Playwright är också känd för att navigera mellan olika sidor, till exempel iframes och olika flikar. Detta är ett tillförlitligt sätt att verifiera att rätt innehåll visas på den aktuella platsen, och undvika falska pass/fail testresultat.

Enkel felsökning

Allt handlar om att bryta ner det. Felsökning har gjorts mer användarvänligt genom att visuellt kunna bryta ner linjerna med hjälp av Playwrights debugger. När du lagt till brytpunkter och kör testet i felsökningsläge stannar det pågående testet vid brytpunkten och visar dig situationen.

Playwright har ett strikt läge - om det finns liknande selektor, avbryts testet och det misslyckas några steg före det faktiska misslyckandet.

Codegen Extensionen: Skriv test från början utan att skriva kod

Codegen för testare är som GitHub-copiloten för utvecklare. Det genererar dina användarinteraktioner och presenterar dem som kod. Codegen är en kodgenerator som gör att du omedelbart kan skapa dina testskript korrekt medan du utför åtgärderna i din webbläsare.

Om du till exempel vill automatisera ett testfall på en sida, kör kommandot:

npx playwright codegen <urlen> 

I exemplet nedan, använder vi qestits hemsida.

npx playwright codegen qestit.com 

Det skär i princip av din kodningstid från att skriva skript till att bara klicka. När din kod är klar kopierar du och klistrar in den i din testklass. Detta påskyndar implementering och utförande!

Tillägg som påskyndar identifiering av selektor och felsökning

Med tillägget Playwright Test for VS Code behöver du inte ens skriva kommandon. Det här tillägget förenklar identifieringen av selektor genom att bara hålla muspekaren över elementet och den respektiva locator skrivs åt dig. Allt du behöver göra är att klicka, skriva in, kopiera och klistra in.

1. Installera extensionen: 

2. Gå till testfallet i din testexplorer,
3. Bocka i "show browser
4. Klicka på "pick locator"

5. Håll muspekaren över elementet du har problem med att hitta, klicka på det och lokaliseringsverktyget visas i din editor.

Rapporter med interaktiva spårfiler

Playwright har många bra rapporter som standard, exempelvis List, Dot, Line, JSON, JUnit och HTML Reporters. Kommandot för att få testrapporter är npx playwright show-report. Den visar en ren rapport i en webbläsare där du kan expandera eller minimera varje steg för att se var felet uppstod om något test misslyckas.

Playwright skapar också spårfiler. Dessa är zip-filer som visar dig tidslinjen och åtgärder som gjorts för testet. Det är helt enkelt en DOM-ögonblicksbild (som du kan interagera med). När du kör kommandot för visa rapport får du din interaktiva rapport.

Spårningar körs normalt i en CI-miljö, men du kan till och med köra en spårning lokalt genom följande kommando:

npx playwright test --trace on 

För att öppna rapporten, kör:

npx playwright show-report

Lätt att integrera

Eftersom kontinuerliga integrationsmetoder är populära, kan Playwright enkelt integreras i CI/CD-pipelines i CI-verktyg. Verktyget kan även integreras med Docker-miljön och Selenium Grid.

Nackdelar 

Playwright har fortfarande ett ganska litet community, dock är det aktiv och energiskt och jobbar för att få till förbättringar.

Det är inte lika komplext som de andra ramverken för testautomatisering vilket innebär att det kan finnas okända problem som ännu inte har upplevts. Med tiden kommer dock dokumentation av lösningar och begränsningar att utvecklas.

En annan nackdel är att det inte stöder riktiga enheter för mobila webbläsartester i motsats till exempel Cypress. Men stöder emulatorer.

Samt att dess komponenttestförmåga inte är helt stabil ännu, men är ett arbete som pågår.

Sammanfattning

Det har uttryckts av flera IT-proffs runt om i världen att testautomatisering håller på att bli en "levande dokumentation" läsbar för både testare och viktiga tekniska intressenter. Det har förmågan att presentera det interaktiva bakom kulisserna i ett system för nya och befintliga teammedlemmar. Testmanus och struktur syftar med andra ord till att vara lätta att förstå och inte personberoende. Aspekter som underhåll och enkelhet kan vara en utmaning när det kommer till mängden automatiserade tester.

Playwright spelar en betydande roll för att göra det lättare att visualisera vad som händer under testkörningen, vilket gör det interaktivt och värdefullt för testare och även utvecklare. Playwright kan vara ett utmärkt automatiseringsverktyg som är värt att använda för dina projekt, eftersom det ger en tydlig presentation av testskript och baserat på några av de användbara tilläggen som nämns ovan kan det spara minuter och till och med timmar från din testtid.

Ge det ett försök: https://playwright.dev/docs/intro