Testing Blocks

Testing AEM blocks involves running unit tests for logic, browser tests with Playwright or Puppeteer for UI validation, linting for code quality, and performance checks. This Skill guides you through a comprehensive workflow covering keeper tests for critical functionality and throwaway tests for visual verification, ensuring quality before PR submission.

Unit tests validate core logic and are kept long-term; browser tests verify UI rendering and responsive behavior but are temporary. Unit tests catch functional regressions efficiently; browser tests catch visual issues. This Skill teaches when to write each type, optimizing testing effort and preventing false confidence.

Linting checks code quality against standards; performance validation measures metrics. This Skill covers configuring both as npm script hooks integrated into CI pipelines, ensuring code adheres to best practices and meets performance requirements automatically before deployment.

Yes. This Skill provides guidance on test organization, naming conventions, and npm script hooks that scale across blocks, scripts, styles, and configuration changes. Automation integrates with CI pipelines, reducing manual effort and ensuring consistent validation across your entire Edge Delivery project.

Test all variants for correct rendering, responsive behavior across devices, linting compliance, and performance metrics. This Skill walks through validating a new block like a Carousel or Hero component, covering functional correctness, visual integrity, code quality, and performance before PR submission.

Browser testing for AEM blocks uses Playwright or Puppeteer to automate UI validation. This Skill explains when throwaway browser tests are worth the overhead and provides guidance on setting them up within your testing workflow alongside unit tests and linting.