diff --git a/.agents/skills/playwright-cli/SKILL.md b/.agents/skills/playwright-cli/SKILL.md index f648e927f6..6f34a18759 100644 --- a/.agents/skills/playwright-cli/SKILL.md +++ b/.agents/skills/playwright-cli/SKILL.md @@ -38,12 +38,20 @@ playwright-cli dblclick e7 # --submit presses Enter after filling the element playwright-cli fill e5 "user@example.com" --submit playwright-cli drag e2 e8 +# drop files or data onto an element (from outside the page) +playwright-cli drop e4 --path=./image.png +playwright-cli drop e4 --data="text/plain=hello world" playwright-cli hover e4 playwright-cli select e9 "option-value" playwright-cli upload ./document.pdf playwright-cli check e12 playwright-cli uncheck e12 playwright-cli snapshot +# search the snapshot for text or a regexp, returns matching nodes with surrounding context +playwright-cli find "Sign in" +playwright-cli find --regex "Sign (in|up)" +# wrap the regexp in slashes to add flags, e.g. /i for case-insensitive +playwright-cli find --regex "/sign (in|up)/i" playwright-cli eval "document.title" playwright-cli eval "el => el.textContent" e5 # get element id, class, or any attribute not visible in the snapshot @@ -90,6 +98,7 @@ playwright-cli mousewheel 0 100 playwright-cli screenshot playwright-cli screenshot e5 playwright-cli screenshot --filename=page.png +playwright-cli screenshot --hires playwright-cli pdf --filename=page.pdf ``` @@ -150,7 +159,8 @@ playwright-cli unroute ```bash playwright-cli console playwright-cli console warning -playwright-cli network +playwright-cli requests +playwright-cli request 5 playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])" playwright-cli run-code --filename=script.js playwright-cli tracing-start @@ -158,6 +168,23 @@ playwright-cli tracing-stop playwright-cli video-start video.webm playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000 playwright-cli video-stop + +# annotate each subsequent action (click, type, ...) with a callout naming the action and highlighting the target +playwright-cli video-show-actions --duration=600 --position=top-right +playwright-cli video-hide-actions + +# launch the dashboard for UI review / design feedback — user annotates the page, you receive the annotated screenshot, snapshot, and notes +playwright-cli show --annotate + +# generate a Playwright locator for an element from its ref or selector +playwright-cli generate-locator e5 --raw + +# show a persistent highlight overlay for an element, optionally with a custom style +playwright-cli highlight e5 +playwright-cli highlight e5 --style="outline: 3px dashed red" +# hide a single element highlight, or all page highlights when no target is given +playwright-cli highlight e5 --hide +playwright-cli highlight --hide ``` ## Raw output @@ -175,6 +202,11 @@ TOKEN=$(playwright-cli --raw cookie-get session_id) playwright-cli --raw localstorage-get theme ``` +For structured output wrapping every reply as JSON, pass --json +```bash +playwright-cli list --json +``` + ## Open parameters ```bash # Use specific browser when creating session @@ -183,13 +215,19 @@ playwright-cli open --browser=firefox playwright-cli open --browser=webkit playwright-cli open --browser=msedge +# Emulate a generic mobile device (Pixel 10 for Chromium, iPhone 17 for WebKit). +# Prefer this when a mobile layout is acceptable: mobile pages are usually +# lighter, so snapshots are smaller and cheaper. +playwright-cli open --mobile +playwright-cli open --device="iPhone 15" + # Use persistent profile (by default profile is in-memory) playwright-cli open --persistent # Use persistent profile with custom directory playwright-cli open --profile=/path/to/profile -# Connect to browser via extension -playwright-cli attach --extension +# Connect to browser via Playwright Extension +playwright-cli attach --extension=chrome # Connect to a running Chrome or Edge by channel name playwright-cli attach --cdp=chrome @@ -203,10 +241,24 @@ playwright-cli open --config=my-config.json # Close the browser playwright-cli close +# Detach from an attached browser (leaves the external browser running) +playwright-cli -s=msedge detach # Delete user data for the default session playwright-cli delete-data ``` +## URLs with `&` on Windows + +On Windows, `cmd.exe` and PowerShell treat `&` as a command separator, so URLs with multiple query parameters get truncated before `playwright-cli` runs. Escape `&` with `^&` in `cmd.exe`, or use `--%` in PowerShell: + +```batch +playwright-cli goto "https://example.com/?a=1^&b=2" +``` + +```powershell +playwright-cli --% goto "https://example.com/?a=1&b=2" +``` + ## Snapshots After each command, playwright-cli provides a snapshot of the current browser state. @@ -235,6 +287,14 @@ playwright-cli snapshot "#main" # limit snapshot depth for efficiency, take a partial snapshot afterwards playwright-cli snapshot --depth=4 playwright-cli snapshot e34 + +# include each element's bounding box as [box=x,y,width,height] +playwright-cli snapshot --boxes + +# search a large snapshot instead of capturing it all — returns matching nodes +# with 3 lines of context around each match (like grep -C) +playwright-cli find "Add to cart" +playwright-cli find --regex "\\$[0-9]+\\.[0-9]{2}" ``` ## Targeting elements @@ -282,13 +342,13 @@ playwright-cli kill-all ## Installation -If global `playwright-cli` command is not available, try a local version via `npx playwright-cli`: +If global `playwright-cli` command is not available, try a local version via `npx playwright cli`: ```bash -npx --no-install playwright-cli --version +npx --no-install playwright --version ``` -When local version is available, use `npx playwright-cli` in all commands. Otherwise, install `playwright-cli` as a global command: +When local version is available, use `npx playwright cli` in all commands. Otherwise, install `playwright-cli` as a global command: ```bash npm install -g @playwright/cli@latest @@ -325,7 +385,7 @@ playwright-cli open https://example.com playwright-cli click e4 playwright-cli fill e7 "test" playwright-cli console -playwright-cli network +playwright-cli requests playwright-cli close ``` @@ -338,6 +398,15 @@ playwright-cli tracing-stop playwright-cli close ``` +## Example: Interactive session + +Ask the user for UI review or design feedback. The user draws boxes on the live page and types comments; you receive the annotated screenshot, the snapshot of the marked region, and the user's notes. Use this whenever the user asks for "UI review", "design feedback", or to "ask the user what they think / want / mean": + +```bash +playwright-cli open https://example.com +playwright-cli show --annotate +``` + ## Specific tasks * **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md) @@ -345,7 +414,7 @@ playwright-cli close * **Running Playwright code** [references/running-code.md](references/running-code.md) * **Browser session management** [references/session-management.md](references/session-management.md) * **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) -* **Test generation** [references/test-generation.md](references/test-generation.md) +* **Test generation (plan / generate / heal)** [references/test-generation.md](references/test-generation.md) * **Tracing** [references/tracing.md](references/tracing.md) * **Video recording** [references/video-recording.md](references/video-recording.md) * **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md) diff --git a/.agents/skills/playwright-cli/references/playwright-tests.md b/.agents/skills/playwright-cli/references/playwright-tests.md index 47627c2a6a..bec2ec90e4 100644 --- a/.agents/skills/playwright-cli/references/playwright-tests.md +++ b/.agents/skills/playwright-cli/references/playwright-tests.md @@ -14,7 +14,7 @@ PLAYWRIGHT_HTML_OPEN=never npm run special-test-command To debug a failing Playwright test, run it with `--debug=cli` option. This command will pause the test at the start and print the debugging instructions. -**IMPORTANT**: run the command in the background and check the output until "Debugging Instructions" is printed. +**IMPORTANT**: run the command in the background and check the output until "Debugging Instructions" is printed. Make sure to stop the command after you have finished. Once instructions containing a session name are printed, use `playwright-cli` to attach the session and explore the page. diff --git a/.agents/skills/playwright-cli/references/running-code.md b/.agents/skills/playwright-cli/references/running-code.md index 8b35e9a41d..98b541fb54 100644 --- a/.agents/skills/playwright-cli/references/running-code.md +++ b/.agents/skills/playwright-cli/references/running-code.md @@ -11,6 +11,16 @@ playwright-cli run-code "async page => { }" ``` +You can also load the function from a file: + +```bash +playwright-cli run-code --filename=./my-script.js +``` + + +The code must be a single function expression, it is wrapped in `(...)` and evaluated. +import/export/require syntax is not supported. + ## Geolocation ```bash diff --git a/.agents/skills/playwright-cli/references/session-management.md b/.agents/skills/playwright-cli/references/session-management.md index d1650ef005..bf39acd5f4 100644 --- a/.agents/skills/playwright-cli/references/session-management.md +++ b/.agents/skills/playwright-cli/references/session-management.md @@ -129,6 +129,8 @@ playwright-cli attach --cdp=msedge-dev Supported channels: `chrome`, `chrome-beta`, `chrome-dev`, `chrome-canary`, `msedge`, `msedge-beta`, `msedge-dev`, `msedge-canary`. +When `--session` is not provided, the session is named after the channel (e.g. `--cdp=msedge` creates a session called `msedge`), so parallel attaches to Chrome and Edge don't collide on `default`. Pass `--session=` to override. + ### Attach via CDP endpoint Connect to a browser that exposes a Chrome DevTools Protocol endpoint: @@ -145,6 +147,20 @@ Connect to a browser with the Playwright extension installed: playwright-cli attach --extension ``` +### Detach + +Tear down an attached session without affecting the external browser: + +```bash +# Detach the default attached session +playwright-cli detach + +# Detach a specific attached session +playwright-cli -s=msedge detach +``` + +`detach` only works on sessions created via `attach`. For sessions created via `open`, use `close`. + ## Default Browser Session When `-s` is omitted, commands use the default browser session: diff --git a/.agents/skills/playwright-cli/references/storage-state.md b/.agents/skills/playwright-cli/references/storage-state.md index c856db5e40..bb5021a090 100644 --- a/.agents/skills/playwright-cli/references/storage-state.md +++ b/.agents/skills/playwright-cli/references/storage-state.md @@ -38,7 +38,7 @@ The saved file contains: "value": "abc123", "domain": "example.com", "path": "/", - "expires": 1735689600, + "expires": 1893456000, "httpOnly": true, "secure": true, "sameSite": "Lax" @@ -92,7 +92,7 @@ playwright-cli cookie-set session abc123 playwright-cli cookie-set session abc123 --domain=example.com --path=/ --httpOnly --secure --sameSite=Lax # Cookie with expiration (Unix timestamp) -playwright-cli cookie-set remember_me token123 --expires=1735689600 +playwright-cli cookie-set remember_me token123 --expires=1893456000 ``` ### Delete a Cookie diff --git a/.agents/skills/playwright-cli/references/test-generation.md b/.agents/skills/playwright-cli/references/test-generation.md index 7a09df387f..35a8d57d04 100644 --- a/.agents/skills/playwright-cli/references/test-generation.md +++ b/.agents/skills/playwright-cli/references/test-generation.md @@ -1,13 +1,19 @@ -# Test Generation +# Test generation (plan → generate → heal) -Generate Playwright test code automatically as you interact with the browser. +End-to-end workflow for authoring and maintaining Playwright tests with `playwright-cli`. Every `playwright-cli` action emits the equivalent Playwright TypeScript, and that generated code is the raw material for every test. The sections below can be used independently: -## How It Works +- **How generation works** — the core mechanic everything else relies on: actions become TypeScript, plus how to add assertions. +- **Plan** — explore the app, produce a spec file describing what to test. +- **Generate** — turn a spec into Playwright test files. Update the spec if it's vague or stale. +- **Heal** — diagnose failing tests, fix the code, reconcile the spec with reality. -Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code. -This code appears in the output and can be copied directly into your test files. +Plan / generate / heal lean on the same mechanic: run `npx playwright test --debug=cli` in the background, then `playwright-cli attach tw-XXXX` to drive the paused page interactively. See [playwright-tests.md](playwright-tests.md) for the debug/attach mechanics. -## Example Workflow +--- + +## 0. How generation works + +Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code. This code appears in the output and can be copied directly into your test files. ```bash # Start a session @@ -31,7 +37,7 @@ playwright-cli click e3 # await page.getByRole('button', { name: 'Sign In' }).click(); ``` -## Building a Test File +### Building a test file Collect the generated code into a Playwright test: @@ -50,9 +56,7 @@ test('login flow', async ({ page }) => { }); ``` -## Best Practices - -### 1. Use Semantic Locators +### Use semantic locators The generated code uses role-based locators when possible, which are more resilient: @@ -64,7 +68,7 @@ await page.getByRole('button', { name: 'Submit' }).click(); await page.locator('#submit-btn').click(); ``` -### 2. Explore Before Recording +### Explore before recording Take snapshots to understand the page structure before recording actions: @@ -75,14 +79,355 @@ playwright-cli snapshot playwright-cli click e5 ``` -### 3. Add Assertions Manually +### Add assertions manually + +Generated code captures actions but not assertions. Add expectations in your test using one of the recommended matchers: + +- `toBeVisible()` — element is rendered and visible +- `toHaveText(text)` — element text content matches +- `toHaveValue(value) / toBeEmpty()` — input/select value matches +- `toBeChecked() / toBeUnchecked()` — checkbox state matches +- `toMatchAriaSnapshot(snapshot)` — page (or locator) matches a partial accessibility snapshot + +Use `playwright-cli generate-locator ` to produce the locator expression for the assertion, and the snapshot/eval commands to capture the expected value. + +When asserting text content, make sure that generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead. + +Snapshot to be matched does not have to contain all the information - only capture what's necessary for the assertion. You can use regular expressions for unstable values. + +```bash +# Get a stable locator for an element ref to use in the assertion +playwright-cli --raw generate-locator e5 +# getByRole('button', { name: 'Submit' }) + +# Capture expected text content for toHaveText +playwright-cli --raw eval "el => el.textContent" e5 -Generated code captures actions but not assertions. Add expectations in your test: +# Capture expected input value for toHaveValue/toBeEmpty +playwright-cli --raw eval "el => el.value" e5 + +# Capture expected aria snapshot for toMatchAriaSnapshot/toBeChecked +# (whole page, or use a ref to scope to a region) +playwright-cli --raw snapshot +playwright-cli --raw snapshot e5 +``` ```typescript // Generated action await page.getByRole('button', { name: 'Submit' }).click(); -// Manual assertion -await expect(page.getByText('Success')).toBeVisible(); +// Manual assertions using the outputs above: +await expect(page.getByRole('alert', { name: 'Success' })).toBeVisible(); +await expect(page.getByTestId('main-header')).toHaveText('Welcome, user'); +await expect(page.getByRole('textbox', { name: 'Email' })).toHaveValue('user@example.com'); +await expect(page.getByRole('checkbox', { name: 'Enable notifications' })).toBeChecked(); + +// toMatchAriaSnapshot on the whole page, finds a matching region +await expect(page).toMatchAriaSnapshot(` + - heading "Welcome, user" + - link /\\d+ new messages?/ + - button "Sign out" +`); + +// toMatchAriaSnapshot scoped to a region +await expect(page.getByRole('navigation')).toMatchAriaSnapshot(` + - link "Home" + - link /\\d+ new messages?/ + - link "Profile" +`); +``` + +--- + +## 1. Planning + +Goal: produce a spec file (e.g. `specs/.plan.md`) that enumerates the scenarios to test. **Always** write the spec to a file. + +### 1.1 Prerequisite: workspace + +Check the workspace has Playwright installed before anything else: + +```bash +# Either of these confirms a workspace: +test -f playwright.config.ts || test -f playwright.config.js +npx --no-install playwright --version +``` + +If there is no Playwright install, bootstrap one and let the user pick the defaults: + +```bash +npm init playwright@latest +``` + +### 1.2 Prerequisite: seed test + +A **seed test** is a minimal test that lands the page in the state every scenario starts from: navigation to the app, any required login, feature flags, etc. Scenarios assume a fresh start *after* the seed. `--debug=cli` pauses *inside* this test, so the seed is where every planning and generation session begins. + +Minimum viable seed: + +```ts +// tests/seed.spec.ts +import { test } from '@playwright/test'; + +test('seed', async ({ page }) => { + await page.goto('https://example.com/'); +}); +``` + +Preferred — push navigation into a fixture so scenario tests reuse it: + +```ts +// tests/fixtures.ts +import { test as baseTest } from '@playwright/test'; +export { expect } from '@playwright/test'; + +export const test = baseTest.extend({ + page: async ({ page }, use) => { + await page.goto('https://example.com/'); + await use(page); + }, +}); +``` + +```ts +// tests/seed.spec.ts +import { test } from './fixtures'; + +test('seed', async ({ page }) => { + // Fixture already navigates. This empty body tells agents where to start. +}); +``` + +If no seed exists, create one that at least navigates to the app. + +### 1.3 Explore the app + +Launch the app via the seed in the background and attach: + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test tests/seed.spec.ts --debug=cli +# wait for "Debugging Instructions" and the session name tw-XXXX +playwright-cli attach tw-XXXX +``` + +Resume so the seed runs, then probe the app: + +```bash +playwright-cli resume # resume so that seed test runs fully +playwright-cli snapshot # inventory of interactive elements +playwright-cli click e5 # follow a flow +playwright-cli eval "location.href" # read URL / state +playwright-cli show --annotate # ask the user to point at something +``` + +Map out: + +- Interactive surfaces (forms, buttons, lists, filters, modals). +- Primary user journeys end-to-end. +- Edge cases: empty states, validation errors, very long input, boundary values. +- Persistence: reload, local/session storage, URL fragments. +- Navigation: which controls change the URL, back/forward behaviour. + +**Important**: Do not just open the app url with playwright-cli, always go through the test to capture any custom setup done there. +**Important**: Stop the background test when done exploring. + +### 1.4 Write the spec file + +Save under `specs/.plan.md`. Use this structure: + +```markdown +# Test Plan + +## Application Overview + + + +## Test Scenarios + +### 1. + +**Seed:** `tests/seed.spec.ts` + +#### 1.1. + +**File:** `tests//.spec.ts` + +**Steps:** + 1. + - expect: + - expect: + 2. + - expect: + +#### 1.2. +... + +### 2. + +**Seed:** `tests/seed.spec.ts` +... +``` + +Guidelines: + +- Each scenario is independent and starts from the seed's fresh state — never chain scenarios. +- Scenario names are kebab-case and match the test file name (`should-add-single-todo` → `should-add-single-todo.spec.ts`). +- Cover happy path, edge cases, validation, negative flows, persistence. +- Write steps at the user level ("Type 'Buy milk' into the input"), not the API level ("call `fill`"). +- Put observable outcomes in `- expect:` bullets; each becomes an assertion during generation. + +--- + +## 2. Generate + +Goal: take a spec file and produce Playwright test files. Optionally update the spec if it has drifted. + +### 2.1 Inputs + +- **Spec file**, e.g. `specs/basic-operations.plan.md`. +- **Target**: either a single scenario (e.g. `1.2`), a whole group (`1`), or all. +- **Seed file**, read from the `**Seed:**` line of the scenario's group. + +### 2.2 Generate one scenario + +For each target scenario, in sequence (never in parallel — scenarios share the seed session): + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test --debug=cli # background +playwright-cli attach tw-XXXX +# resume +``` + +**Do not** just open the app url with playwright-cli, always go through the test to capture any custom setup done there. + +Walk the scenario's `Steps:` one by one with `playwright-cli`, treating the spec as the plan and the live app as the source of truth. If a step is vague ("click the button" — which button?), references an element that no longer exists, or contradicts the app's actual behaviour, use your judgement: update the spec to match what the app really does, then keep going. Editing the spec mid-generation is expected. + +Every action prints the equivalent Playwright TypeScript (see [How generation works](#0-how-generation-works)): + +```bash +playwright-cli snapshot # find refs +playwright-cli fill e3 "John Doe" # -> page.getByRole('textbox', {...}).fill(...) +playwright-cli press Enter +playwright-cli click e7 +``` + +For each `- expect:` bullet, add an explicit assertion. See [How generation works](#0-how-generation-works) for details. + +Collect the generated code and write the test file at the path given in the spec: + +```ts +// spec: specs/basic-operations.plan.md +// seed: tests/seed.spec.ts +import { test, expect } from './fixtures'; // or '@playwright/test' if no fixtures file + +test.describe('Signing in and out', () => { + test('should sign in', async ({ page }) => { + // 1. Navigate to the application + // (handled by the seed fixture) + + // 2. Type 'John Doe' into the username field + await page.getByRole('textbox', { name: 'username' }).fill('John Doe'); + + // 3. Type password + await page.getByRole('textbox', { name: 'password' }).fill('TestPassword'); + + // 4. Press Enter to submit + await page.getByRole('textbox', { name: 'password' }).press('Enter'); + + await expect(page.getByRole('heading')).toContainText('Welcome, John Doe!'); + }); +}); +``` + +Rules: + +- **One test per file.** File path, describe name, and test name come verbatim from the spec (minus the ordinal). +- Prefix each numbered step with a `// N. ` comment before its actions. +- Use the describe group name verbatim from the spec (no `1.` ordinal). +- Import from `./fixtures` if the project has one; otherwise `@playwright/test`. +- **Important**: close the CLI session and stop the background test before moving to the next scenario. + +### 2.3 Generate multiple scenarios + +Loop 2.2 over the targeted scenarios one at a time, restarting the seed between each so every test starts from a clean page. This is safe to parallelise due to unique generated session names - just make sure each test run is stopped. + +### 2.4 Run generated tests + +After generation, run the new tests once: + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test tests//.spec.ts +``` + +Any failure goes to Section 3. + +--- + +## 3. Heal + +Goal: fix failing tests, and update the spec if the app's intended behaviour changed. + +### 3.1 Find failing tests + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test ``` + +Record the list of failing `:` entries and process them one at a time. Do not attempt parallel fixes — shared state and the single CLI session make that fragile. + +### 3.2 Debug one failure + +Run the single failing test in debug mode in the background, then attach: + +```bash +PLAYWRIGHT_HTML_OPEN=never npx playwright test tests//.spec.ts: --debug=cli +# wait for "Debugging Instructions" and the tw-XXXX session name +playwright-cli attach tw-XXXX +``` + +The test is paused at the start. Step forward or run to until just before the failing action or assertion, then diagnose: + +```bash +playwright-cli snapshot # did the element change / move / rename? +playwright-cli console # app-side errors? +playwright-cli requests # failed request? wrong payload? +playwright-cli show --annotate # ask the user to point somewhere +``` + +Common causes: selector drift, new wrapper element, label/ARIA rename, timing (transition, async load), assertion text updated in the app, test data leaking between runs. + +Rehearse the corrected interaction with `playwright-cli` — the generated code in the output is what you paste back into the test. + +### 3.3 Apply the fix + +Edit the test file: update the locator, assertion, step order, or inputs to match the corrected behaviour. Stop the background debug run. Rerun the single test to confirm green. + +Never skip hooks or add sleeps as a fix. Never use `networkidle`. + +### 3.4 Reconcile with the spec + +Open the spec referenced by the `// spec:` header in the test file and locate the scenario that matches the test. + +- **Fix was purely technical** (locator drift, better assertion shape) and the spec's user-level behaviour still matches the app → leave the spec alone. +- **Fix changed user-visible steps, inputs, order, or expected outcomes** that the spec describes → update the spec to match reality. Keep the scenario id and file path stable; only the step / expect lines change. +- **Unclear whether the app change is intentional** (spec is stale) **or a regression** (test was right, app is wrong) → **stop and ask the user**. Provide: + - the scenario id (e.g. `2.3`), + - the spec lines that no longer match, + - the observed app behaviour (quote a snapshot excerpt or a concrete outcome). + +Only after the user answers, either update the spec (intentional change) or file/flag the test as covering a bug (regression). + +### 3.5 Iteration and giving up + +- Fix failures one at a time; rerun after each. +- If after thorough investigation you are confident the test is correct but the app is wrong *and* the user has confirmed it's a bug: mark the test `test.fixme(...)` with a comment pointing at the user's decision or issue link. Never silently skip. + +--- + +## Cross-references + +| For... | See | +|---|---| +| `--debug=cli` / attach mechanics | [playwright-tests.md](playwright-tests.md) | +| Mocking requests during exploration/generation | [request-mocking.md](request-mocking.md) | +| Managing the CLI browser session | [session-management.md](session-management.md) | diff --git a/.agents/skills/playwright-cli/references/video-recording.md b/.agents/skills/playwright-cli/references/video-recording.md index ce9ad6a6a1..5209d21ee0 100644 --- a/.agents/skills/playwright-cli/references/video-recording.md +++ b/.agents/skills/playwright-cli/references/video-recording.md @@ -40,7 +40,7 @@ playwright-cli video-start recordings/checkout-test-run-42.webm ### 2. Record entire hero scripts. When recording a video for the user or as a proof of work, it is best to create a code snippet and execute it with run-code. -It allows pulling appropriate pauses between the actions and annotating the video. There are new Playwright APIs for that. +It allows inserting appropriate pauses between the actions and annotating the video. There are new Playwright APIs for that. 1) Perform scenario using CLI and take note of all locators and actions. You'll need those locators to request their bounding boxes for highlight. 2) Create a file with the intended script for video (below). Use pressSequentially w/ delay for nice typing, make reasonable pauses. diff --git a/DEVELOPER.md b/DEVELOPER.md index 38b4425f8f..a3aeee5301 100644 --- a/DEVELOPER.md +++ b/DEVELOPER.md @@ -70,6 +70,16 @@ pnpm run lint:ng pnpm run lint:scss ``` +## Third-party agent skills + +Third-party agent skills are managed through [skills.sh](https://skills.sh/). +Use `pnpx skills` to add or update them so their sources and hashes are recorded +in `skills-lock.json`. + +When adding a third-party skill, add its path under `.agents/skills/` to +`.prettierignore`. Third-party skill sources must not be reformatted by this +repository's Prettier configuration. + ## API Goldens We guard our APIs against unintentional changes using API goldens based on [API Extractor](https://api-extractor.com/). diff --git a/skills-lock.json b/skills-lock.json new file mode 100644 index 0000000000..344e88f756 --- /dev/null +++ b/skills-lock.json @@ -0,0 +1,11 @@ +{ + "version": 1, + "skills": { + "playwright-cli": { + "source": "microsoft/playwright-cli", + "sourceType": "github", + "skillPath": "skills/playwright-cli/SKILL.md", + "computedHash": "f602822b51bcb6d033749c60731b8f1e80f308222fcb2e4af551905a817c6e08" + } + } +}