testing-blocks

Validates AEM Edge Delivery code changes through linting, browser testing, and unit tests.

1|Updated Jun 22, 2026

Search Tags:#vitest #testing #linting #playwright #browser testing #aem edge delivery #block validation

Ready to run

npx skills add https://github.com/aemgdc/aemdev --skill testing-blocks-aemgdc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: testing-blocks
Source: https://github.com/aemgdc/aemdev/tree/main/.agents/skills/testing-blocks
Command: npx skills add https://github.com/aemgdc/aemdev --skill testing-blocks-aemgdc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, vitest, jsdom, and includes references (resource) components.

What problem does it solve? Code changes to AEM Edge Delivery blocks, scripts, and styles can ship with rendering bugs, console errors, and regressions when developers skip structured validation before opening pull requests. ## Core Features & Use Cases - Mandatory Browser Validation: Test blocks across mobile, tablet, and desktop viewports using Playwright or browser dev tools, capturing screenshots as proof. - Linting and Unit Test Workflow: Run npm lint checks, write Vitest unit tests for logic-heavy utilities, and verify existing tests still pass. - Use Case: After modifying a hero block, run the four-step workflow to lint the code, screenshot the block at three viewports, confirm no console errors, and verify the test suite passes before opening a PR. ## Quick Start Test my modified carousel block by running linting and validating it in a browser at mobile, tablet, and desktop viewports.

Frequently Asked Questions about testing-blocks

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

FAQPage Schema

How do I test AEM Edge Delivery blocks before a pull request?▼

Run npm run lint first, then validate the block in a real browser across mobile, tablet, and desktop viewports while checking for console errors. Capture screenshots as proof, then run npm test to confirm existing tests pass.

How do I test blocks with Playwright in AEM projects?▼

Write a temporary Playwright script that launches Chromium, navigates to your local test URL, waits for the block selector, and captures screenshots at 375px, 768px, and 1200px viewports. Delete the script after analyzing the artifacts.

When should I write unit tests for AEM blocks?▼

Write unit tests for logic-heavy utility functions, data processing, API integrations, and complex business logic using Vitest. Skip unit tests for simple DOM manipulation, CSS-only changes, and straightforward decoration logic, which browser testing covers.

Why do my browser tests fail in AEM Edge Delivery?▼

Common causes include the dev server not running, missing test content, or timing issues. Verify the server with aem up, confirm the test URL loads manually, and add waitForSelector calls for the block element.

Does Vitest need special setup for AEM projects?▼

Yes, install vitest, jsdom, and optionally @vitest/coverage-v8, then create a vitest.config.js with the jsdom environment. Add test scripts to package.json and exclude test files from production via .hlxignore.