Testing Blocks

Validate AEM Edge Delivery code changes with unit, browser, lint, and performance tests.

Updated Nov 9, 2025
One-click install
npx skills add https://github.com/treeves/opsinventor-eds --skill testing-blocks-treeves
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Testing Blocks
Source: https://github.com/treeves/opsinventor-eds/tree/main/.ai-skills/skills/testing-blocks
Command: npx skills add https://github.com/treeves/opsinventor-eds --skill testing-blocks-treeves

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, playwright, vitest, and includes scripts (resource) components.

What problem does it solves? This Skill streamlines the validation process for AEM Edge Delivery code changes, ensuring high quality and preventing regressions before pull requests. It guides you through a pragmatic testing philosophy, saving time by focusing on valuable tests and automating checks.

Core Features & Use Cases

  • Comprehensive Testing Guide: Covers unit testing for logic, browser testing for visual and DOM validation, linting for code quality, and performance validation.
  • Value-Driven Testing: Guides on when to create "keeper" (unit) vs. "throwaway" (browser) tests, optimizing your testing effort for maximum impact.
  • Use Case: After modifying an AEM block, this Skill ensures all existing tests pass, new logic is unit-tested, and visual changes are validated with browser screenshots across multiple viewports. This guarantees your code is robust and ready for review, reducing feedback cycles.

Quick Start

Initiate the testing workflow for the "Hero" block, ensuring all unit tests pass and browser screenshots are captured for visual validation.

Frequently Asked Questions about Testing Blocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate AEM block code before submitting a pull request?

Validate AEM code by running unit tests, browser tests with Playwright, linting, and performance checks. This Skill guides you through comprehensive testing for blocks, scripts, and styles, catching regressions and quality issues before PR submission.

What's the difference between unit tests and browser tests in AEM projects?

Unit tests (keeper tests) validate logic in isolation with Vitest; browser tests (throwaway tests) capture visual and DOM changes across viewports using Playwright. This Skill teaches when to use each type to maximize test value and reduce maintenance overhead.

Can I use Playwright and Vitest together for AEM Edge Delivery testing?

Yes. This Skill integrates Playwright for browser testing and Vitest for unit testing in AEM Edge Delivery projects, coordinating both tools within a single validation workflow before pull requests.

How do I set up linting and performance validation in my AEM testing workflow?

Configure linting for code quality and add performance validation checks alongside unit and browser tests. This Skill enforces test organization, tooling setup, and CI integration requirements for complete pre-PR validation.

What test organization conventions should I follow for AEM projects?

Store unit tests in test/tmp and draft test content in drafts/tmp directories. This Skill enforces organizational conventions alongside Vitest and Playwright setup to ensure consistent, reliable test infrastructure across your AEM codebase.

Do I need to validate visual changes when modifying AEM blocks?

Yes. Browser testing with Playwright captures visual and DOM changes across multiple viewports. This Skill ensures visual modifications are validated and documented, preventing unintended regressions in block appearance and behavior.