vc-web-testing

Automates web testing with Playwright, Vitest, and k6 across E2E, unit, load, security, and accessibility layers.

2|Updated Sep 15, 2025
One-click install
npx skills add https://github.com/marsley01/Marsley-Portfolio-Web --skill vc-web-testing-marsley01
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vc-web-testing
Source: https://github.com/marsley01/Marsley-Portfolio-Web/tree/main/.agents/skills/vc-web-testing
Command: npx skills add https://github.com/marsley01/Marsley-Portfolio-Web --skill vc-web-testing-marsley01

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building and maintaining a comprehensive web test suite requires juggling many tools, patterns, and checklists across unit, integration, E2E, load, security, visual, and accessibility testing. This Skill consolidates proven testing strategies, ready-to-run scripts, and reference guides so you can set up, execute, and analyze tests without researching each domain from scratch. ## Core Features & Use Cases - Playwright Project Initialization: Run the init script to scaffold a best-practice Playwright setup with config, auth fixtures, example tests, and optional component testing. - Unified Test Result Analysis: Parse Playwright JSON, Vitest JSON, and JUnit XML results into a single summary with pass rates, failure details, and markdown output for CI reports. - Domain Reference Guides: Access 20+ focused references covering testing pyramids, contract testing with Pact/MSW, database testing with Testcontainers, Core Web Vitals, OWASP security checks, WCAG accessibility audits, mobile gestures, and flakiness mitigation. - Use Case: Before a release, run the pre-release checklist, execute cross-browser Playwright suites, audit accessibility with axe-core, measure LCP/CLS/INP with Lighthouse CI, and merge sharded CI reports into one summary. ## Quick Start Ask the AI to initialize a Playwright testing setup for your project and generate an E2E test suite for your login flow.

Frequently Asked Questions about vc-web-testing

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

FAQPage Schema
How do I set up Playwright E2E testing for a new project?

Run the init-playwright script with node to scaffold a complete setup including playwright.config.ts, authentication fixtures, example tests, and global setup. Add the --ct flag to also generate component testing configuration.

How to combine Playwright and Vitest test results into one report?

Use the analyze-test-results script with --playwright and --vitest flags pointing to each JSON results file. It outputs a unified summary in text, JSON, or markdown format with pass rates and failure details, and supports JUnit XML too.

Playwright vs Vitest browser mode for component testing?

Playwright component testing runs in real browsers across Chromium, Firefox, and WebKit, making it better for CSS and cross-browser verification. Vitest browser mode is faster for logic-focused tests where jsdom-level fidelity is sufficient.

Does Playwright work with Testcontainers for database testing?

Yes, you can create worker-scoped Playwright fixtures that start PostgreSQL or MongoDB containers via Testcontainers, run migrations, and seed worker-isolated data. Allow 60 seconds for container startup in test timeouts.

Why are my Playwright tests flaky in CI?

Flakiness usually comes from hard waits, shared state between tests, animations, or network instability. Replace fixed sleeps with explicit waits, isolate test data per worker, disable CSS animations, and mock external API calls.

How do I test accessibility with Playwright and axe-core?

Integrate @axe-core/playwright by creating an AxeBuilder instance with the page object and calling analyze after navigation. Assert that results.violations is empty, and use withTags(['wcag2aa']) to target WCAG 2.1 AA compliance.