testing-blocks

Automate linting, unit tests, and Playwright browser validation for AEM Edge Delivery code changes.

1|Updated Oct 7, 2024
One-click install
npx skills add https://github.com/valithedge/etisalatedge --skill testing-blocks-valithedge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: testing-blocks
Source: https://github.com/valithedge/etisalatedge/tree/main/.agents/skills/testing-blocks
Command: npx skills add https://github.com/valithedge/etisalatedge --skill testing-blocks-valithedge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured workflow to validate code changes for AEM Edge Delivery projects, including linting, unit tests, and browser-based verification, before pulling requests.

Core Features & Use Cases

  • End-to-end browser validation using Playwright to ensure blocks, scripts, and styles render correctly across devices.
  • Integrated linting and unit testing guidance to maintain code quality during block development.
  • Use Case: Before opening a PR, run the complete test suite and browser checks to capture evidence and prevent regressions.

Quick Start

Run the browser-based validation workflow to verify your changes in a real browser before opening a PR.

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 browser testing for AEM Edge Delivery blocks before a pull request?

Browser testing for AEM Edge Delivery blocks uses Playwright to validate rendering across viewports, capturing evidence artifacts before pull requests to prevent regressions.

What is included in an AEM block testing workflow?

An AEM block testing workflow includes linting, Vitest unit tests, and Playwright browser validation across blocks, scripts, references, and styles to ensure code quality.

Can I run unit tests and browser validation together for AEM Edge Delivery projects?

Yes, AEM Edge Delivery projects can run integrated linting, Vitest unit tests, and Playwright browser validation together within a single workflow before opening a pull request.

Does Playwright work for testing AEM blocks across multiple device viewports?

Playwright supports testing AEM blocks across multiple device viewports by automating end-to-end browser verification to ensure scripts and styles render correctly across screen sizes.

Why do I need Vitest and jsdom for AEM block development?

Vitest and jsdom are needed for AEM block development to perform unit testing of scripts and components in a simulated DOM environment, maintaining code quality before browser checks.

What are the limitations of automated browser testing for AEM Edge Delivery code changes?

Automated browser testing for AEM Edge Delivery focuses on visual rendering and DOM validation, and may not cover complex server-side data fetching or backend integrations outside block scope.