### Install and Run Playwriter CLI

Source: https://github.com/remorses/playwriter/blob/main/skills/playwriter/SKILL.md

Instructions on how to install and run the Playwriter CLI. It can be executed directly if installed globally, or via npx/bunx. The `playwriter skill` command is essential for reading full documentation before usage.

```bash
playwriter skill

# If playwriter is not found:
npx playwriter@latest skill
bunx playwriter@latest skill
```

--------------------------------

### Basic Playwriter Session and Navigation

Source: https://github.com/remorses/playwriter/blob/main/skills/playwriter/SKILL.md

A minimal example demonstrating how to start a new Playwriter session and navigate to a URL using a Playwright command. This requires prior execution of `playwriter skill` to understand session management and execution context.

```bash
playwriter session new
playwriter -s 1 -e "await page.goto('https://example.com')"
```

--------------------------------

### Install and Use Playwriter CLI

Source: https://github.com/remorses/playwriter/blob/main/extension/src/welcome.html

This snippet demonstrates how to install the Playwriter CLI globally and then use it to navigate to a specific URL in the active browser tab. It requires Node.js and npm to be installed.

```bash
# install the CLI globally
npm i -g playwriter
# navigate to a URL in the active tab
playwriter -s 1 -e "await page.goto('https://example.com')"
```

--------------------------------

### Playwriter Test Setup Context

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

This TypeScript code snippet illustrates the setup process for Playwriter tests. It initializes a testing context including a browser with the extension loaded and a relay server, and provides functions to interact with the extension's service worker.

```typescript
// setup browser with extension loaded + relay server
const testCtx = await setupTestContext({
  port: 19987,
  tempDirPrefix: 'pw-test-',
  toggleExtension: true, // creates initial page with extension enabled
})

// get extension service worker to call extension functions
const serviceWorker = await getExtensionServiceWorker(testCtx.browserContext)

// toggle extension on current tab
await serviceWorker.evaluate(async () => {
  await globalThis.toggleExtensionForActiveTab()
})

// cleanup after tests
await cleanupTestContext(testCtx, cleanup)
```

--------------------------------

### Install and Run Playwriter CLI Commands

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

Instructions for installing the Playwriter CLI globally or using npx/bunx for immediate execution. It's recommended to use '@latest' for the first session command when using npx or bunx to ensure the latest version is utilized.

```bash
npm install -g playwriter@latest
# or use without installing:
npx playwriter@latest session new
bunx playwriter@latest session new
```

--------------------------------

### Install Playwriter CLI and Add Skill

Source: https://github.com/remorses/playwriter/blob/main/README.md

Installs the Playwriter command-line interface globally and adds the Playwriter skill for agent integration. This is the recommended setup for using Playwriter with AI agents.

```bash
npm i -g playwriter
npx -y skills add remorses/playwriter
```

--------------------------------

### Bootstrap Playwright Fork Repository

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

Initializes the repository, including setting up the playwright submodule, installing dependencies, generating browser scripts, and transpiling core files.

```bash
pnpm bootstrap
```

--------------------------------

### Start Playwriter Serve with Traforo Tunnel (Bash)

Source: https://github.com/remorses/playwriter/blob/main/docs/remote-access.md

Starts the Playwriter relay server on port 19988 and creates a Traforo tunnel. The tunnel exposes the server to the internet with a specified ID and token authentication. This command is intended for the host machine setup.

```bash
npx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token MY_SECRET_TOKEN
```

--------------------------------

### Grid Layout Utilities (CSS)

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Defines grid column and row spans and starts. 'col-span-3' makes an element span three columns, while 'col-start-1' and 'row-start-1' define starting points.

```css
.jf-element.col-span-3 { grid-column: span 3 / span 3; } 
.jf-element.col-start-1 { grid-column-start: 1; } 
.jf-element.row-start-1 { grid-row-start: 1; }
```

--------------------------------

### Playwright Core Build Script Example

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

Shows the simplified build script used for the playwright-core package, which primarily involves esbuild transpilation and copying vendored files.

```bash
# transpile src/**/*.ts → lib/**/*.js (0.1s)
# copy third_party/lockfile.js, third_party/extract-zip.js
```

--------------------------------

### Playwriter Code Execution Examples

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

Practical examples of executing JavaScript code via the Playwriter CLI to perform common browser automation tasks such as navigating to a URL, clicking elements, retrieving page titles, and taking screenshots. It also shows how to capture accessibility snapshots.

```bash
# Navigate to a page
playwriter -s 1 -e "state.page = await context.newPage(); await state.page.goto('https://example.com')"

# Click a button
playwriter -s 1 -e "await state.page.click('button')"

# Get page title
playwriter -s 1 -e "await state.page.title()"

# Take a screenshot
playwriter -s 1 -e "await state.page.screenshot({ path: 'screenshot.png', scale: 'css' })"

# Get accessibility snapshot
playwriter -s 1 -e "await snapshot({ page: state.page })"

# Get accessibility snapshot for a specific iframe
const frame = await state.page.locator('iframe').contentFrame()
await snapshot({ frame })
```

