De Playwright cursus
Bij Newspark doen we regelmatig een cursus om onze kennis up-to-date te houden of uit te breiden. Dat kan in softskills zijn zoals time management of stakeholder management. Maar we doen ook regelmatig een cursus in een programmeertaal zoals Java, Python of TypeScript.
Deze keer hebben we ervoor gekozen om de didactische vaardigheden in te vliegen van Roy de Kleijn. Vanuit zijn bedrijf Testsmith geeft hij diverse cursussen waaronder de cursus Playwright. Playwright is een tool die steeds meer gebruikt wordt en steeds meer gevraagd wordt in de markt.
Playwright neemt je een boel dingen uit handen die je met bijvoorbeeld selenium of puppeteer zelf moet programmeren. Ook ten opzichte van cypress heeft het de nodige voordelen en al is dit niet een vergelijkend warenonderzoek geeft het een beeld.
Help, ik heb een testwebsite nodig
Tijdens deze workshop maakte we vaak gebruik van de website https://practicesoftwaretesting.com/
Dit is een website die Roy zelf heeft opgezet om te oefenen met testautomatisering. De site is vrij toegankelijk voor iedereen en hij wordt dus ook door veel mensen gebruikt. Aan het netwerkverkeer kon Roy zien dat er ook gebruikers waren buiten Nederland. Mocht jij een volgende keer een testwebsite nodig hebben, gebruik deze dan gerust.
Deze website gaf ons een middel om testautomatisering op te zetten. Zo konden we vrijuit dingen proberen op een site die een boel verschillende mogelijkheden heeft om te spelen met locators, ook als je nog geen applicatie up-and-running hebt.
Een greep uit wat we hebben geleerd
Playwright kun je het best combineren met TypeScript. Het kan ook met andere talen zoals met Python maar met TypeScript zijn de mogelijkheden out-of-the-box net even wat beter ingeregeld. Wij deden de cursus dus ook o.b.v. TypeScript.
Codegen:
Middel "npx playwright codegen www.jouwwebsite.nl" start je de code generator, ookwel bekend als record and playback.
Dan kun je zelf door je website klikken en dan zet codegen dat om in Playwright stappen zodat je een basis hebt voor je regressietest. Het mooie aan codegen is, dat nadat je de stappen hebt gedaan, je nog kunt kiezen in welke taal je dit wilt hebben. In TypeScript, Java of .NET bijvoorbeeld.
Bedenk bij record en playback wel altijd dat er overbodige stappen in kunnen zitten, zoals het eerst klikken op een veld en het daarna erin plakken van een waarde. Met Test Automatisering is alleen de tweede stap nodig. Heel belangrijk is dat je goed moet checken of dit wel de beste locators zijn, al is codegen hier best wel goed in moet ik zeggen. Als er bijvoorbeeld een data-testID is dan gebruikt hij die, zo niet dan zoekt hij een unieke CSS of anders xpath locator.
Faker:
Binnen playwright kun je de library "Faker" importeren.
Deze library stelt je in staat om allerlei random fake data te gebruiken in je testen, rechts zie je een paar voorbeelden.
Op die manier test je elke keer met andere gegevens die technisch gezien kloppen. Dit voorkomt dat je bijvoorbeeld een bug mist als bepaalde postcodes of namen wel werken, maar andere postcodes of namen met vreemde tekens erin niet. Natuurlijk kun je zelf daar specifieke testen voor opstellen, maar dan krijg je wel heel veel testen. En soms weet je ook niet welke vreemde combi's er wel niet mogelijk zijn.
Screenshots en video's:
In je playwright.config.ts file kun je opgeven dat je wilt dat er standaard een screenshot wordt gemaakt van je testen. Bijvoorbeeld als de test gefaald is of altijd van de laatste status van je test, handig! Daarnaast kun je ook instellen dat er standaard een video gemaakt wordt van je test. Dat is voor debuggen ook heel praktisch natuurlijk.
export default defineConfig({
use: {
// Screenshot van de laatste toestand bij een gefaalde test
screenshot: 'only-on-failure',
// Video-opname van de volledige flow
video: 'on',
},
});
Een andere handige waarde die je kunt gebruikgen voor zowel screenshot als video is: retain-on-failure
Oftewel, er wordt een video/screenshot gemaakt maar die wordt alleen bewaard als de test faalt.
Fixtures:
In Playwright heb je ook fixtures, dat zijn als het ware precondities. Die programmeer je eenmalig en dan kan je per testcase aangeven dat je met die specifieke fixture wilt beginnen. Je kunt dit een beetje vergelijken met een before hook, maar een before hook wordt voor elke testcase uitgevoerd en een fixture alleen als je dat in die testcase toevoegd. Het is meer te vergelijken met een "given" stap, maar dan dus wel een set aan stappen in 1 commando.
Interfaces:
Verder legde Roy ons uit wat interfaces zijn. Dat zijn als het ware blauwdrukken voor data. Je kunt specificeren waaruit een data object moet bestaan, welke types aan waardes die heeft. Zo kun je makkelijk een nieuw object van dat type aanmaken waarbij je geholpen wordt om geen waardes te vergeten. Je kunt ook een interface maken voor een bericht welke je terug krijgt via een API. Als die API dan niet alle waardes terug stuurt, krijg je gelijk een foutmelding dat het niet aan de specificatie van de interface voldoet. Nog voor je testen probeert te doen met die waardes.
Conclusie
We hebben te veel geleerd om hier uit te leggen in een blog. Zoals ze wel vaker zeggen, je had er bij moeten zijn!
Eens zien wat de volgende cursus wordt.
Ben jij er dan bij?
