warning

I have only read about playwright, skimmed best practices and randomly associated articles. In this post, I'll be creating & reviewing web tests using playwright.

I'll be rushing through this and taking down notes + screenshots for this post. In doing so, I'll probably miss something obvious. Let's hope I don't.

cli

First thing I learned ... playwright runs in headless by default.

npx playwright test e2e/example2.spec.ts --headed

report

npx playwright show-report

Runs a local server to host html report for latest run. Pretty happy with the standard report.

It auto-loads the report if any test fails which is nice. Each test report is replaced with the latest so I'll have to look into timestamps to store a history of runs.

locators

To be honest, I spent a longer-than-expected time trying to validate a single header element.

Nope, didn't work. 🙃

const title = page.locator('Checkboxes');
await expect(title).toHaveText("Playwright");

Nope, this didn't work either! 🤭

const title = page.locator('Checkboxes').textContent();
await expect(title).toEqual("Playwright");

Nope! What on Earth am I doing wrong?! 💀

const title = page.locator('h3');
await expect(title).toEqual("Playwright");

Success! I was not matching the returned element with the respective assertion function. 😎

const title = page.locator('h3');
await expect(title).toHaveText("Checkboxes");

I prefer css selectors however I've seen other playwright guides pushing to find elements via text. Possibly due to dynamic HTML causing attributes to change on load, whereas now the text is more reliable & consistent.

Speaking of css, follow this link to the best css selector training ever.

headless vs headed results

Super speedy. I was expecting headed to take longer across all steps. Perhaps caching played a part here. I'm not too familiar with playwright's caching & storage abilities.

headless

headed

configuration

I loved that playwright.config.ts had a ton of prefilled options and all I had to do was simply enable/disable anything I desired, rather than adding in configurations myself.

github actions

Success! Instant trigger on git push. Took 57s to install playwright though.

summary

Overall I am pleasantly pleased with playwright.

The framework itself is extremely helpful and from what I saw, comfortably covers all the essentials for web automation. It natively supports complicated features such as iframes, drag & drop, file storage and many more.

In future I'll aim to explore its features in more detail. Farewell!