skills.rest
bennypowers
bennypowersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gen-tests

Generates Playwright or Puppeteer-based page object tests for custom elements from cem serve's DevTools previews.

46|4|Updated May 27, 2025
Search Tags:#scaffolding#playwright#puppeteer#generate#tests#custom-elements#page-object
One-click install
npx skills add https://github.com/bennypowers/cem --skill gen-tests
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gen-tests
Source: https://github.com/bennypowers/cem/tree/main/extensions/claude-code/skills/gen-tests
Command: npx skills add https://github.com/bennypowers/cem --skill gen-tests

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate browser-based test scaffolding for custom elements using cem serve's chromeless demo UI with Playwright or Puppeteer.

Core Features & Use Cases

  • Read the target element's full manifest data to determine available demos and definitions for attributes, slots, events, and CSS parts.
  • Detect test environments and propose a Playwright-based setup (with optional Puppeteer compatibility) along with generating a Page Object Model structure.
  • Produce end-to-end test skeletons that exercise demos, attributes, slots, events, CSS custom properties, and CSS states.

Quick Start

Use the gen-tests skill to scaffold Playwright or Puppeteer tests for a target custom element.

Frequently Asked Questions about gen-tests

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

FAQPage Schema
How do I auto-generate Playwright tests for custom elements?▼

Auto-generate Playwright tests by reading the target element's manifest data from cem serve to produce Page Object Model test skeletons covering attributes, slots, events, and CSS states.

What is a Page Object Model test skeleton for web components?▼

A Page Object Model test skeleton structures browser-based end-to-end tests for custom elements by defining element interactions, attributes, and event behaviors separate from test assertions.

Can I use Puppeteer instead of Playwright for custom element testing?▼

Yes, the scaffolding detects your test environment and generates a test setup with optional Puppeteer compatibility, allowing you to run custom element tests outside of Playwright.

How do I test custom element attributes and slots using cem serve?▼

You test attributes and slots by reading the element's full manifest data from cem serve's chromeless demos, which generates end-to-end test skeletons exercising those specific properties.

Does generated test scaffolding cover CSS custom properties and states?▼

Yes, generated test scaffolding covers CSS custom properties and states by reading the target element's manifest definitions and producing end-to-end test skeletons that validate those styling behaviors.

Related Skills

Explore More Software Engineering Skills→
bennypowersbennypowers
46

write-demos

Create and manage partial HTML demos for custom elements served by cem serve.

Community
Intermediate
bennypowersbennypowers
46

design-api

Plan custom element APIs covering tags, attributes, events, slots, and CSS properties.

Community
Intermediate
bennypowersbennypowers
46

write-docs

Generate MCP-friendly documentation from custom element manifest data.

Community
Advanced
matteocervellimatteocervelli
25

e2e-test-writer

Generate Playwright end-to-end tests using the page object model.

Community
Advanced