--------------------------------

### Create Polished Demo Videos with Playwriter

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

Generates a demo video from a recording by automatically speeding up idle sections while keeping interactions at normal speed. Requires `ffmpeg` and `ffprobe` to be installed.

```javascript
// Start recording
await recording.start({ page: state.page, outputPath: './recording.mp4' })

// ... multiple execute() calls with browser interactions ...
// Each call's timing is tracked automatically while recording is active

// Stop recording — executionTimestamps is included in the result
const recordingResult = await recording.stop({ page: state.page })

// Create demo video — idle gaps are sped up 4x (default)
const demoPath = await createDemoVideo({
  recordingPath: recordingResult.path,
  durationMs: recordingResult.duration,
  executionTimestamps: recordingResult.executionTimestamps,
  speed: 5, // optional, default 5x for idle sections
  // outputFile: './demo.mp4', // optional, defaults to recording-demo.mp4
})
console.log('Demo video:', demoPath)
```

--------------------------------

### Start Chrome Browser for Playwriter

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

Platform-specific commands to start the Google Chrome browser with a specific profile directory. This is necessary if Chrome is not running and the Playwriter extension cannot connect.

```bash
# macOS
open -a "Google Chrome" --args --profile-directory=Default

# Linux
google-chrome --profile-directory=Default &

# Windows (cmd)
start chrome.exe --profile-directory=Default
```

--------------------------------

### Install Playwriter CLI

Source: https://context7.com/remorses/playwriter/llms.txt

Installs the Playwriter command-line interface globally using npm. This command is typically run after installing the Chrome extension.

```bash
npm i -g playwriter
```

--------------------------------

### Start Playwright Server (LAN)

Source: https://github.com/remorses/playwriter/blob/main/docs/remote-access.md

Starts the Playwright server for direct LAN connections. Requires a secret token for authentication. This command is used on the host machine.

```bash
npx -y playwriter serve --token MY_SECRET_TOKEN
```

--------------------------------

### Direct Dependency Import Example in Playwright Fork

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

Illustrates how the forked Playwright core imports dependencies directly instead of relying on bundled files, reducing build time and complexity.

```typescript
// before (bundled)
export const ws = require('./utilsBundleImpl').ws

// after (direct)
import wsLibrary from 'ws'
export const ws = wsLibrary
```

--------------------------------

### Start Playwright Relay Server on Host

Source: https://github.com/remorses/playwriter/blob/main/docs/remote-access.md

Starts the Playwright relay server on the host machine, binding it to localhost. This is crucial for the Chrome extension to connect to the relay. Using `--host localhost` avoids the need for a token.

```bash
playwriter serve --host localhost
```

--------------------------------

### Analyze CDP Traffic with jq

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

Example using `jq` to parse the JSONL CDP log file, filtering and counting unique direction and method combinations for debugging.

```bash
jq -r '.direction + "\t" + (.message.method // "response")' ~/.playwriter/cdp.jsonl | uniq -c
```

--------------------------------

### Serve Playwriter for Remote Agents (Host)

Source: https://github.com/remorses/playwriter/blob/main/MCP.md

Run the Playwriter serve command on the host machine where Chrome is running. This is a prerequisite for connecting remote agents.

```bash
npx -y playwriter serve --token <secret>
```

--------------------------------

### Interact with Frames using Playwright

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/resource.md

Provides examples for accessing and interacting with frames within a web page using Playwright. It shows how to get frames by name or URL and perform actions on elements within those frames.

```javascript
// Get frame by name
const frame = page.frame('frameName')

// Get frame by URL
const frame = page.frame({ url: /frame\.html/ })

// Interact with frame content
await frame.getByText('In Frame').click()

// Get all frames
const frames = page.frames()
```

--------------------------------

### Open Page and Initial Observation (JavaScript)

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

Opens a new page or finds an existing one, navigates to a URL, prints the current URL, and takes an initial accessibility snapshot. This is the first step in the interaction feedback loop. It ensures the page is loaded and in the expected state before further actions.

```javascript
state.page = context.pages().find((p) => p.url() === 'about:blank') ?? (await context.newPage())
await state.page.goto('https://framer.com/projects/my-project', { waitUntil: 'domcontentloaded' })
console.log('URL:', state.page.url())
await snapshot({ page: state.page }).then(console.log)
```

--------------------------------

### Snapshot Framer MCP iframe Content with Playwright (contentFrame)

Source: https://github.com/remorses/playwriter/blob/main/docs/framer-iframe-snapshot-guide.md

This command performs a snapshot of the content within the Framer MCP plugin iframe. It first locates the iframe using its 'src' attribute and then uses `contentFrame()` to get a handle to the iframe's document. The `snapshot` function is then called with this frame to capture its content. This is useful for verifying the internal state of the plugin.

```bash
playwriter -s 1 -e "const frame = await page.locator(\"iframe[src*='plugins.framercdn.com']\").contentFrame(); console.log(await snapshot({ page, frame }));"
```

