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!
Top comments (0)