Deze “nieuwe” speler op de markt is hier om te blijven, en ik zal je in deze blog een aantal redenen geven waarom ik denk dat dat zo is.
Ook deze tool zal niet overal een perfecte fit zijn, maar omdat er talen zoals TypeScript, JavaScript, Python, .NET of JAVA gebruikt kunnen worden is de toepasbaarheid erg groot.
Ook het maken van schermopnamen maakt het met Codegen erg makkelijk om code te maken en deze met assertions uit te breiden voor valide en betrouwbare testen.
Wat is Playwright?
Wat is Playwright?
Een open source automation tool voor betrouwbare e2e, component en API testing voor moderne dynamische web apps/ pagina’s
● Playwright is gemaakt door de ontwikkelaars die hebben gewerkt aan Puppeteer.
● Playwright is gemaakt op Node.js en maakt gebruik van Testing Library.
● Playwright is 'gratis'.
● Playwright test is een combinatie van Node en in browser testen.
● Meerdere browsers, meerdere platformen, meerdere talen, Native mobiele tests.
De testen kunnen op verschillende browsers getest worden en dit zijn:
● Chromium
● Firefox
● Webkit (Safari)
● Google Chrome (Android)
● Mobile safari
De kracht van Playwright:
De kracht van Playwright zit hem op het moment van schrijven in een aantal speerpunten, maar daarnaast zijn er ook nog andere sterke punten te benoemen.
Op deze punten onderscheidt Playwright zich van de bestaande tools.
● Codegen.
● Trace Viewer.
● Shadow DOM.
Playwright ondersteunt ook zonder externe libraries het gebruik van iFrames.
Codegen:
Een van de belangrijke pluspunten is de Codegen, hiermee kan je in een zeer korte tijd een basis code mee neerzetten vanuit een opname sessie en vervolgens deze aanpassen in de door jou gewenste taal (JavaScript, TypeScript, Python of C#).
Er staan dan nog geen asserties in, maar dit kan je zelf makkelijk in de code toevoegen om hier betrouwbare testen mee op te zetten.
Trace Viewer:
De Trace Viewer kan gebruikt worden om het verloop van je testen te bekijken. Hiermee kan je de voor (before) status bekijken, de huidige status en na de actie (After status). Ook staat er in de trace viewer welke elementen geladen zijn en hoe lang dit proces heeft geduurd. Dit geeft een duidelijk beeld van wat er gebeurd is en waar dit gebeurd.
Parallel uitvoeren/ sharding:
Playwright gebruikt meerdere workers om de testen parallel uit te voeren, het aantal workers is te configureren of handmatig mee te geven bij het handmatig uitvoeren van de test(s).
Is het voor jouw test suite of test set nodig of verplicht om na elkaar te laten lopen is het ook mogelijk om de testen serieel uit te voeren en ook dit is in te stellen.
Playwright kan een test suite ook in “shards” uitvoeren zodat de test suites op meerdere machines uitgevoerd kunnen worden.
Shadow DOM:
Met Playwright is het mogelijk om een element bereiken dat bijvoorbeeld geblokkeerd wordt door een ander element. (shadow DOM) In het Document Object Model kan jij heel gericht een keuze maken van welk element je in de testen op wil nemen, ook als deze bijvoorbeeld geblokkeerd is door een pop-up of een verkeerde scaling waardoor er een ander element overheen valt. Hiermee is het ook mogelijk om geïsoleerde componenten te testen, los van de de rest van de pagina. Dit zorgt ervoor dat de testen volledig naar waarheid uitgevoerd worden, omdat je ook onderliggende elementen kan bereiken zoals een gebruiker dit ook zou kunnen doen.
Vergelijking Playwright
| Playwright | Cypress | Selenium 3 |
Meertalig | Ja | Nee | Ja |
Browser Support | Chrome, Webkit, Firefox, Mobile safari, Electron* | Chrome, Edge, Firefox, Electron | Chrome, Safari, Firefox |
Parallel uitvoerbaar | Ja | Ja* sinds kort in de gratis versie | Ja |
Snelheid | Beste | Goed | Goed |
Ondersteunt meerdere tabs | Ja | Nee | Ja |
iFrames | Ja | Nee | Ja |
Shadow DOM | Ja | Nee | Nee |
Installatie
De installatie is via NPM makkelijk uit te voeren.
Ook is het aan te raden, maar niet noodzakelijk, om de volgende extensie te installeren in VS code:
Storagestate / StorageState.json
Door het creëren van een storageState.json kunnen we bijvoorbeeld een cookie aanmaken waarin een snapshot van een bepaalde status in wordt opgeslagen, hierdoor kunnen we bijvoorbeeld een ingelogde status opslaan waardoor we niet bij elke test opnieuw moeten inloggen. Dit zal bij een test suite waar herhaaldelijk ingelogd moet worden de snelheid bevorderen.
Configuratie:
Configuratie: parallel, baseURL, reporter, aktie time out
Locators:
Waar men vaak gebruik maakt van id’s is het nu mogelijk om een met Playwright een element aan te wijzen, bijvoorbeeld die van een button, hierdoor kunnen we heel gericht op de juiste elementen richten. Het is mogelijk dat er elementen zijn met dezelfde rol, maar door de toevoeging van de naam is het mogelijk op de test op de juiste rol te richten.
De volgende locators zijn te te gebruiken:
Accessible Queries
.getByRole(role: Role, options: Options)
.getByLabel(text: Query, options: Options)
.getByPlaceholder(text: Query, options: Options)
.getByText(text: Query, options: Options)
Semantic Queries
.getByAltText(text: Query, options: Options)
.getByTitle(text: Query, options: Options)
Alternative Queries
.getByTestId(testId: string)
.locator(selector: string)
Test maken:
Assertions
Playwright blijft wachten op het te verwachten resultaat tot de de time out bereikt is.
Playwright gebruikt .to.. sleutelwoorden.
Soft assertions
Standaard worden deze niet gebruikt, maar tijdens het onderhouden van de testen kan het handig zijn.
Uitvoeren van de test zal niet stoppen als deze soft asserties falen.
Pas aan het einde van de testcase zal de test falen als er een soft assertion gefaald is in de test.
Aanpasbare foutmeldingen
Ik geef dan een argument mee aan de verandering, zodat het hulpmiddel weet wat we willen veranderen.
Houd het rapport overzichtelijk
Negatieve assertions
gebruikt .not..
Een simpele test zou er dan bijvoorbeeld zo uit kunnen zien:
Spelen met de test inhoud.
Nu wil je natuurlijk alleen afgeronde testen pushen en je test suite zo leesbaar mogelijk houden. Maar het kan zijn dat er een bekende fout in het systeem zit, een test nog niet volledig sluitend is of er een test tussen staat die nog teveel tijd in beslag neemt.
Dan is het mogelijk om in je test suite deze testen te labelen.
test.skip(title, testFunction) de test wordt als niet relevant gemarkeerd, Playwright zal de test niet uitvoeren.
test.fail() De test wordt gemarkeerd dat deze niet zal slagen, Playwright zal deze test wel uitvoeren en er vanuit gaan dat deze test niet slaagt, als de test toch slaagt dan zal Playwright hier een melding van geven.
test.fixme(title, testFunction) De test zal gemarkeerd worden dat deze niet slaagt. Playwright Test zal deze test niet uitvoeren, in tegenstelling tot de test.fail() zal deze test niet uitgevoerd worden. Gebruik de fixme wanneer een test langzaam is of crasht, dan kan je deze altijd nog refactoren.
test.slow()De test zal gemarkeerd worden als langzaam en de time-out zal verdrievoudigd worden voor deze test.
Test uitvoeren:
Conclusie:
Natuurlijk zie je ook hier weer een herhaling van stappen, het wachten tot het element gevonden of geladen is. Er zijn mogelijkheden om je testen te debuggen. Maar waar steekt Playwright nou echt boven de rest uit?
Wat je terug ziet is dat de ontwikkelaars de mensen van Puppeteer zijn, het is zo makkelijk om je informatie uit de chrome console te halen, en de console te betrekken bij het zoeken en maken van je tests dat je geen tijd meer verliest met het zoeken naar de jusite elementen.
De mogelijkheid om de testen parallel te laten lopen en dit zelfs op te kunnen delen over meerdere servers geeft je de mogelijkheid om ontzettend veel testen te kunnen draaien in een korte tijd, wat uiteindelijk dus ook geen tijd kost en je dus snelheid in je OTAP blijft behouden.
Wat wij hier nog niet besproken hebben is de mogelijkheid om component (onderdeel) testen te maken in Playwright, waar bijvoorbeeld ook front end ontwikkelaars snel kunnen controleren of hun werk juist is.
Het gebruik van de .getByRole mogelijkheid maakt de testen bijna onbreekbaar en zorgt ook voor tijd winst bij het onderhouden van de tests.
Dan de Shadow DOM mogelijkheid. Hier test je echt op de functionaliteit van de website zoals deze in het 'wild' is, dus niet zoals je het wenst maar je bereikt wat je moet bereiken op een natuurlijke manier zonder het toepassen van trucjes.
Kortom: Snel en betrouwbaar testen!
Vragen met betrekking tot een nieuw framework:
Zijn er (kwalitatief goede) tutorials beschikbaar? Ja, bij elke versie update komt er een nieuwe video uit waarin de veranderingen besproken en toegelicht worden, ook de community achter Playwright groeit.
Wordt Playwright actief onderhouden? Ja, Playwright wordt actief onderhouden, het is een Microsoft product.
Ondersteunt Playwright ook iFrames? Ja, Playwright ondersteunt ook zonder externe libraries het gebruik van iFrames.
Als je na het lezen van deze blog enthousiast geworden bent, lees dan eerst deze blog voordat je de overstap maakt Het kiezen van testtools: Enkele overwegingen die je misschien hebt gemist De ontwikkeling gaat door en ik ben erg benieuwd naar je feedback. Wat mis je nog? Neem gerust contact met mij op via karl.brink@enqore.tech