Front-End Testing: A Practical Starting Point

Amy Kapernick outlines four core testing layers that front-end developers should incorporate into their workflow. The list begins with linting—using ESLint for JavaScript and Stylelint and/or Prettier for CSS—followed by accessibility testing with tools like pa11y or Axe. Visual regression testing rounds out the quality checks, with Backstop and Percy as recommended options, and end-to-end testing covers full user flows via Cypress or jest-puppeteer.

Kapernick has also published a similar guide on 24 Ways, featuring 12 different testing tools. For teams looking to be thorough, performance testing might also fit under this umbrella—services like SpeedCurve or Calibre can monitor real-world performance.

The conversation around performance budgets has drawn thoughtful commentary from Harry Roberts, who argues they shouldn't be treated as goals to chase. Instead, he frames them as guardrails: "most organisations aren’t ready for challenges, they’re in need of safety nets. Performance budgets should not be things to work toward, they should be things that stop us slipping past a certain point. They shouldn’t be aspirational, they should be preventative."