playwright

Automate browser navigation, form filling, screenshots, and data extraction via Playwright CLI.

Updated Mar 21, 2026
One-click install
npx skills add https://github.com/DanialHaseeb/dotfiles --skill playwright-danialhaseeb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/DanialHaseeb/dotfiles/tree/main/codex/skills/playwright
Command: npx skills add https://github.com/DanialHaseeb/dotfiles --skill playwright-danialhaseeb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires npx, @playwright/cli, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the manual, error-prone process of interacting with and debugging web UIs by driving a real browser from the terminal to navigate, fill forms, take snapshots, capture screenshots, trace flows, and extract content.

Core Features & Use Cases

  • CLI-first browser automation using a wrapper that runs playwright-cli via npx so the CLI works without a global install.
  • Stable element snapshot workflow to capture element refs, interact reliably, and re-snapshot after navigation or significant DOM changes.
  • Artifacts and debugging: capture screenshots, PDFs, traces, and console/network output; use session isolation for reproducible runs and store outputs under output/playwright/.
  • Common uses: form filling and submission, data extraction from pages, multi-tab flows, UI-flow debugging with tracing, and quick visual checks with headed runs.

Quick Start

Open a URL with the wrapper script, take a snapshot, interact with elements to reproduce the flow, and save a screenshot to output/playwright/session1/.

Frequently Asked Questions about playwright

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

FAQPage Schema
How do I automate browser interactions and take screenshots from the terminal?

You can automate browser interactions and take screenshots from the terminal by using a wrapper script that runs playwright-cli via npx. This allows you to navigate pages, fill forms, and save visual artifacts directly to your output directory without needing a global installation.

Can I use npx to run Playwright for UI-flow debugging without a global install?

Yes, you can use npx to run Playwright for UI-flow debugging without a global install. The wrapper script executes playwright-cli via npx, allowing you to reproduce UI flows, capture traces, and log console or network output with session isolation for reproducible runs.

What is the best way to reliably interact with dynamic web pages during browser automation?

The best way to reliably interact with dynamic web pages is to use a stable element snapshot workflow. You capture element refs from a snapshot, interact with the elements, and then re-snapshot after navigation or significant DOM changes to ensure your automation scripts target the correct elements.

How do I debug UI flows and capture console output using Playwright in a CLI workflow?

You debug UI flows and capture console output by running the browser automation wrapper with tracing enabled. This captures screenshots, traces, and console or network output during your session, storing all debugging artifacts under a specific output directory for later analysis.

Does this terminal-based browser automation support session isolation for reproducible runs?

Yes, this terminal-based browser automation supports session isolation for reproducible runs. It isolates browser sessions to ensure consistent execution environments and stores all generated artifacts, such as screenshots and traces, under a structured output directory.