skills.rest
narcisolcf
narcisolcfCOMMUNITY
Explore all skills by this author →
GitHub

webapp-testing

Automate end-to-end tests for local React Vite apps with Playwright.

Updated Dec 9, 2025
Search Tags:#automation#playwright#e2e-testing#web#playwright-python
One-click install
npx skills add https://github.com/narcisolcf/skills_claude_narciso --skill webapp-testing-narcisolcf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webapp-testing
Source: https://github.com/narcisolcf/skills_claude_narciso/tree/main/webapp-testing
Command: npx skills add https://github.com/narcisolcf/skills_claude_narciso --skill webapp-testing-narcisolcf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

This Skill enables end-to-end UI testing for React/Vite applications, capturing browser logs, discovering elements, and automating static HTML interactions.

Core Features & Use Cases

  • Console Logging: Capture browser console messages during tests.
  • Element Discovery: Enumerate and inspect on-page elements and attributes.
  • Static HTML Automation: Automate interactions with local static HTML via file:// URLs.

Quick Start

  1. Start a server with a command like: python scripts/with_server.py --server "npm run dev" --port 5173 -- python "tests/my_test.py"
  2. Write a Playwright test in Python and run it to verify UI flows

Frequently Asked Questions about webapp-testing

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

FAQPage Schema
How do I automate end-to-end tests for React applications?▼

End-to-end testing for React apps automates UI interactions, form validation, and element discovery using Playwright. This Skill runs Playwright within Python scripts against local Vite dev servers, capturing browser logs and screenshots to verify UI behavior without manual testing.

Can I use Playwright to test local React applications during development?▼

Yes, Playwright works with local React development servers. This Skill integrates with your npm dev server, runs Python-based Playwright tests, and validates UI flows, form submissions, and element interactions in real-time during development.

How do I capture browser console logs during automated UI tests?▼

Browser console logging captures messages, warnings, and errors that occur during test execution. This Skill collects console output as artifacts alongside screenshots and element inventories, helping you debug UI behavior and catch runtime errors in tests.

What do I need to set up before running Playwright tests on a React app?▼

Prerequisites include Playwright, Python, installed project dependencies (npm install), and a development server. This Skill provides a server lifecycle utility (with_server.py) that manages starting your dev server and running tests against it automatically.

Can Playwright automate interactions with static HTML files?▼

Yes, Playwright supports automating static HTML via file:// URLs. This Skill enables testing of static HTML content alongside dynamic React components, useful for validating HTML rendering and interactions outside a dev server.

What does element discovery in automated testing mean?▼

Element discovery enumerates and inspects on-page elements and their attributes during tests. This Skill captures a complete inventory of DOM elements, enabling you to verify page structure, validate element presence, and confirm attribute values programmatically.

Related Skills

Explore More Software Engineering Skills→
superchordatesuperchordate

nextjs-testing

Set up Jest and React Testing Library for Next.js component and API route tests.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
guanyangguanyang
947

webapp-testing

Test local web applications with Playwright scripts and manage development servers.

Community
Intermediate
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate