webapp-testing_skill

This skill helps you test local web applications with Playwright in Python, enabling reliable UI verification, debugging, and visual inspection.

Python

0

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill yldgio/codereview-skills --skill webapp-testing

SKILL.md7.2 KB

Overview

This skill provides a concise toolkit for interacting with and testing local web applications using Python + Playwright. It helps automate navigation, DOM inspection, UI interactions, screenshots, and collection of browser logs. Use it to verify frontend functionality, reproduce UI bugs, and build repeatable local tests.

How this skill works

The skill uses synchronous Playwright scripts to launch a browser, navigate to local servers, wait for network idle, and inspect the rendered DOM. It captures screenshots, listens to console and network events, and runs actions against discovered selectors. It emphasizes a reconnaissance-then-action pattern: inspect rendered state, identify reliable selectors, then perform interactions and assertions. Security guidance requires sanitizing any dynamic input used in selectors or test data and avoiding execution of untrusted code in the browser context.

When to use it

Verifying UI flows and user interactions on a local dev server
Debugging intermittent frontend failures with screenshots and console logs
Capturing DOM or visual state for bug reports
Automating repetitive manual checks during development
Building local acceptance or integration tests before CI integration

Best practices

Always wait for page.wait_for_load_state('networkidle') before inspecting dynamic pages
Sanitize and escape all dynamic content inserted into selectors or page scripts
Use descriptive selectors (text=, role=, data-testid) and avoid selectors derived from untrusted input
Run Chromium headless for CI and automation; close browsers and contexts in finally blocks or use context managers
Capture screenshots, console messages, and network activity on errors for faster diagnosis

Example use cases

Take a full-page screenshot after navigation to reproduce a visual bug
Run a quick smoke test: load app, assert a key header and dashboard URL
Record and reuse authentication state across contexts for multi-page tests
Attach page.on handlers to stream browser console logs and network requests while reproducing an issue
Use page.content() and locator lists to discover selectors when inspecting a dynamic UI

FAQ

Wait for networkidle and use page.wait_for_selector() for key elements. Prefer stable attributes (ids, data-testid, role) and add small explicit waits only when necessary.

Is it safe to include user input in selectors?

No. Never insert unvalidated user input into selectors. Always sanitize and escape dynamic values before using them in queries or page.evaluate calls.