Your e2e tests sox because you don't Playwright

e2e (end-to-end) tests are critical.

Despite your unit tests, acceptance tests... and whatever layer you may add to the list, you may still encounter visual regressions when releasing new features or fixing bugs.

Of course, there are other tools and other configurations, but this is not my point here.

Use AI for a quick setup

Just ask your favorite AI client the right config for https://playwright.dev/, and you'll probably get a ready-to-use demo for your local tests.

I don't think it's valuable to rephrase the documentation here.

What problem does the tool solve?

Visual regressions happen.

It could be a missing button, but it could be worse, like broken pages.

You PR could pass various checks and still result in visual regressions.

Even on small projects, it's hard to catch them all.

Playwright is easy to use, and has great features:

• easy screenshots to be used in your e2e tests as a verification tool (from specific sections to the entire page with page.screenshot({ path: 'full-page.png', fullPage: true}))
• convenient helpers, such as toBe, toEqual, toHaveCSS, toHaveClass
• easy interactions, such as (.btn).click() or input[type="checkbox"].check()
• you can define from simple to complex scenarios, and emulate pretty much everything you need
• easy integration in CI/CD, like GitHub actions (see playwright.yml added during the first setup)

Basic demo

Again, use AI for the basic setup, and once you got that, you may start writing your e2e tests:

test.describe('Check my Website', () => {
  test('dark mode is fine', async ({ page }) => {
      await page.goto('/');// could be another page
      await page.click('#dark-mode-switcher');
      await expect('body').toHaveClass('dark');
  });
});

This is not the best lines you can write with the tool, but that should give you an idea of what you can do.

Other considerations

Again, Playwright is not the only tool. You might want to check Cypress too.

The key is to have those e2e tests in your project, and to spend time writing valuable checks.

Some tests might be redundant, or you might forget the most critical scenarios.

There's no universal recipe, as it's deeply related to your business logic.

Your first e2e tests won't probably be excellent, but it's a start.

Bonus: Beginner mistakes with Playwright

• toBeGreaterThanOrEqual() and toBeLessThanOrEqual: there's no "LowerThan"
• if you target list items, use .mylist .item as locator, and not .mylist, especially if you want to count items and loop
• don't forget everything is async, so you'll often need the keyword await to get the job done

Wrap this up

While e2e tests are not bullet proof, this layer is quite robust.

Hopefully, you'll save time and energy.