跳到正文
cccskills
免费在 GitHub 公开

playwriter

Automate a local Chrome session while preserving logins, cookies, and extensions. Run Playwright scripts to navigate pages, fill forms, inspect content, and test authenticated workflows, with shared session state available across separate commands.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Browser automation via Playwriter (remorses) using persistent Chrome sessions and the full Playwright Page API.

集成工具Playwright

实测评分 未实测

查看安装方法

适用场景

  • Testing the Ralph web dashboard interface
  • Checking authenticated pages with an existing login
  • Testing workflows that depend on browser extensions
  • Finding page elements with labeled accessibility screenshots

包含的文件(1)

  • SKILL.md2.8 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Playwriter

Overview

Use Playwriter to run Playwright Page scripts against your local Chrome session. This preserves logins, cookies, and extensions, which is ideal for web dashboard testing and authenticated flows.

When to Use

  • Validating the Ralph web dashboard UI
  • Navigating authenticated pages without re-logging in
  • Testing flows that require browser extensions or saved state
  • Capturing accessibility snapshots for element discovery

Prerequisites

  • Install the CLI:
    npm i -g playwriter
    
  • Install the Playwriter Chrome extension (see the Playwriter repo instructions)
  • Ensure Chrome is running and the extension is enabled

Core Workflow

  1. Create a session:
    playwriter session new
    
  2. List sessions and copy the session id:
    playwriter session list
    
  3. Execute Playwright code against that session:
    playwriter -s <session_id> -e "await page.goto('https://example.com')"
    

Execution Environment

Within -e, these are available in scope:

  • page (Playwright Page)
  • context (BrowserContext)
  • state (persistent object across calls in the same session)
  • require (for loading helper modules)

Example state persistence:

playwriter -s <session_id> -e "state.lastUrl = page.url()"
playwriter -s <session_id> -e "console.log(state.lastUrl)"

Common Patterns

Navigate + click

playwriter -s <session_id> -e "await page.goto('http://localhost:3000'); await page.getByRole('button', { name: 'Run' }).click();"

Fill forms

playwriter -s <session_id> -e "await page.getByLabel('Email').fill('qa@example.com'); await page.getByLabel('Password').fill('secret'); await page.getByRole('button', { name: 'Sign in' }).click();"

Accessibility snapshots (labeled)

playwriter -s <session_id> -e "const { screenshotWithAccessibilityLabels } = require('playwriter'); await screenshotWithAccessibilityLabels(page, { path: '/tmp/a11y.png' });"

Network interception

playwriter -s <session_id> -e "await page.route('**/api/**', async route => { const res = await route.fetch(); const body = await res.json(); await route.fulfill({ json: { ...body, injected: true } }); });"

Read page content

playwriter -s <session_id> -e "const text = await page.locator('main').innerText(); console.log(text);"

Tips

  • Prefer getByRole and getByLabel for stable selectors.
  • Use accessibility snapshots to discover reliable roles and labels.
  • Keep sessions focused: reset or close them if state becomes messy.
  • For multi-step flows, store intermediate data on state.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Implement coding tasks through exploration, planning, testing, and commits. Follow test-driven development, writing failing tests before implementation, while matching existing project conventions and recording requirements, decisions, progress, and build results in separate planning documents.

中文简介正在准备中。当前显示英语简介。

  • Implement a feature from a rough idea
  • Build code from a .code-task.md specification
  • Develop through tests and reviewable steps
mikeyobrien/ralph-orchestrator31852026年10月16日 更新

Turn rough development requests or PDD implementation plans into structured task files. Each task includes technical requirements, dependencies, and acceptance criteria describing the starting conditions, action, and expected result, including unit test requirements.

中文简介正在准备中。当前显示英语简介。

  • Turning a rough feature request into implementation tasks
  • Breaking down the next unfinished step of a PDD plan
  • Defining acceptance criteria that include unit tests
mikeyobrien/ralph-orchestrator31852026年10月16日 更新

Test Ralph workflow presets using shell scripts and collect logs, completion status, iteration counts, and event metrics. Use the results to investigate configuration failures, timeouts, and problems with how work passes between roles.

中文简介正在准备中。当前显示英语简介。

  • Check presets after configuration changes
  • Validate a newly added preset
  • Audit the full preset collection
mikeyobrien/ralph-orchestrator31852026年10月16日 更新

Find development task files in a repository and review their status and dates. Filter pending, active, or completed work, view counts by status, or export task details as JSON for reporting and other tools.

中文简介正在准备中。当前显示英语简介。

  • Reviewing pending tasks before starting work
  • Checking progress before and after code-assist
  • Counting tasks by status
mikeyobrien/ralph-orchestrator31852026年10月16日 更新

pdd

免费

Turn a rough development idea into a detailed design and step-by-step implementation plan. Guided questions, research notes, and diagrams clarify requirements, while user approval at each stage keeps the planning process aligned with their decisions.

中文简介正在准备中。当前显示英语简介。

  • Clarifying requirements for a rough feature idea
  • Comparing technologies and recording research findings
  • Creating a design with diagrams and acceptance criteria
mikeyobrien/ralph-orchestrator31852026年10月16日 更新

pr-demo

免费

Create short terminal demonstrations for pull requests and documentation. Plan a script, record commands with asciinema, convert recordings to GIF or SVG, and check readability, duration, file size, and sensitive information before embedding.

中文简介正在准备中。当前显示英语简介。

  • Show a command-line feature in a pull request
  • Add an animated terminal demo to documentation
  • Create a smaller SVG version of a recording
mikeyobrien/ralph-orchestrator31852026年10月16日 更新

查看 mikeyobrien 的全部技能

报告此技能的问题