--------------------------------

### Tailwind CSS Transition Timing Functions

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Specifies the acceleration curve of a CSS transition. Options include 'ease-in' (starts slow, then fast), 'ease-in-out' (starts slow, speeds up, then slows down), and 'ease-out' (starts fast, then slows down). These control the feel of the animation.

```css
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
```

--------------------------------

### Environment and Metadata Configuration

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Provides environment-specific settings, including the build SHA, login status, and server date. It also includes cookie details and user-specific identifiers.

```javascript
window.__META_DATA__ = {
  env: 'prod',
  isCanary: false,
  sha: '8ba0f3679af94fe4eccbf3b6c4ef87cc69a71a12',
  isLoggedIn: true,
  isTwoffice: false,
  hasMultiAccountCookie: false,
  uaParserTags: ['m2', 'rweb', 'msw'],
  serverDate: 1768070028151,
  cookies: {
    version: '1661819456366',
    fetchedTime: 1661971138705,
    categories: {
      2: [
        'Authorization',
        'DECLINED_DATE',
        'LAST_INVITATION_VIEW',
        'NEW_SUBSCRIPTION_ACCOUNT',
        'SUBMITTED_DATE',
        '_ep_sess',
        '_mb_tk',
        '_sl',
        '_support_session',
        '_ttc_session',
        '_twitter_sess',
        'aa_u',
        'ab_decider',
        'ads_prefs',
        'aem-lang-preference',
        'app_shell_visited',
        'att',
        'auth_multi',
        'auth_token',
        'backendDataInSessionFlag',
        'bouncer_reset_cookie',
        'cd_user_id',
        'client_token',
        'cms-csp-nonce',
        'co',
        'connect.sid',
        'cookies_enabled',
        'csrf_id',
        'csrf_same_site',
        'csrf_same_site_set',
        'csrftoken',
        'ct0',
        'd_prefs',
        'daa',
        'dnt',
        'dtab_local',
        'email_read_only',
        'email_uid',
        'eu_cn',
        'fm',
        'form-lead-gen',
        'gscr',
        'gt',
        'guest_id',
        'kampyleInvitePresented',
        'kampyleSessionPageCounter',
        'kampyleUserPercentile',
        'kampyleUserSessionCount',
        'kampyleUserSessionsCount',
        'kampyle_userid',
        'kdt',
        'lang',
        'lang-preference',
        'language',
        'lastOwnerId',
        'lscr',
        'lv-ctx-',
        'lv-ctx-zzz*',
        'lv-uid',
        'm_session',
        'mdLogger',
        'md_isSurveySubmittedInSession',
        'messages',
        'mobile_ads_stat_type',
        'mobile_ads_time_interval',
        'momentmaker.tos.accepted*',
        'muc',
        'night_mode',
        'request_method',
        'scroll0',
        'scroll1',
        'sessionid',
        'shopify_app_session',
        'shopify_app_session.sig',
        'signup_ui_metrics',
        'ssa-calendar-signup',
        'studio_account',
        'timezone',
        'tooltip',
        'tweetdeck_version',
        'twid',
        'ui_metrics',
        'user_id',
        'zipbox_auth_token',
        'zipbox_forms_auth_token',
      ],
    },
  },
  userHash: '15529d2deaaa405ae1c1847f4c782c99106e2551632f774d0db913f431154121',
  userId: '722467942542282752',
};
window.__SCRIPTS_LOADED__ = {};
try {
  !(function () {
    var e = 'undefined' != typeof window ? window : 'undefined' != typeof global ? global : 'undefined' != typeof globalThis ? globalThis : 'undefined' != typeof self ? self : {},
      a = new e.Error().stack;
    a &&
      (e._sentryDebugIds || (e._sentryDebugIds = {}),
      (e._sentryDebugIds[a] = 'd82714bb-d1d0-4a40-9baf-15512dd15a9f'),
      (e._sentryDebugIdIdentifier = 'sentry-dbid-d82714bb-d1d0-4a40-9baf-15512dd1');
  })();
} catch (e) {}
```

--------------------------------

### Auto-Configure Playwriter MCP

Source: https://github.com/remorses/playwriter/blob/main/MCP.md

Automatically configure Playwriter for MCP using a command-line interface. This simplifies the setup process.

```sh
npx -y @playwriter/install-mcp playwriter@latest
```

--------------------------------

### Run Playwriter CLI Commands

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

These examples demonstrate how to run the Playwriter CLI locally using `tsx`. They cover executing arbitrary JavaScript code on a page, taking a snapshot, creating a new session, and clicking a button.

```bash
tsx playwriter/src/cli.ts -s 1 -e "await page.goto('https://example.com')"
tsx playwriter/src/cli.ts -s 1 -e "console.log(await snapshot({ page }))"
tsx playwriter/src/cli.ts session new
tsx playwriter/src/cli.ts -s 1 -e "await page.click('button')"
```

--------------------------------

### Read GitHub Repositories Source Code with opensrc

Source: https://github.com/remorses/playwriter/blob/main/AGENTS.md

Shows how to use the `opensrc` command to download the source code of GitHub repositories. It supports various input formats including npm package names, GitHub prefixes, owner/repo shorthand, full URLs, and specific branches or tags. Downloaded code is saved in the `./opensrc` directory.

```bash
opensrc zod # npm package name

# Using github: prefix
opensrc github:owner/repo

# Using owner/repo shorthand
opensrc facebook/react

# Using full GitHub URL
opensrc https://github.com/colinhacks/zod

# Fetch a specific branch or tag
opensrc owner/repo@v1.0.0
opensrc owner/repo#main

# Mix packages and repos
```

--------------------------------

### Launch Chrome with Profile and Auto Tab Capture (Windows)

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

This command starts Google Chrome on Windows using the command prompt or PowerShell. It targets the 'Default' profile and includes flags to enable automatic tab capture, requiring a specific extension ID and automatically accepting the capture.

```bash
start chrome.exe --profile-directory=Default --allowlisted-extension-id=jfeammnjpkecdekppnclgkkffahnhfhe --auto-accept-this-tab-capture
```

--------------------------------

### Fetch CDP Domain Documentation

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

These commands use `curl` to download Protocol Definition Language (PDL) files for various Chrome DevTools Protocol (CDP) domains. These files describe the available commands and events for controlling browser features. Ensure you have `curl` installed to use these commands.

```bash
curl -sL https://raw.githubusercontent.com/ChromeDevTools/devtools-protocol/master/pdl/domains/Target.pdl
curl -sL https://raw.githubusercontent.com/ChromeDevTools/devtools-protocol/master/pdl/domains/Browser.pdl
curl -sL https://raw.githubusercontent.com/ChromeDevTools/devtools-protocol/master/pdl/domains/Page.pdl
curl -sL https://raw.githubusercontent.com/ChromeDevTools/devtools-protocol/master/pdl/domains/Emulation.pdl
```

--------------------------------

### Start Playwriter Relay Server via CLI

Source: https://context7.com/remorses/playwriter/llms.txt

Starts the Playwriter relay server, which is necessary for remote access or use within Docker containers. It supports token authentication for secure connections.

```bash
# Start server with token authentication
playwriter serve --token mysecrettoken

# Start for Docker access (no token needed for localhost)
playwriter serve --host localhost

# View log file locations
playwriter logfile
# Output:
# relay: ~/.playwriter/relay-server.log
# cdp: ~/.playwriter/cdp.jsonl
```

--------------------------------

### Configure Update Fatigue and Session Settings

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Settings related to managing update fatigue and session binding. This includes timeouts for switching to an app and enabling/disabling session binding.

```configuration
rweb_update_fatigue_switch_to_app_day_timeout: { value: 7 },
rweb_update_fatigue_switch_to_app_link: { value: 'BannerSwitchToApp' },
rweb_session_binding_enabled: { value: false }
```

--------------------------------

### Complete Example: Find and Click Elements in Playwright

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/resource.md

An example demonstrating a complete workflow of finding an element by its role and clicking it, followed by waiting for the page to load. This snippet assumes `page` and `waitForPageLoad` are available.

```javascript
await page.getByRole('button', { name: 'Submit Form' }).click()
console.log('Clicked submit button')

await waitForPageLoad({ page })
console.log('Form submitted successfully')
```

--------------------------------

### Feature Switch Configuration Example

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

This JavaScript object demonstrates the structure of feature switch configurations. It includes various flags, such as '2fa_temporary_password_enabled' and a comprehensive list of country codes for 'account_country_setting_countries_whitelist'. These flags control the availability of different features within the application.

