DEV Community

Cover image for Speed-running a first time review of playwright
Alexander Lazaris
Alexander Lazaris

Posted on

Speed-running a first time review of playwright


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.


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

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


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.


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");
Enter fullscreen mode Exit fullscreen mode

Nope, this didn't work either! 🤭

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

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

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

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

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

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.






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.



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!

Top comments (0)