Testing Blocks

Automate unit, browser, and linting tests for AEM Edge Delivery projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, playwright.

What problem does it solve?

This Skill helps development teams validate code changes for AEM Edge Delivery projects by providing a structured testing workflow that catches regressions before merging.

Core Features & Use Cases

  • Unit testing for logic-heavy utilities and data processing
  • Browser testing for block decoration, UI behavior, and performance checks using Playwright/Puppeteer
  • Linting and performance validation to ensure code quality
  • Guidance on when to maintain tests (keeper) vs throwaway browser tests, and how these tests integrate with other skills such as building-blocks

Quick Start

Start by installing dependencies and running the test suite locally. Typical steps include:

  • npm install
  • npm run test:watch
  • npm run lint
  • Write small browser tests in test/tmp and content in drafts/tmp, run aem up, and execute the test scripts to capture screenshots.

Frequently Asked Questions about Testing Blocks

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

FAQPage Schema
How do I set up automated testing for AEM Edge Delivery projects?

Automated testing for AEM Edge Delivery projects combines unit tests with Vitest, browser tests with Playwright, and linting checks. Install dependencies with npm install, then run npm run test:watch for unit tests and npm run lint for code quality, integrating these into your PR workflow to catch regressions before merge.

Can I use Playwright to test block behavior and UI in AEM projects?

Yes, Playwright browser testing validates block decoration, UI behavior, and performance in AEM Edge Delivery projects. Write tests in test/tmp, add content in drafts/tmp, run aem up, and execute test scripts to capture screenshots and verify rendering without manual QA.

What's the difference between keeper tests and throwaway browser tests?

Keeper tests are maintained long-term unit tests for logic-heavy utilities; throwaway browser tests validate temporary UI changes or regressions during development. This Skill guides when to maintain each type, keeping your test suite lightweight and sustainable without overburdening your workflow.

Do I need both Vitest and Playwright for testing AEM projects?

Vitest and Playwright serve different purposes: Vitest runs fast unit tests for utilities and logic, while Playwright automates browser testing for block styles and UI behavior. Together they provide comprehensive coverage—unit logic validation plus rendered output verification—preventing regressions across your codebase.

How do I prevent regressions in pull requests for AEM projects?

Run linting, unit tests with Vitest, and browser tests with Playwright in your PR workflow to catch regressions before merge. This Skill prescribes npm-based tooling and project scripts that validate code changes, block rendering, and performance, keeping your Edge Delivery projects stable.

What testing approach works for blocks and utilities in lightweight workflows?

A lightweight testing approach combines unit testing for logic utilities and browser testing for block decoration using Vitest and Playwright. This Skill provides structured guidance on maintainable test strategies that catch regressions without overburdening development teams on AEM Edge Delivery projects.