skills.rest
adobe
adobeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

Testing Blocks

Validate Alpine Eco Drive project code changes with unit, browser, linting and performance checks.

45|59|Updated Oct 22, 2021
Search Tags:#unit tests#testing#quality assurance#linting#performance#Playwright#AEM#browser tests
One-click install
npx skills add https://github.com/adobe/helix-website --skill testing-blocks-adobe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Testing Blocks
Source: https://github.com/adobe/helix-website/tree/main/.claude/skills/testing-blocks
Command: npx skills add https://github.com/adobe/helix-website --skill testing-blocks-adobe

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solves? Manual testing of AEM blocks is time-consuming and prone to human error, leading to regressions and quality issues. This Skill provides a comprehensive testing framework, balancing automated "keeper" tests with efficient "throwaway" browser validation, ensuring high-quality code with less effort.

Core Features & Use Cases

  • Unit Testing: Guides creation of fast, isolated tests for logic-heavy utilities and data processing.
  • Browser Testing: Facilitates throwaway browser tests (Playwright/Puppeteer) for visual validation, DOM structure, and responsive behavior.
  • Quality Checks: Integrates linting, performance validation (via GitHub checks), and a complete pre-PR checklist.
  • Use Case: After modifying a "carousel" block, use this Skill to run unit tests on its logic, perform browser tests to capture screenshots of its visual behavior across devices, and ensure all linting and performance checks pass before creating a pull request.

Quick Start

Test the "hero" block, including unit tests for its utility functions and browser tests for visual validation across mobile and desktop.

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 blocks before submitting a pull request?▼

Testing blocks in AEM Edge Delivery projects involves running unit tests for logic-heavy utilities, browser tests with Playwright for visual validation, and linting checks. This Skill guides you through keeper unit tests, throwaway browser tests for DOM and UI validation, and pre-PR quality checks to catch regressions early.

What's the difference between unit tests and browser tests for AEM blocks?▼

Unit tests validate isolated logic in utilities and data processing using Vitest, while browser tests use Playwright to verify visual behavior, DOM structure, and responsive design across devices. Keeper unit tests persist in your codebase; browser tests are throwaway validation before merging.

Can I use Playwright and Vitest together to test AEM blocks?▼

Yes. Vitest handles fast unit tests for logic-heavy code, while Playwright automates browser-based tests for DOM validation and visual behavior. This Skill balances both tools with jsdom for unit isolation and Playwright for real browser validation across mobile and desktop.

How do I integrate linting and performance checks into my AEM testing workflow?▼

This Skill incorporates linting with CI integration and performance validation via GitHub checks as part of the pre-PR checklist. After running unit and browser tests on your blocks, these quality checks ensure code meets standards and passes performance thresholds before pull request creation.

What's the required directory structure for testing AEM blocks?▼

The established structure includes test/ for keeper tests, test/tmp/ for temporary test outputs, and drafts/tmp/ for draft artifacts. This organization separates persistent unit tests from ephemeral browser test results and draft validations.

When should I use browser tests versus unit tests for AEM block validation?▼

Use unit tests for logic-heavy utilities, data processing, and isolated functions with Vitest. Use browser tests with Playwright for visual validation, DOM structure verification, and responsive behavior across devices—especially after modifying carousel or hero blocks where UI correctness matters.

Related Skills

Explore More Software Engineering Skills→
shsteimershsteimer

Testing Blocks

Guide testing for AEM Edge Delivery code changes before pull requests.

Community
Intermediate
llmh333llmh333

springboot-verification

Run Maven or Gradle verification loops with tests, coverage, and CVE scans.

Community
Intermediate
nimadorostkarnimadorostkar
25

visual-qa

Automate visual regression testing and responsive layout verification with Playwright.

Community
Advanced
aemysitesaemysites

Testing Blocks

Test AEM Edge Delivery block code with unit, browser, and linting checks.

Official
Intermediate