One-click install
npx skills add https://github.com/TheCardGoat/lorcana-simulator --skill playwright-cli-thecardgoat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-cli
Source: https://github.com/TheCardGoat/lorcana-simulator/tree/main/.agents/skills/playwright-cli
Command: npx skills add https://github.com/TheCardGoat/lorcana-simulator --skill playwright-cli-thecardgoat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the need to manually click, type, and debug UI flows by providing a command-line way to control a real browser and capture state.

Core Features & Use Cases

  • Browser interaction automation: open pages, click and type into elements, submit forms, and take snapshots.
  • Reliable debugging workflows: inspect DOM via snapshots and eval, record traces, capture video, and use DevTools-style console/network checks.
  • Deterministic test assistance: run Playwright tests and generate TypeScript code fragments from recorded actions.

Quick Start

Tell the AI: Open a browser, navigate to https://playwright.dev, take a snapshot, click the element with ref e15, and then output what changed.

Frequently Asked Questions about playwright-cli

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

FAQPage Schema
How do I automate browser interactions for UI testing without writing full scripts?

You can automate browser interactions by using a Playwright-driven CLI to open pages, target elements via snapshots and locators, and submit forms. This allows you to programmatically exercise web pages and capture state without writing full test scripts.

What is snapshot-based element referencing in Playwright and when do I use it?

Snapshot-based element referencing captures the current DOM state and assigns refs to elements so you can target them reliably for clicks and typing. You use it during end-to-end navigation and debugging when deterministic element selection is needed.

Can I inspect the DOM and debug browser automation flows using DevTools?

Yes, you can inspect the DOM using eval-based checks and capture DevTools-style console and network activity. The workflow supports debugging browser automation flows by recording traces, capturing video, and outputting screenshots.

Does this browser automation approach work for generating test code from recorded actions?

Yes, the approach supports deterministic test assistance by running Playwright tests and generating TypeScript code fragments from recorded actions. You can perform browser interactions via the CLI and automatically generate TypeScript test code from those recorded actions.

How do I manage network and storage state during end-to-end browser testing?

You manage network and storage state through session and storage management features within the Playwright CLI. This allows you to control storage state and inspect network activity during end-to-end navigation to ensure deterministic test execution.

What are the limitations of using a CLI for Playwright browser automation?

The primary limitation is that complex, highly conditional UI testing scenarios may require manual eval-based DOM inspection or generated code fragments rather than simple CLI commands. Optional tracing and video outputs may require additional configuration to capture effectively.