```javascript
{
  defaultConfig: {
    '2fa_temporary_password_enabled': {
      value: false
    },
    account_country_setting_countries_whitelist: {
      value: [
        'ad', 'ae', 'af', 'ag', 'ai', 'al', 'am', 'ao', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'er', 'es', 'et', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'se', 'sg', 'sh', 'si', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'st', 'sv', 'sx', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vi', 'vn', 'vu', 'wf', 'ws', 'xk', 'ye', 'yt', 'za', 'zm', 'zw'
      ],
    },
    active_ad_campaigns_query_enabled: {
      value: false
    },
    ads_spacing_client_fallback_minimum_spacing: {
      value: 3
    },
    ads_spacing_client_fallback_minimum_spacing_verified_blue: {
      value: 3
    },
    arkose_challenge_lo_web_notification_dev: {
      value: 'BF5FA6C8-9668-4AF9-AFA2-E362F56E5B71'
    },
    arkose_challenge_lo_web_notification_mobile_prod: {
      value: '6A2FD110-7C1A-47CD-82EE-D01FFB4810D7'
    },
    arkose_challenge_lo_web_notification_prod: {
      value: '50706BFE-942C-4EEC-B9AD-03F7CD268FB1'
    },
    arkose_challenge_login_web_devel: {
      value: 'DF58DD3B-DFCC-4502-91FA-EDC0DC385CFF'
    },
    arkose_challenge_login_web_prod: {
      value: '2F4F0B28-BC94-4271-8AD7-A51662E3C91C'
    },
    arkose_challenge_onboard_prod: {
      value: '4CB8C8B0-40FF-439C-9D0D-9A389ADA18CB'
    },
    arkose_challenge_open_app_dev: {
      value: '560C66A3-C8EB-4D11-BE53-A8232734AA62'
    },
    arkose_challenge_open_app_prod: {
      value: '6E8D3D6E-30D4-45F1-9838-BA3D9651AAA1'
    },
    arkose_challenge_signup_mobile_dev: {
      value: '006B5E87-7497-403E-9E0C-8FFBAAC6FA67'
    },
    arkose_challenge_signup_mobile_prod: {
      value: '867D55F2-24FD-4C56-AB6D-589EDAF5E7C5'
    },
    arkose_challenge_signup_web_dev: {
      value: 'DF58DD3B-DFCC-4502-91FA-EDC0DC385CFF'
    },
    arkose_challenge_signup_web_prod: {
      value: '2CB16598-CB82-4CF7-B332-5990DB66F3AB'
    },
    Arkose_rweb_hosted_page: {
      value: true
    },
    Arkose_use_invisible_challenge_key: {
      value: false
    },
    articles_preview_enabled: {
      value: true
    },
    articles_rest_api_enabled: {
      value: true
    },
    blue_business_admin_sidebar_module_enabled: {
      value: true
    },
    blue_business_ads_metrics: {
      value: true
    },
    blue_business_affiliates_list_order_setting_enabled: {
      value: false
    },
    blue_business_analytics: {
      value: true
    },
    blue_business_analytics_affiliate_filtering_enabled: {
      value: true
    },
    blue_business_direct_invites_enabled: {
      value: true
    },
    blue_business_display_annual_price_monthly: {
      value: true
    },
    blue_business_multi_affiliates_ui_enabled: {
      value: true
    },
    blue_business_simplify_signup_ui: {
      value: false
    },
    blue_business_tier_switching_enabled: {
      value: true
    },
    blue_business_username_change_prompt_enabled: {
      value: true
    },
    blue_business_verified_admin_enabled: {
      value: true
    },
    blue_business_vo_free_affiliate_limit: {
      value: 5
    },
    blue_business_vo_nav_for_legacy_verified: {
      value: false
    },
    blue_longer_video_enabled: {
      value: false
    },
    branded_features_is_branded_likes_on_tweet_content_enabled: {
      value: true
    },
    branded_features_search_overlay_animations_enabled: true
  }
}
```

--------------------------------

### Run Playwriter Tests

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

These commands show how to execute the Playwriter test suite. You can run all tests, specific tests by name using a pattern, or run tests in watch mode for continuous feedback during development.

```bash
pnpm test              # run all tests (takes ~90 seconds)
pnpm test -t "screenshot"  # run specific test by name
pnpm test:watch        # watch mode
```

--------------------------------

### Directly Click Elements Using Hardcoded Locators

Source: https://github.com/remorses/playwriter/blob/main/website/public/SKILL.md

This example shows how to directly click elements using their Playwright locators, such as those derived from snapshot outputs. It includes examples for clicking using ID, data-testid attributes, and role-based locators.

```javascript
await state.page.locator('[id="nav-home"]').click()
await state.page.locator('[data-testid="docs-link"]').click()
await state.page.locator('role=link[name="Blog"]').click()
```

--------------------------------

### Configure Search and Recommendation Features

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Settings related to search and recommendation functionalities. This includes enabling search for media, spaces invites, and recommendations from GraphQL.

```configuration
rweb_recommendations_sidebar_graphql_enabled: { value: true },
rweb_search_media_enabled: { value: true },
rweb_spaces_invite_search_enabled: { value: true }
```

--------------------------------

### Launch Chrome with Tab Capture Flags (macOS, Linux, Windows)

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/skill.md

These snippets show how to launch Google Chrome with flags to enable automatic tab capture for screen recording. This includes specifying the profile directory, allowing a specific extension ID, and automatically accepting tab capture requests. The commands are provided for macOS, Linux, and Windows.

```bash
# macOS
open -a "Google Chrome" --args --profile-directory=Default --allowlisted-extension-id=jfeammnjpkecdekppnclgkkffahnhfhe --auto-accept-this-tab-capture
```

```bash
# Linux
google-chrome --profile-directory=Default --allowlisted-extension-id=jfeammnjpkecdekppnclgkkffahnhfhe --auto-accept-this-tab-capture &
```

```bash
# Windows
start chrome.exe --profile-directory=Default --allowlisted-extension-id=jfeammnjpkecdekppnclgkkffahnhfhe --auto-accept-this-tab-capture
```

--------------------------------

### Start Playwriter Serve with Traforo Tunnel using Tmux (Bash)

