Playwright: The Only Tests Clients Ever Notice
Unit tests protect you. End-to-end tests protect the checkout. Guess which one the client cares about.
Unit tests protect you from yourself. End-to-end tests protect the client's revenue. Only one of those gets noticed when it fails in production.
I have watched a checkout break because a form field was renamed. Every unit test passed. The component rendered. The order never arrived.
The tests that earn their place
I do not aim for coverage. I aim for the handful of paths where failure costs money or credibility:
The money path. Add to cart, checkout, order placed. On Tulip that ends in a composed WhatsApp message, so the test asserts the message content is correct — items, branch, delivery notes.
The lead path. Contact or booking form submitted, confirmation shown, record stored. A silently broken contact form is the most expensive bug in freelance web work because nobody reports it. The enquiries just stop.
Authentication. Login, two-factor, session persistence, logout.
One representative admin action. Create or edit the main entity, confirm it appears publicly.
Four flows. An hour or two of work. They catch the failures that actually matter.
Writing them so they do not rot
await page.getByRole('button', { name: 'Confirm order' }).click()
await expect(page.getByText('Order sent')).toBeVisible()Query by role and visible text, not by CSS class. A test coupled to .btn-primary-2 breaks on every restyle and teaches the team that failures are noise.
Playwright's auto-waiting removes the other major source of flakiness — no arbitrary sleeps, no manual retry loops. A flaky suite gets ignored, and an ignored suite is worse than none because it costs CI time and provides no signal.
Test both languages
For bilingual sites this is not optional. Run the critical flows in Arabic as well as English. RTL layout bugs are a category of their own — an overlapping button, a mirrored control, a form that submits the wrong field order — and they only appear in the direction you did not test.
The client-facing benefit
"The checkout is tested automatically on every change" is a sentence that means something to a business owner, in a way that "we have 80% coverage" does not.
It is also the thing that lets me change code in a project I have not touched for six months without a phone call afterwards.
Resources
- Repo: microsoft/playwright
- Docs: playwright.dev
- Video walkthroughs: YouTube: Playwright tutorial
- Related: Arabic-first, not Arabic-translated
Need this built properly?
I build secure, fast, bilingual platforms for clients across Egypt, Saudi Arabia, the UAE and Kuwait.
