Wait, I have to test the front end too?
summary
Shows how to add concrete front‑end tests to an Eleventy blog: linting with ESLint and Stylelint that output JSON and auto‑fix rules, accessibility scans with Pally that produce JSON reports and screenshots, visual regression with Backstop that creates HTML diffs and reference images, and end‑to‑end checks in Cypress that assert DOM structure, clicks and mobile viewports. Live demos run but hit Chrome/WSL and missing‑reference issues, yet generate actionable artifacts. Tools: ESLint, Stylelint, Pally, Cypress.
AI-written summary · about
chapters (18)
- 0:00Intro
- 4:45Introduction
- 7:45Setting up lint
- 12:30CSS lint
- 15:45Accessibility testing
- 17:00About Pally
- 17:45Running Pally
- 23:38Context and Selector
- 24:13Error code
- 25:30Testing options
- 27:52Multiple tests
- 30:20Visual regression testing
- 31:01Backstop
- 36:01Visual Aggression
- 37:04Cypress
- 37:40Installing Cypress
- 40:23Testing in Cypress
- 46:10Conclusion
related talks
53mWait, I have to test the front end too?
42mWait, I have to test the front end too?
35mTesting in Frontend World
26mModern Testing Practices in Frontend Applications
30mWait, before you write your next test...
45mHOW TO DO GOOD WITHOUT DOING ANYTHING
31mHow to do Good Without Doing Anything
01h 06mnpm run a11y-test