home / skills / vadimcomanescu / codex-skills / webapp-testing

webapp-testing skill

safe

This skill facilitates local UI testing with Python and Playwright, starting servers, inspecting the DOM, taking screenshots, and validating user flows.

npx playbooks add skill vadimcomanescu/codex-skills --skill webapp-testing

Review the files below or copy the command above to add this skill to your agents.

Files (6)

SKILL.md

1.1 KB

---
name: webapp-testing
description: "Local webapp testing workflow using Python + Playwright: start servers, explore DOM, take screenshots, capture console logs, and verify user flows. Use when debugging UI behavior, validating frontend changes, or creating lightweight end-to-end checks for a local dev server."
---

# Web App Testing (Playwright)

Prefer small, targeted Playwright scripts over heavyweight test suites when you need fast UI verification.

## Quick Start
1) Decide what you’re testing:
   - static HTML file (`file://…`) vs local dev server (`http://localhost:…`)
2) Recon first:
   - take a screenshot
   - list buttons/links/inputs
   - capture console logs
3) Then automate:
   - select stable locators
   - assert visible text and URL changes
   - keep timeouts explicit and minimal

## Helper: run a command with dev server(s)
Start one or more servers, wait for ports, run your Playwright script, then clean up:
```bash
python ~/.codex/skills/webapp-testing/scripts/with_server.py --server "npm run dev" --port 3000 -- python /tmp/ui_check.py
```

## Assets
- Playwright examples you can copy: `assets/playwright-examples/`

Overview

This skill provides a lightweight local webapp testing workflow using Python and Playwright to start dev servers, inspect the DOM, capture screenshots, and verify simple end-to-end flows. It is designed for fast UI verification during development, debugging visual regressions, and validating frontend changes without a heavy test framework. The tooling focuses on pragmatic checks: recon first, then targeted assertions.

How this skill works

The skill can launch one or more local dev servers, wait for their ports to become available, and run a Playwright script against the running app. The script performs reconnaissance actions (screenshots, listing buttons/links/inputs, collecting console logs) and then executes focused automation steps using stable locators and explicit timeouts. After the check completes, servers and resources are cleaned up to leave the environment tidy.

When to use it

Quickly verify UI behavior after a code change on a local dev server
Debug flaky UI interactions by capturing DOM snapshots and console logs
Create lightweight smoke tests for pull requests or feature branches
Validate navigation and visible text changes without full test suite overhead
Capture reproducible screenshots for bug reports or design reviews

Best practices

Run reconnaissance first: take a screenshot, list interactive elements, and capture console output
Prefer small, targeted scripts over large suites to keep feedback fast
Use stable locators (data-* attributes or accessible text) to avoid brittle selectors
Keep timeouts explicit and minimal to detect real regressions quickly
Start servers and wait for ports before running checks, then clean up processes

Example use cases

Start a local dev server, take an initial screenshot, click a login button, and assert the dashboard URL
Capture console errors while exercising a component to find runtime exceptions introduced by recent changes
List all form inputs on a page and verify required fields prevent submission
Run a smoke check in CI for a feature branch by launching the app on a temporary port and verifying core flows
Produce a sequence of screenshots across breakpoints to detect responsive layout regressions

FAQ

Do I need a full test framework to use this skill?

No. The skill is intended for small Playwright scripts that provide fast verification without the overhead of a full test suite.

How do I ensure selectors are stable?

Use explicit data-* attributes or accessible text and avoid deep CSS paths. Keep locator strategies focused on intent rather than structure.