Source: https://github.com/remorses/playwriter/blob/main/docs/remote-access.md

Starts the Playwriter relay server and Traforo tunnel within a detached tmux session for persistent operation. This ensures the remote control connection remains active even if the terminal is closed.

```bash
tmux new-session -d -s playwriter-remote
tmux send-keys -t playwriter-remote "npx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token MY_SECRET_TOKEN" Enter
```

--------------------------------

### Playwright Styles API Examples in TypeScript

Source: https://github.com/remorses/playwriter/blob/main/website/public/resources/styles-api.md

Demonstrates various use cases for the Playwright Styles API functions, `getStylesForLocator` and `formatStylesAsText`. These examples show how to retrieve styles for specific elements, include user-agent styles, find property sources, check inherited styles, and compare styles between elements. Requires Playwright and debugger-examples-types.

```typescript
import { page, getStylesForLocator, formatStylesAsText, console } from './debugger-examples-types.js'

// Example: Get styles for an element and display them
async function getElementStyles() {
  const loc = page.locator('.my-button')
  const styles = await getStylesForLocator({ locator: loc })
  console.log(formatStylesAsText(styles))
}

// Example: Inspect computed styles for a specific element
async function inspectButtonStyles() {
  const button = page.getByRole('button', { name: 'Submit' })
  const styles = await getStylesForLocator({ locator: button })

  console.log('Element:', styles.element)

  if (styles.inlineStyle) {
    console.log('Inline styles:', styles.inlineStyle)
  }

  for (const rule of styles.rules) {
    console.log(`${rule.selector}: ${JSON.stringify(rule.declarations)}`)
    if (rule.source) {
      console.log(`  Source: ${rule.source.url}:${rule.source.line}`)
    }
  }
}

// Example: Include browser default (user-agent) styles
async function getStylesWithUserAgent() {
  const loc = page.locator('input[type="text"]')
  const styles = await getStylesForLocator({
    locator: loc,
    includeUserAgentStyles: true,
  })
  console.log(formatStylesAsText(styles))
}

// Example: Find where a CSS property is defined
async function findPropertySource() {
  const loc = page.locator('.card')
  const styles = await getStylesForLocator({ locator: loc })

  const backgroundRule = styles.rules.find((r) => 'background-color' in r.declarations)
  if (backgroundRule) {
    console.log('background-color defined by:', backgroundRule.selector)
    if (backgroundRule.source) {
      console.log(`  at ${backgroundRule.source.url}:${backgroundRule.source.line}`)
    }
  }
}

// Example: Check inherited styles
async function checkInheritedStyles() {
  const loc = page.locator('.nested-text')
  const styles = await getStylesForLocator({ locator: loc })

  const inheritedRules = styles.rules.filter((r) => r.inheritedFrom)
  for (const rule of inheritedRules) {
    console.log(`Inherited from ${rule.inheritedFrom}: ${rule.selector}`)
    console.log('  Properties:', rule.declarations)
  }
}

// Example: Compare styles between two elements
async function compareStyles() {
  const primary = await getStylesForLocator({ locator: page.locator('.btn-primary') })
  const secondary = await getStylesForLocator({ locator: page.locator('.btn-secondary') })

  console.log('Primary button:')
  console.log(formatStylesAsText(primary))

  console.log('Secondary button:')
  console.log(formatStylesAsText(secondary))
}

export {
  getElementStyles,
  inspectButtonStyles,
  getStylesWithUserAgent,
  findPropertySource,
  checkInheritedStyles,
  compareStyles,
}
```

--------------------------------

### Width Utilities (CSS)

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Sets the width of elements using various units, including pixels, percentages, viewport units ('w-screen'), and 'auto'. Also includes min-width and max-width utilities.

```css
.jf-element.w-0 { width: 0px; } 
.jf-element.w-10 { width: 40px; } 
.jf-element.w-14 { width: 56px; } 
.jf-element.w-20 { width: 80px; } 
.jf-element.w-40 { width: 160px; } 
.jf-element.w-6 { width: 24px; } 
.jf-element.w-60 { width: 240px; } 
.jf-element.w-8 { width: 32px; } 
.jf-element.w-80 { width: 320px; } 
.jf-element.w-auto { width: auto; } 
.jf-element.w-fit { width: -moz-fit-content; width: fit-content; } 
.jf-element.w-full { width: 100%; } 
.jf-element.w-screen { width: 100vw; } 
.jf-element.min-w-0 { min-width: 0px; } 
.jf-element.min-w-max { min-width: -moz-max-content; min-width: max-content; } 
.jf-element.max-w-\[600px\] { max-width: 600px; } 
.jf-element.max-w-full { max-width: 100%; } 
.jf-element.max-w-screen { max-width: 100vw; }
```

--------------------------------

### Clean HTML API

Source: https://context7.com/remorses/playwriter/llms.txt

Provides a way to get a cleaned and readable version of the page's HTML content.

```APIDOC
## Clean HTML API

### Description
Gets a cleaned, readable version of page HTML.

### Methods
- `getCleanHTML(options)`: Retrieves cleaned HTML. Options include `locator`, `search`, `includeStyles`, and `showDiffSinceLastCall`.

### Request Example (Full Page HTML)
```typescript
import { getCleanHTML } from 'playwriter'

const html = await getCleanHTML({ locator: page })
```

### Request Example (Specific Element HTML)
```typescript
const navHtml = await getCleanHTML({
  locator: page.locator('nav')
})
```

### Request Example (Search within HTML)
```typescript
const matches = await getCleanHTML({
  locator: page,
  search: 'data-testid'
})
```

### Request Example (Include Styles)
```typescript
const styledHtml = await getCleanHTML({
  locator: page,
  includeStyles: true
})
```

### Request Example (Show Diff)
```typescript
const diff = await getCleanHTML({
  locator: page,
  showDiffSinceLastCall: true
})
```
```

--------------------------------

### Flexbox Grow/Shrink Utilities (CSS)

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Controls the flex grow and shrink behavior for flex items. 'flex-1' allows an item to grow and shrink, while 'flex-grow' and 'flex-shrink' control individual properties.

```css
.jf-element.flex-1 { flex: 1 1 0%; } 
.jf-element.flex-shrink { flex-shrink: 1; } 
.jf-element.shrink { flex-shrink: 1; } 
.jf-element.flex-grow { flex-grow: 1; } 
.jf-element.grow { flex-grow: 1; }
```

--------------------------------

### GET /remorses/playwriter/grep

Source: https://github.com/remorses/playwriter/blob/main/website/public/resources/editor-api.md

Searches script and stylesheet contents for a given regular expression. It can optionally filter URLs based on a pattern.

```APIDOC
## GET /remorses/playwriter/grep

### Description
Searches script and stylesheet contents for a given regular expression. It can optionally filter URLs based on a pattern.

### Method
GET

### Endpoint
/remorses/playwriter/grep

### Parameters
#### Query Parameters
- **regex** (RegExp) - Required - Regular expression to search for in file contents.
- **pattern** (RegExp) - Optional - Regex to filter which URLs to search.

### Response
#### Success Response (200)
- **matches** (Array<SearchMatch>) - Array of matches with url, line number, and line content.

#### Response Example
```json
{
  "matches": [
    {
      "url": "http://example.com/script.js",
      "lineNumber": 10,
      "lineContent": "console.log('hello');"
    }
  ]
}
```
```

--------------------------------

### getCleanHTML

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/skill.md

Gets cleaned HTML from a Playwright locator or page. Supports filtering with search and diffing against previous calls.

```APIDOC
## POST /remorses/playwriter/utility/clean-html

### Description
Get cleaned HTML from a locator or page. This function cleans HTML for compact, readable output by removing specific tags, unwrapping nested wrappers, removing empty elements, and truncating long values.

### Method
POST

### Endpoint
/remorses/playwriter/utility/clean-html

### Request Body
- **locator** (Playwright Locator|Page) - Required - The Playwright Locator or Page to get HTML from.
- **search** (string|regex) - Optional - Filter results by a string or regex. Returns the first 10 matching lines with 5 lines of context.
- **showDiffSinceLastCall** (boolean) - Optional - Returns diff since the last call. Defaults to `true`, but `false` when `search` is provided. Pass `false` to get full HTML.
- **includeStyles** (boolean) - Optional - Keep style and class attributes. Defaults to `false`.

### Request Example
```json
{
  "locator": "body",
  "search": "/button/i",
  "showDiffSinceLastCall": false
}
```

### Response
#### Success Response (200)
- **html** (string) - The cleaned HTML content.

#### Response Example
```html
<div>
  <p>Example content</p>
</div>
```
```

--------------------------------

### Create MCP Client for Testing

Source: https://github.com/remorses/playwriter/blob/main/PLAYWRITER_AGENTS.md

This TypeScript code demonstrates how to create an MCP client to interact with the Playwriter system. It shows how to establish a connection and call a tool, such as executing code on a page.

```typescript
import { createMCPClient } from './mcp-client.js'

const { client, cleanup } = await createMCPClient({ port: 19987 })
const result = await client.callTool({
  name: 'execute',
  arguments: { code: 'await page.goto("https://example.com")' },
})
```

--------------------------------

### Get Location Information

Source: https://github.com/remorses/playwriter/blob/main/website/public/resources/debugger-api.md

Retrieves the current execution location when the debugger is paused. This includes the call stack and surrounding source code for context.

```APIDOC
## GET /remorses/playwriter/location

### Description
Gets the current execution location when paused at a breakpoint. Includes the call stack and surrounding source code for context.

### Method
GET

### Endpoint
/remorses/playwriter/location

### Parameters
None

### Response
#### Success Response (200)
- **url** (string) - The URL of the current script.
- **lineNumber** (number) - The current line number.
- **callstack** (array) - An array of call stack frames.
- **sourceContext** (string) - The surrounding source code context.

#### Response Example
```json
{
  "url": "https://example.com/src/index.js",
  "lineNumber": 42,
  "callstack": [
    { "functionName": "handleRequest", "url": "https://example.com/src/index.js", "lineNumber": 42 }
  ],
  "sourceContext": "  40: function handleRequest(req) {\n  41:   const data = req.body\n> 42:   processData(data)\n  43: }"
}
```

### Errors
- **Error** - Thrown if the debugger is not paused.
```

--------------------------------

### Get accessibility tree with Playwriter

Source: https://github.com/remorses/playwriter/blob/main/extension/src/welcome.html

Captures and logs the accessibility tree of the current page within a Playwriter session. This is useful for accessibility testing and analysis.

```bash
playwriter -s 1 -e "console.log(await snapshot({ page }))"
```

--------------------------------

### Create GitHub Issue with GH CLI

Source: https://github.com/remorses/playwriter/blob/main/AGENTS.md

Demonstrates how to create a GitHub issue using the `gh issue create` command. It emphasizes using simple paragraphs and lists for the body, avoiding markdown headings. The example includes a title, body with steps to reproduce, expected vs. actual results, and an error log.

```bash
gh issue create --title "Fix login timeout" --body "The login form times out after 5 seconds on slow connections. This affects users on mobile networks.\n\nSteps to reproduce:\n1. Open login page on 3G connection\n2. Enter credentials\n3. Click submit\n\nExpected: Login completes within 30 seconds\nActual: Request times out after 5 seconds\n\nError in console:\n```bash\nError: Request timeout at /api/auth/login\n```"
```

--------------------------------

### CSS Scroll Snap Utilities

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Enables scroll snapping behavior for elements. `snap-x` enables snapping along the horizontal axis, `snap-mandatory` enforces snapping, and `snap-start`, `snap-end`, `snap-center` define alignment points.

```css
.snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); }
.snap-mandatory { --tw-scroll-snap-strictness: mandatory; }
.snap-start { scroll-snap-align: start; }
.snap-end { scroll-snap-align: end; }
.snap-center { scroll-snap-align: center; }
.snap-align-none { scroll-snap-align: none; }
```

--------------------------------

### Height Utilities (CSS)

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Sets the height of elements using various units, including pixels, percentages, viewport units ('h-screen'), and 'auto'. Also includes max-height and min-height utilities.

```css
.jf-element.h-1 { height: 4px; } 
.jf-element.h-1\/2 { height: 50%; } 
.jf-element.h-10 { height: 40px; } 
.jf-element.h-12 { height: 48px; } 
.jf-element.h-16 { height: 64px; } 
.jf-element.h-20 { height: 80px; } 
.jf-element.h-28 { height: 112px; } 
.jf-element.h-40 { height: 160px; } 
.jf-element.h-6 { height: 24px; } 
.jf-element.h-60 { height: 240px; } 
.jf-element.h-8 { height: 32px; } 
.jf-element.h-80 { height: 320px; } 
.jf-element.h-\[600px\] { height: 600px; } 
.jf-element.h-\[680px\] { height: 680px; } 
.jf-element.h-\[800px\] { height: 800px; } 
.jf-element.h-auto { height: auto; } 
.jf-element.h-full { height: 100%; } 
.jf-element.h-screen { height: 100vh; } 
.jf-element.max-h-\[600px\] { max-height: 600px; } 
.jf-element.max-h-\[680px\] { max-height: 680px; } 
.jf-element.max-h-\[800px\] { max-height: 800px; } 
.jf-element.max-h-full { max-height: 100%; } 
.jf-element.max-h-screen { max-height: 100vh; } 
.jf-element.max-h-8 { max-height: 32px; } 
.jf-element.min-h-\[600px\] { min-height: 600px; } 
.jf-element.min-h-\[680px\] { min-height: 680px; } 
.jf-element.min-h-\[800px\] { min-height: 800px; }
```

--------------------------------

### Add Playwriter Skill to Coding Agent

Source: https://github.com/remorses/playwriter/blob/main/extension/src/welcome.html

This command installs the Playwriter skill for your coding agent, enabling it to interact with the Playwriter CLI. This requires npx, which is typically included with npm.

```bash
# add playwriter skill to your coding agent
npx -y skills add remorses/playwriter
```

--------------------------------

### Control Live Broadcast and Video Features

Source: https://github.com/remorses/playwriter/blob/main/playwriter/src/assets/x.com.html

Configuration options for live broadcast and video playback features. This includes enabling rewind for live broadcasts, picture-in-picture, and various video analytics and screen-related settings.

```configuration
rweb_live_broadcast_rewind_enabled: { value: true },
rweb_live_dock_enabled: { value: true },
rweb_picture_in_picture_enabled: { value: true },
rweb_video_logged_in_analytics_enabled: { value: true },
rweb_video_pip_enabled: { value: true },
rweb_video_screen_enabled: { value: false },
rweb_video_tagging_enabled: { value: false },
rweb_video_vertical_aspect_ratio_enabled: { value: false }
```