skills.rest
duylinhdang1998
duylinhdang1998COMMUNITY
Explore all skills by this author →
WebsiteGitHub

playwright

Automate browser UI workflows via the Playwright CLI wrapper.

Updated Apr 16, 2026
Search Tags:#cli#playwright#screenshot#snapshot#data-extraction#browser-automation#form-filling
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill playwright-duylinhdang1998
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/playwright
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill playwright-duylinhdang1998

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables reliable, terminal-driven automation and debugging of real browser interactions so users can reproduce UI flows, capture artifacts, and extract data without manual repetition.

Core Features & Use Cases

  • Automates navigation, form filling, element interaction, multi-tab workflows, and data extraction using a CLI wrapper.
  • Uses snapshot-based element references to create stable selectors and advises re-snapshotting after navigation or significant DOM changes.
  • Use case: reproduce and debug a checkout flow by opening the site, taking snapshots between steps, tracing the flow, and saving screenshots and traces under a contained output folder.

Quick Start

Use the Playwright CLI wrapper to open https://example.com, run a snapshot, click element e3, and save a screenshot to output/playwright/test.

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 capture screenshots from the terminal?▼

Terminal-driven browser automation uses a CLI wrapper to execute navigation, form filling, and element interactions, saving screenshots and traces under an output folder. You run Playwright commands via npx to reproduce UI flows without manual repetition.

Can I use Playwright CLI to extract data and fill forms across multiple tabs?▼

Yes, the Playwright CLI wrapper supports multi-tab workflows, data extraction, and form filling. It automates these browser interactions by using snapshot-based element references to maintain stable selectors across different tabs.

How do snapshots work for selecting elements during browser automation?▼

Snapshots capture the current DOM state to generate stable element references like e3 for clicking. You should re-snapshot after navigation or significant DOM changes to ensure selectors remain accurate during terminal-driven UI workflows.

Do I need npx or a global Playwright CLI installation to automate UI workflows?▼

Yes, you need either npx or a global Playwright CLI installation to run the wrapper script. The wrapper handles session management and stores automation artifacts like screenshots and traces in a contained output directory.

What is the best way to debug a UI checkout flow using browser automation?▼

Debug a checkout flow by opening the site, taking snapshots between steps, and interacting with elements using snapshot references. The CLI wrapper saves screenshots and traces to an output folder for later analysis of the UI workflow.

Why should I re-snapshot after navigating to a new page during data extraction?▼

Re-snapshotting after navigation is necessary because DOM changes invalidate previous element references. Taking a fresh snapshot ensures your selectors remain stable and accurate for continued data extraction and element interaction.

Related Skills

Explore More Software Engineering Skills→
cdrgurucdrguru
1

playwright

Automate real-browser tasks via Playwright CLI from the terminal.

Community
Intermediate
maxvaegamaxvaega
146

json-parser

Parse and validate JSON data against schemas and JSONPath queries.

Community
Intermediate
peerasak-upeerasak-u

cmux

Orchestrate terminal sessions and browser workflows across multiple workspaces.

Community
Intermediate
SecurityRoninSecurityRonin
1

browser-automation

Automate browser tasks and testing across Playwright, Puppeteer, Selenium, and CDP workflows.

Official
Intermediate