Playwright CLI on KnightLi Blog

Playwright CLI Video Recording: Recording, Chapter Markers, Overlays, and Debugging Tradeoffs

Wed, 15 Apr 2026 08:22:45 +0800

If you want to record browser automation sessions as video for debugging, documentation, or proof of work, Playwright CLI already provides a fairly direct workflow. It produces WebM video using the VP8/VP9 codec.

This article follows the official video-recording reference and focuses on the parts that matter most in practice: the basic recording flow, chapter markers, full hero-script recording, the Overlay API, and the difference between video and tracing. The command lines, code snippets, and parameter details are preserved from the reference.

01 Basic Recording Flow

The basic pattern is simple: open the browser, start recording, perform actions, then stop and save.

# Open browser first
playwright-cli open

# Start recording
playwright-cli video-start demo.webm

# Add a chapter marker for section transitions
playwright-cli video-chapter "Getting Started" --description="Opening the homepage" --duration=2000

# Navigate and perform actions
playwright-cli goto https://example.com
playwright-cli snapshot
playwright-cli click e1
# Add another chapter
playwright-cli video-chapter "Filling Form" --description="Entering test data" --duration=2000
playwright-cli fill e2 "test input"

# Stop and save
playwright-cli video-stop

These commands already cover the most common recording flow. video-chapter is useful for inserting chapter cards between stages so the final video is easier to follow.

02 Best Practices

1. Use Descriptive Filenames

If the video is meant for other people or for later review, the filename should include enough context to make it understandable at a glance.

1
2
3

# Include context in filename
playwright-cli video-start recordings/login-flow-2024-01-15.webm
playwright-cli video-start recordings/checkout-test-run-42.webm

2. Record Entire Hero Scripts

The official recommendation is that when a video is for a user or serves as proof of work, it is best to turn the scenario into a code snippet and execute it with run-code. That gives you better control over pacing, pauses, and annotations in the video. The reference also notes that Playwright now includes APIs designed specifically for this kind of recording flow.

The suggested process is:

First perform the scenario with the CLI and note all locators and actions. You will need those locators later if you want their bounding boxes for highlight overlays.
Create a dedicated script file for the video and write it in the style shown below. Use pressSequentially with delay for smoother typing, and add pauses where they feel natural.
Use playwright-cli run-code --filename your-script.js.

Important: Overlays are pointer-events: none — they do not interfere with page interactions. You can safely keep sticky overlays visible while clicking, filling, or performing any actions on the page.

async page => {
  await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
  await page.goto('https://demo.playwright.dev/todomvc');
  // Show a chapter card — blurs the page and shows a dialog.
  // Blocks until duration expires, then auto-removes.
  // Use this for simple use cases, but always feel free to hand-craft your own beautiful
  // overlay via await page.screencast.showOverlay().
  await page.screencast.showChapter('Adding Todo Items', {
    description: 'We will add several items to the todo list.',
    duration: 2000,
  });
  // Perform action
  await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 });
  await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
  await page.waitForTimeout(1000);

  // Show next chapter
  await page.screencast.showChapter('Verifying Results', {
    description: 'Checking the item appeared in the list.',
    duration: 2000,
  });
  // Add a sticky annotation that stays while you perform actions.
  // Overlays are pointer-events: none, so they won't block clicks.
  const annotation = await page.screencast.showOverlay(`
    <div style="position: absolute; top: 8px; right: 8px;
      padding: 6px 12px; background: rgba(0,0,0,0.7);
      border-radius: 8px; font-size: 13px; color: white;">
      ✓ Item added successfully
    </div>
  `);
  // Perform more actions while the annotation is visible
  await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 });
  await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
  await page.waitForTimeout(1500);

  // Remove the annotation when done
  await annotation.dispose();
  // You can also highlight relevant locators and provide contextual annotations.
  const bounds = await page.getByText('Walk the dog').boundingBox();
  await page.screencast.showOverlay(`
    <div style="position: absolute;
      top: ${bounds.y}px;
      left: ${bounds.x}px;
      width: ${bounds.width}px;
      height: ${bounds.height}px;
      border: 1px solid red;">
    </div>
    <div style="position: absolute;
      top: ${bounds.y + bounds.height + 5}px;
      left: ${bounds.x + bounds.width / 2}px;
      transform: translateX(-50%);
      padding: 6px;
      background: #808080;
      border-radius: 10px;
      font-size: 14px;
      color: white;">Check it out, it is right above this text
    </div>
  `, { duration: 2000 });
  await page.screencast.stop();
}

The value of this script is not only that it records the flow, but that it makes the video easier to understand: chapter cards handle transitions, pressSequentially makes typing look natural, and showOverlay adds explanation, highlights, and context.

The reference closes this section with a short reminder: Embrace creativity, overlays are powerful.

03 Overlay API Summary

When recording video, the Overlay API is especially useful for section transitions, local callouts, and sticky annotations. The official summary is:

Method	Use Case
`page.screencast.showChapter(title, { description?, duration?, styleSheet? })`	Full-screen chapter card with blurred backdrop — ideal for section transitions
`page.screencast.showOverlay(html, { duration? })`	Custom HTML overlay — use for callouts, labels, highlights
`disposable.dispose()`	Remove a sticky overlay added without duration
`page.screencast.hideOverlays()` / `page.screencast.showOverlays()`	Temporarily hide/show all overlays

If your goal is to turn automation into a video people can comfortably watch, this API set is one of the most valuable pieces to learn first.

04 Tracing vs Video

The official documentation makes the difference between the two very clear:

Feature	Video	Tracing
Output	WebM file	Trace file (viewable in Trace Viewer)
Shows	Visual recording	DOM snapshots, network, console, actions
Use case	Demos, documentation	Debugging, analysis
Size	Larger	Smaller

A simple way to think about it:

video is better for demos, delivery, and reviewing what a user would see
tracing is better for debugging, inspecting action details, and analyzing execution context

They are not replacements for each other. Each serves a different purpose.

05 Limitations

The reference also points out two practical limitations:

Recording adds slight overhead to automation
Large recordings can consume significant disk space

So while video recording is very useful, it does add some runtime overhead, and longer recordings can grow large on disk.

06 Quick Summary

If you only want the essentials, remember these points:

video-start / video-stop are the core commands for recording
video-chapter adds section transitions and makes demos easier to follow
More advanced recording scenarios are best written as scripts and executed with run-code
showOverlay and showChapter can significantly improve video readability
video is best for demos, while tracing is best for debugging

If your workflow already includes automation demos, acceptance evidence, or proof-of-work recordings, video recording is a very worthwhile part of Playwright CLI to add.

References

Playwright CLI video-recording reference: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/video-recording.md
Playwright CLI project homepage: https://github.com/microsoft/playwright-cli

Playwright CLI Session Management: Multiple Browser Sessions, Isolation, Persistence, and Cleanup

Wed, 15 Apr 2026 08:15:12 +0800

If you use Playwright CLI for automation, you will quickly run into a practical question: can you open multiple browser sessions at the same time without them interfering with each other? The answer is yes, and Playwright CLI already makes this mechanism quite straightforward.

Following the official session-management reference, this article focuses on its most practical pieces: named sessions, session isolation, persistent profiles, concurrent patterns, and common cleanup commands. The command lines and command block explanations are preserved from the reference content.

01 Named Browser Sessions

The official recommendation is to use the -s parameter to isolate different browser contexts:

# Browser 1: Authentication flow
playwright-cli -s=auth open https://app.example.com/login

# Browser 2: Public browsing (separate cookies, storage)
playwright-cli -s=public open https://example.com

# Commands are isolated by browser session
playwright-cli -s=auth fill e1 "user@example.com"
playwright-cli -s=public snapshot

The key point here is that different session names map to different browser contexts. You can use auth for the sign-in flow and public for anonymous browsing, and they will not share cookies or local state.

02 What Does Browser Session Isolation Separate?

Each browser session maintains the following items independently:

Cookies
LocalStorage / SessionStorage
IndexedDB
Cache
Browsing history
Open tabs

That means if you sign in to a site in the auth session, it will not automatically affect the public session. This is especially important for multi-account testing, login-state verification, and anonymous-vs-authenticated comparisons.

The official documentation groups the most commonly used session-management commands together:

# List all browser sessions
playwright-cli list

# Stop a browser session (close the browser)
playwright-cli close                 # stop the default browser
playwright-cli -s=mysession close   # stop a named browser

# Stop all browser sessions
playwright-cli close-all

# Forcefully kill all daemon processes (for stale/zombie processes)
playwright-cli kill-all

# Delete browser session user data (profile directory)
playwright-cli delete-data              # delete default browser data
playwright-cli -s=mysession delete-data # delete named browser data

You can think of them as three kinds of operations:

list: see which sessions currently exist
close / close-all / kill-all: stop sessions or clean up stuck browser processes
delete-data: remove the user data directory for a specific session

If you just want to close a browser, close is usually the first choice. If leftover or zombie processes have already appeared, kill-all is the better fit.

04 Set a Default Session with an Environment Variable

If you do not want to repeat -s=mysession on every command, the official docs also provide an environment-variable approach:

1
2

export PLAYWRIGHT_CLI_SESSION="mysession"
playwright-cli open example.com  # Uses "mysession" automatically

After that, when you do not explicitly specify -s, the command will use mysession as the default browser session.

05 Common Pattern: Concurrent Scraping

The reference gives a very typical concurrent-scraping example:

#!/bin/bash
# Scrape multiple sites concurrently

# Start all browsers
playwright-cli -s=site1 open https://site1.com &
playwright-cli -s=site2 open https://site2.com &
playwright-cli -s=site3 open https://site3.com &
wait

# Take snapshots from each
playwright-cli -s=site1 snapshot
playwright-cli -s=site2 snapshot
playwright-cli -s=site3 snapshot

# Cleanup
playwright-cli close-all

This pattern works well when you want to open multiple sites at once, capture each page state, and then clean everything up together. Because each site runs in an independent session, they do not contaminate each other’s local state.

06 Common Pattern: A/B Test Sessions

Another common scenario is comparing different experiment variants at the same time:

# Test different user experiences
playwright-cli -s=variant-a open "https://app.com?variant=a"
playwright-cli -s=variant-b open "https://app.com?variant=b"

# Compare
playwright-cli -s=variant-a screenshot
playwright-cli -s=variant-b screenshot

This style is great for A/B page comparisons because the two variants run in separate sessions, making screenshots and state checks easier to manage independently.

07 Persisting Browser Profiles

The official documentation specifically points out that browser profiles are stored only in memory by default.

If you want to persist a browser profile to disk, add --persistent when running open:

# Use persistent profile (auto-generated location)
playwright-cli open https://example.com --persistent

# Use persistent profile with custom directory
playwright-cli open https://example.com --profile=/path/to/profile

This capability is useful when you need to reuse login state, local cache, or an extension-debugging environment over the long term. When repeatedly debugging the same site, a persistent profile is often much more efficient than starting from scratch every time.

08 The Default Browser Session

If -s is not explicitly provided, the command uses the default browser session:

# These use the same default browser session
playwright-cli open https://example.com
playwright-cli snapshot
playwright-cli close  # Stops default browser

In other words, commands without -s are executed continuously within the same default session.

In addition to the session name, the official docs also show several common startup configuration patterns:

# Open with config file
playwright-cli open https://example.com --config=.playwright/my-cli.json

# Open with specific browser
playwright-cli open https://example.com --browser=firefox

# Open in headed mode
playwright-cli open https://example.com --headed

# Open with persistent profile
playwright-cli open https://example.com --persistent

These parameters can be combined with session management. For example, you can make one named session always run in firefox, or make a specific session always launch in headed mode for easier manual inspection.

10 Best Practices from the Official Docs

The reference lists three practical best practices.

1. Use Meaningful Session Names

# GOOD: Clear purpose
playwright-cli -s=github-auth open https://github.com
playwright-cli -s=docs-scrape open https://docs.example.com

# AVOID: Generic names
playwright-cli -s=s1 open https://github.com

Session names should ideally communicate their purpose directly. Names like github-auth and docs-scrape make later script maintenance much clearer.

2. Clean Up Promptly After Use

# Stop browsers when done
playwright-cli -s=auth close
playwright-cli -s=scrape close

# Or stop all at once
playwright-cli close-all

# If browsers become unresponsive or zombie processes remain
playwright-cli kill-all

If you do not close the browser after a task finishes, the session and background processes will remain. That may not seem serious in the short term, but once tasks pile up, the environment can become messy very quickly.

3. Remove Stale Browser Data

1
2

# Remove old browser data to free disk space
playwright-cli -s=oldsession delete-data

When some old sessions are no longer needed, deleting their data directories saves disk space and also helps avoid accidentally reusing outdated state later.

11 Quick Summary

If you only want the essentials, remember these points:

-s=<name> creates and uses an independent browser session
Different sessions isolate cookies, different kinds of storage, cache, history, and tabs
close-all is useful for unified shutdown, while kill-all is useful for cleaning up abnormal leftover processes
--persistent writes the profile to disk and is useful for long-term state reuse
Session names should be meaningful, and old data should be cleaned up regularly

If your workflow already includes reused login states, parallel multi-account work, A/B comparisons, or batch scraping, then session management is basically one of the most worthwhile pieces of Playwright CLI to learn first.

References

Playwright CLI session-management reference: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md
Playwright CLI project homepage: https://github.com/microsoft/playwright-cli

Playwright CLI storage state: Save Login Sessions, Read Cookies, and Local Storage

Tue, 14 Apr 2026 22:19:55 +0800

If you use Playwright CLI for browser automation, storage state is one of the most useful features. Its job is simple: save the current login session and local browser state so you can reuse them later instead of logging in every time.

01 Save the current storage state

The most common workflow is to log in once, then export the current state to a file.

`1`	`playwright-cli storage-state save auth.json`

This command saves the current browser context state to auth.json. If you want to reuse a login session later, this is usually the first step.

02 Load an existing storage state

Once you already have a state file, you can load it directly at startup.

`1`	`playwright-cli --storage-state auth.json`

It launches the browser context with the state stored in auth.json. The usual purpose is to skip repeated login and jump straight into a signed-in environment.

03 View current cookies

If you only want to check which cookies exist in the current session, you can inspect them directly.

`1`	`playwright-cli cookies`

This command lists the cookies in the current context. It is useful when checking whether the login state exists or whether cookies were written successfully.

04 Set cookies

If you already have cookie data, you can inject it directly as well.

`1`	`playwright-cli cookies set '[{"name":"session","value":"abc","domain":"example.com","path":"/"}]'`

This is useful for auth debugging, reproducing a specific session, or injecting cookie conditions before a script runs.

05 Read localStorage

Some sites store login-related or frontend state not only in cookies, but also in localStorage.

`1`	`playwright-cli local-storage`

This command shows the localStorage content of the current page. It is especially useful when a page looks logged in but still behaves incorrectly.

06 Write localStorage

If you need to simulate specific frontend state, you can set it directly.

`1`	`playwright-cli local-storage set token abc123`

It writes the given key and value into localStorage. Common uses include injecting a token, a preference, or a frontend flag.

07 Read sessionStorage

sessionStorage is useful for checking temporary state tied to the current session.

`1`	`playwright-cli session-storage`

This command outputs the current page’s sessionStorage. If a page flow depends on one-time session data, this is a good place to inspect it.

08 Write sessionStorage

When needed, you can also set sessionStorage manually.

`1`	`playwright-cli session-storage set key value`

It is useful for reproducing page behavior that depends on temporary state, or for filling in fields required by an initialization step.

09 View IndexedDB

For heavier web apps, the most important local data may actually live in IndexedDB.

`1`	`playwright-cli indexed-db`

This command lets you inspect the current page’s IndexedDB data. It is worth checking first when you are dealing with complex SPAs, offline cache, or app-like local databases.

10 A practical workflow

If your goal is simply to reuse a login session reliably, the most practical flow is usually this:

Open the site and complete login manually.
Save the state with this command:

`1`	`playwright-cli storage-state save auth.json`

Load it directly in later runs:

`1`	`playwright-cli --storage-state auth.json`

If the page still behaves incorrectly after loading, continue by checking:

playwright-cli cookies
playwright-cli local-storage
playwright-cli session-storage
playwright-cli indexed-db

That sequence covers most cases where the restored state is incomplete.

11 What to watch out for

Three points matter most:

A storage state file is sensitive data. It may contain login cookies or tokens, so do not commit it casually.
Restoring cookies alone may not be enough. Many modern sites also depend on localStorage, sessionStorage, or IndexedDB.
State files do not stay valid forever. After cookie expiration, account changes, or environment changes, you usually need to generate them again.

12 Quick summary

If you only remember one sentence:

Playwright CLI storage state means saving the browser’s current state and reusing it in later tasks.

In practice, the most useful commands are these:

playwright-cli storage-state save auth.json
playwright-cli --storage-state auth.json
playwright-cli cookies
playwright-cli local-storage
playwright-cli session-storage
playwright-cli indexed-db

Save first, then load; if something still looks wrong, inspect cookies and the different local storage layers one by one. That is the most practical part of this reference.

References

Playwright CLI storage-state reference: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md
Playwright CLI project page: https://github.com/microsoft/playwright-cli

Getting Started with Playwright CLI: Installation, Skills, Sessions, and Essential Commands

Sun, 12 Apr 2026 14:36:58 +0800

If you have been using Claude Code, GitHub Copilot, or other coding agents for browser automation, microsoft/playwright-cli is a tool worth watching. It is not the traditional kind of browser helper meant mainly for humans typing commands by hand. Instead, it is a Playwright CLI designed for coding agents, with an emphasis on lower token overhead, a lighter command interface, and integration with Skills-based workflows.

From the official README, the core idea behind Playwright CLI is very clear: compared with MCP, which can push large tool schemas and page structure into the model context, the CLI approach is more compact and better suited for agent workflows that constantly switch between large codebases, tests, and browser automation.

01 What Playwright CLI is

playwright-cli is an open-source Playwright command-line tool from Microsoft. The official description is “CLI for common Playwright actions.” It is mainly used for tasks like these:

Opening pages and driving the browser
Recording and generating Playwright code
Capturing page snapshots to get element references
Taking screenshots and exporting PDFs
Working with coding agents for test automation and web interaction

The current GitHub README is very explicit about its positioning: if you are using coding agents, the CLI is often a better fit than Playwright MCP; if you need persistent state, richer introspection, and longer-running agentic loops, MCP still has its place.

In other words, Playwright CLI feels more like a browser automation interface built for AI coding assistants, not just a tool for engineers to click around manually.

02 Where it stands out

1. It fits agent workflows better

The official README lists Token-efficient as a key feature. It does not force full-page data into the LLM context. Instead, it lets the agent operate the browser through shorter and more focused commands.

That matters a lot for coding agents. In real projects, an agent is not only driving the browser. It also has to read code, edit files, run tests, and inspect logs. If the browser interface itself consumes too much context, the overall workflow becomes less efficient.

2. It works well with Skills

The README specifically highlights playwright-cli install --skills. That shows Microsoft is not treating it as just another shell utility, but as something that can be consumed directly by Claude Code, GitHub Copilot, and similar agents through a Skills-based workflow.

If your setup already relies on Skills, Playwright CLI should slot in naturally.

3. Session management is fairly complete

Playwright CLI supports sessions. By default, the browser profile stays in memory, so cookies and storage state are preserved across multiple CLI calls within the same session. If you add --persistent, the profile can be saved to disk and reused across browser restarts.

That makes it much more practical than tools that simply open a browser for one command and then throw everything away. It is also a better fit for long debugging cycles and longer-running agent flows.

4. It includes a visual monitoring dashboard

The README provides playwright-cli show, which opens a dashboard for observing and controlling all running browser sessions. This is especially useful when an agent is running automation in the background, because you can step in, inspect progress, and help with debugging instead of flying blind.

03 Installation and requirements

According to the current GitHub README, the basic requirements for Playwright CLI are:

Node.js 18 or newer
Claude Code, GitHub Copilot, or another coding agent

The installation commands are:

1
2

npm install -g @playwright/cli@latest
playwright-cli --help

There is one easy mistake worth calling out:

The officially recommended package right now is @playwright/cli
Do not confuse it with the old deprecated npm package playwright-cli

So the package you actually want is the scoped package, not the older historical one.

04 How to start using it

1. Install skills

If you want a coding agent to use Playwright CLI directly, the official recommendation is to install the skills first:

`1`	`playwright-cli install --skills`

The README explicitly says that Claude Code, GitHub Copilot, and similar tools will use the locally installed skills.

2. Let the agent call the CLI directly

If you do not want to handle Skills first, you can also let the agent read the CLI help output directly:

1
2

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

The README calls this “Skills-less operation.” The idea is that even without preinstalled skills, the CLI can still describe itself well enough for an agent to use it.

3. Try a minimal flow manually

The README includes a TodoMVC example that works very well as a first hands-on demo:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

This sequence is useful because it quickly shows how Playwright CLI works in practice:

open opens the page
type and press handle text input
check uses an element reference to toggle checkboxes
screenshot saves the result

05 `--headed`, sessions, and the monitoring dashboard

`--headed`

Playwright CLI is headless by default. If you want to see the browser window directly, you need to pass --headed when using open:

`1`	`playwright-cli open https://playwright.dev --headed`

This is especially helpful when debugging selectors, login flows, or any interaction that is easier to inspect visually.

sessions

The official README places a lot of emphasis on sessions. You can use different sessions to isolate different projects or sites:

1
2
3

playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list

If you are letting an agent run over a longer period, you can also pass the session through an environment variable:

`1`	`PLAYWRIGHT_CLI_SESSION=todo-app claude .`

Useful session management commands include:

1
2
3

playwright-cli list
playwright-cli close-all
playwright-cli kill-all

In practice:

list shows all sessions
close-all closes all browsers gracefully
kill-all forcefully terminates all browser processes

Monitoring dashboard

If you want to see what the agent is actually doing in the browser, you can run:

`1`	`playwright-cli show`

According to the README, this dashboard has two main views:

Session grid: shows active sessions by workspace, with live preview, URL, and page title
Session detail: shows a live view of a selected session and lets you take over mouse and keyboard input

That means Playwright CLI is not only usable from the command line. It also has a fairly mature observability layer.

06 Which commands are worth memorizing first

If this is your first time using Playwright CLI, you do not need to memorize every command up front. These are the core ones worth learning first:

Pages and interaction

playwright-cli open [url]
playwright-cli goto <url>
playwright-cli click <ref>
playwright-cli fill <ref> <text>
playwright-cli type <text>
playwright-cli hover <ref>
playwright-cli press <key>

Getting page structure

playwright-cli snapshot
playwright-cli snapshot <ref>
playwright-cli snapshot --depth=N
playwright-cli eval <func> [ref]

snapshot is especially important because many later operations depend on element references stored as ref. In practice, you usually capture a snapshot first, then use the returned element identifiers for clicking, filling, checking, or taking screenshots.

Saving output

1
2

playwright-cli screenshot
playwright-cli pdf

Tabs

playwright-cli tab-list
playwright-cli tab-new [url]
playwright-cli tab-close [index]
playwright-cli tab-select <index>

07 Who should try it

Playwright CLI is especially worth trying in these kinds of scenarios:

You are using Claude Code, Copilot, or another coding agent for E2E testing
You want a lighter browser automation interface without pushing large page structures into model context
You want one browser session to persist across multiple commands
You want to monitor agent-driven web tasks through a dashboard while they run

If your main question is how to make browser automation work efficiently with coding agents, Playwright CLI will likely feel more natural than traditional manual debugging workflows.

Playwright CLI on KnightLi Blog

Playwright CLI Video Recording: Recording, Chapter Markers, Overlays, and Debugging Tradeoffs

01 Basic Recording Flow

02 Best Practices

1. Use Descriptive Filenames

2. Record Entire Hero Scripts

03 Overlay API Summary

04 Tracing vs Video

05 Limitations

06 Quick Summary

References

Playwright CLI Session Management: Multiple Browser Sessions, Isolation, Persistence, and Cleanup

01 Named Browser Sessions

02 What Does Browser Session Isolation Separate?

03 Commands Related to Browser Sessions

04 Set a Default Session with an Environment Variable

05 Common Pattern: Concurrent Scraping

06 Common Pattern: A/B Test Sessions

07 Persisting Browser Profiles

08 The Default Browser Session

09 Session-Related Startup Configuration

10 Best Practices from the Official Docs

1. Use Meaningful Session Names

2. Clean Up Promptly After Use

3. Remove Stale Browser Data

11 Quick Summary

References

Playwright CLI storage state: Save Login Sessions, Read Cookies, and Local Storage

01 Save the current storage state

02 Load an existing storage state

03 View current cookies

04 Set cookies

05 Read localStorage

06 Write localStorage

07 Read sessionStorage

08 Write sessionStorage

09 View IndexedDB

10 A practical workflow

11 What to watch out for

12 Quick summary

References

Getting Started with Playwright CLI: Installation, Skills, Sessions, and Essential Commands

01 What Playwright CLI is

02 Where it stands out

1. It fits agent workflows better

2. It works well with Skills

3. Session management is fairly complete

4. It includes a visual monitoring dashboard

03 Installation and requirements

04 How to start using it

1. Install skills

2. Let the agent call the CLI directly

3. Try a minimal flow manually

05 --headed, sessions, and the monitoring dashboard

--headed

sessions

Monitoring dashboard

06 Which commands are worth memorizing first

Pages and interaction

Getting page structure

Saving output

Tabs

07 Who should try it

References

05 `--headed`, sessions, and the monitoring dashboard

`--headed`