Skip to content

Conversation

moritalous
Copy link

Summary

Adds support for passing authentication headers when connecting to CDP endpoints, enabling connections to authenticated browser instances like AWS Bedrock AgentCore Browser.

Background

Modern AI agent platforms like AWS Bedrock AgentCore provide managed browser instances that require authenticated CDP connections. Currently, playwright-mcp cannot pass authentication headers when connecting to CDP endpoints, preventing integration with these enterprise-grade services.

Amazon Bedrock AgentCore Browser service provides managed, secure, cloud-based browser instances that enable AI agents to interact with websites at scale for tasks like form completion and web navigation. These browser instances require authenticated CDP connections with proper headers for security and access control.

Changes

  • Configuration: Add cdpHeaders option to browser configuration type definitions
  • CLI Support: Add --cdp-headers option with JSON parsing and validation
  • Environment Variables: Support PLAYWRIGHT_MCP_CDP_HEADERS for configuration
  • Core Implementation: Update CdpContextFactory to pass headers to Playwright's connectOverCDP
  • Error Handling: Robust JSON parsing with clear error messages
  • Testing: Add test cases for headers functionality and invalid JSON handling
  • Documentation: Update README with usage examples and environment variable support

Usage Examples

CLI Usage

bash

npx @playwright/mcp --cdp-endpoint=ws://localhost:9222 --cdp-headers='{
"Authorization": "Bearer token"}'

Environment Variable

bash

export PLAYWRIGHT_MCP_CDP_HEADERS='{"Authorization": "Bearer token"}'
npx @playwright/mcp --cdp-endpoint=ws://localhost:9222

Configuration File

json

{
 "browser": {
   "cdpEndpoint": "ws://localhost:9222",
   "cdpHeaders": {
     "Authorization": "Bearer token",
     "X-Custom-Header": "value"
   }
 }
}

Compatibility

  • Backward Compatible: All new options are optional
  • No Breaking Changes: Existing CDP connections work unchanged
  • Progressive Enhancement: New functionality only activated when headers are provided

Use Cases

This feature enables integration with:

  • AWS Bedrock AgentCore Browser: Enterprise AI agent browser automation
  • Authenticated CDP endpoints: Any browser instance requiring authentication
  • Multi-tenant systems: User-scoped browser access with authentication

References

@moritalous
Copy link
Author

@microsoft-github-policy-service agree

README.md Outdated
@@ -231,6 +233,20 @@ state [here](https://playwright.dev/docs/auth).
}
```

#### CDP Headers
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove this from the readme, it is very niche and is already mentioned above.

src/program.ts Outdated
@@ -67,6 +68,18 @@ program
console.error('The --vision option is deprecated, use --caps=vision instead');
options.caps = 'vision';
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have two different parse methods, do it like commaSeparatedList instead.

@moritalous
Copy link
Author

@pavelfeldman
Thanks for the review feedback! I've addressed both points:

  1. README.md: Removed the redundant CDP Headers section as requested
  2. Parsing consistency: Unified the CDP headers parsing to use the same pattern as commaSeparatedList - replaced manual JSON.parse() with a dedicated parseJsonObject function

@pavelfeldman
Copy link
Member

Sorry it seems like this requires a rebase now.

- Add cdpHeaders option to browser configuration
- Support --cdp-headers CLI option for JSON header specification
- Add PLAYWRIGHT_MCP_CDP_HEADERS environment variable support
- Update CdpContextFactory to pass headers to connectOverCDP
- Add JSON parsing with error handling for CLI headers
- Add tests for headers functionality and invalid JSON handling
- Update documentation with usage examples

This enables connecting to CDP endpoints that require authentication,
such as AWS Bedrock AgentCore Browser instances.

Unify CDP headers parsing and improve error messages

- Remove duplicate CDP headers documentation from README
- Replace manual JSON parsing with parseJsonObject function
- Use InvalidArgumentError for user-friendly error messages
- Maintain consistency with other option parsers like commaSeparatedList

Addresses review feedback on standardizing parse methods.

fix: resolve ESLint violations
@moritalous moritalous force-pushed the feature/cdp-headers-support branch from e88876a to ea8b6da Compare August 23, 2025 02:20
@moritalous
Copy link
Author

@pavelfeldman
I’ve completed the rebase onto the latest main branch. All conflicts have been resolved.

@@ -128,7 +128,11 @@ class CdpContextFactory extends BaseContextFactory {
}

protected override async _doObtainBrowser(): Promise<playwright.Browser> {
return playwright.chromium.connectOverCDP(this.config.browser.cdpEndpoint!);
const options: any = {};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make sure types are in order here.

src/config.ts Outdated
export function parseJsonObject(value: string | undefined): Record<string, string> | undefined {
if (!value)
return undefined;
try {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this code could be simplified a lot, did you mean to parse JSON first and then assert the type of the parsed value?

@moritalous
Copy link
Author

@pavelfeldman
I've addressed the review feedback.Please review when convenient.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants