Wrap Playwright

Wrap Playwright code in Step Code to enable browser workflows as part of automated workflows and step-based processes.

Overview

The Wrap Playwright skill provides functionality for:

Wrapping Playwright browser workflow code for execution
Retrieving Playwright code from file storage
Executing browser workflows within workflow steps
Managing browser session context and data binding
Handling browser workflow results and logging

Connection Requirements

This skill uses internal services and doesn’t require external connections.

Basic Usage

// Direct Playwright code wrapping
const payload = {
  bindingData: step_data,
  code: `
    await page.goto('https://example.com');
    await page.click('#login-button');
    await page.fill('#username', 'user@example.com');
  `,
  useContextService: "context_id_if_needed",
};

Key Features

Code Execution

Direct Code Wrapping: Execute Playwright code directly
File-based Execution: Retrieve and execute code from file storage
Step Integration: Seamless integration with workflow steps
Data Binding: Access step data within Playwright code

Session Management

Context Service: Use browser context for persistent sessions
Session IDs: Track browser sessions across multiple steps
State Persistence: Maintain browser state between operations
Resource Management: Proper cleanup of browser resources

Input Formats

Direct Playwright Code

// User provides Playwright code directly
const playwrightCode = `
  await page.goto('https://app.example.com');
  await page.waitForSelector('#dashboard');
  const title = await page.textContent('h1');
  console.log('Page title:', title);
`;

File-based Code

// User specifies file name
"Wrap playwright for automation_script.js";

Common Operations

Execute Direct Code

POST: {INTERNAL_SKILL_URL}/browserautomation/code-run
{
  "bindingData": step_data,
  "code": "await page.goto('https://example.com'); await page.screenshot({path: 'screenshot.png'});",
  "useContextService": "optional_context_id"
}

Execute Code from File

// Step 1: Retrieve file from storage
GET: {INTERNAL_SKILL_URL}/filestorage/items/{filename}?get_file_contents=true

// Step 2: Execute the retrieved code
POST: {INTERNAL_SKILL_URL}/browserautomation/code-run
{
  "bindingData": step_data,
  "code": fileData.content,
  "useContextService": "optional_context_id"
}

Code Wrapping Process

Standard Headers

// Always include required imports and setup
const PLAYWRIGHT_URL = INTERNAL_SKILL_URL + "browserautomation/code-run";

Payload Structure

{
  "bindingData": step_data,           // Step data for context
  "code": "USER_PLAYWRIGHT_CODE",     // Exact user code without modifications
  "useContextService": "context_id"   // Optional context service ID
}

Response Handling

// Standard response format
{
  "output": {
    "message": "Code executed successfully",
    "success": true
  },
  "sessionId": "d6725b65-a27d-453f-b6cd-ad68071e1971"
}

File Storage Integration

Retrieve File Content

const FILESTORAGE_URL = INTERNAL_SKILL_URL + 'filestorage/items';
GET: {FILESTORAGE_URL}/{filename}?get_file_contents=true

File Response Structure

{
  "content": "// Playwright automation code\nawait page.goto('https://example.com');",
  "filename": "automation_script.js",
  "size": 1024,
  "created_at": "2025-01-15T10:30:00Z"
}

Output Structure

Final Output Format

const finalOutput = {
  log: executionLog, // Execution logs if available
  browserOutput: browserOutput, // Browser automation results
  api_response: {
    sessionId: browserOutput.sessionId, // Session ID for tracking
  },
};

With File Execution

const finalOutput = {
  log: executionLog, // Execution logs
  browserOutput: browserOutput.output, // Browser results from file execution
  api_response: {
    sessionId: browserOutput.sessionId, // Session tracking
  },
};

Context Service

Purpose

Session Persistence: Maintain browser state across multiple steps
Data Sharing: Share data between different automation steps
Resource Optimization: Reuse browser instances efficiently
State Management: Handle complex multi-step workflows

Usage

{
  "useContextService": "user_session_123"  // Specify context ID when needed
}

Common Playwright Patterns

await page.goto("https://example.com");
await page.waitForLoadState("networkidle");

Element Interaction

await page.click("#submit-button");
await page.fill('input[name="email"]', "user@example.com");
await page.selectOption("select#country", "US");

Data Extraction

const title = await page.textContent("h1");
const links = await page.$$eval("a", (links) => links.map((link) => link.href));

Screenshots and Files

await page.screenshot({ path: "screenshot.png" });
await page.pdf({ path: "document.pdf" });

Error Handling

Common Issues

Code Syntax Errors: Invalid JavaScript/Playwright syntax
Element Not Found: Selectors that don’t match page elements
Timeout Errors: Operations that exceed timeout limits
File Access: Issues retrieving code from file storage

Best Practices

// Use proper waits
await page.waitForSelector("#element");

// Handle errors gracefully
try {
  await page.click("#optional-button");
} catch (error) {
  console.log("Optional element not found");
}

Important Notes

Code Preservation: User Playwright code is inserted exactly as provided without modifications
No Logging: Don’t add log statements to user code automatically
Session Tracking: Always include sessionId in API response
File Retrieval: Use file storage API for file-based code execution
Context Optional: Context service usage is optional based on user specification
Internal URLs: Always use INTERNAL_SKILL_URL for service endpoints

Best Practices

Code Integrity: Preserve user code exactly as provided
Error Handling: Implement proper error handling for code execution
Session Management: Track browser sessions for debugging and monitoring
File Validation: Validate file existence before attempting retrieval
Resource Cleanup: Ensure proper cleanup of browser resources
Context Usage: Use context service only when explicitly specified
Logging: Maintain execution logs for troubleshooting
Response Format: Follow consistent output structure for integration

On this page

Wrap Playwright
Overview
Connection Requirements
Basic Usage
Key Features
Code Execution
Session Management
Input Formats
Direct Playwright Code
File-based Code
Common Operations
Execute Direct Code
Execute Code from File
Code Wrapping Process
Standard Headers
Payload Structure
Response Handling
File Storage Integration
Retrieve File Content
File Response Structure
Output Structure
Final Output Format
With File Execution
Context Service
Purpose
Usage
Common Playwright Patterns
Page Navigation
Element Interaction
Data Extraction
Screenshots and Files
Error Handling
Common Issues
Best Practices
Important Notes
Best Practices

Wrap Playwright

Wrap Playwright code in Step Code to enable browser workflows as part of automated workflows and step-based processes.

Overview

The Wrap Playwright skill provides functionality for:

Wrapping Playwright browser workflow code for execution
Retrieving Playwright code from file storage
Executing browser workflows within workflow steps
Managing browser session context and data binding
Handling browser workflow results and logging

Connection Requirements

This skill uses internal services and doesn’t require external connections.

Basic Usage

// Direct Playwright code wrapping
const payload = {
  bindingData: step_data,
  code: `
    await page.goto('https://example.com');
    await page.click('#login-button');
    await page.fill('#username', 'user@example.com');
  `,
  useContextService: "context_id_if_needed",
};

Key Features

Code Execution

Direct Code Wrapping: Execute Playwright code directly
File-based Execution: Retrieve and execute code from file storage
Step Integration: Seamless integration with workflow steps
Data Binding: Access step data within Playwright code

Session Management

Context Service: Use browser context for persistent sessions
Session IDs: Track browser sessions across multiple steps
State Persistence: Maintain browser state between operations
Resource Management: Proper cleanup of browser resources

Input Formats

Direct Playwright Code

// User provides Playwright code directly
const playwrightCode = `
  await page.goto('https://app.example.com');
  await page.waitForSelector('#dashboard');
  const title = await page.textContent('h1');
  console.log('Page title:', title);
`;

File-based Code

// User specifies file name
"Wrap playwright for automation_script.js";

Common Operations

Execute Direct Code

POST: {INTERNAL_SKILL_URL}/browserautomation/code-run
{
  "bindingData": step_data,
  "code": "await page.goto('https://example.com'); await page.screenshot({path: 'screenshot.png'});",
  "useContextService": "optional_context_id"
}

Execute Code from File

// Step 1: Retrieve file from storage
GET: {INTERNAL_SKILL_URL}/filestorage/items/{filename}?get_file_contents=true

// Step 2: Execute the retrieved code
POST: {INTERNAL_SKILL_URL}/browserautomation/code-run
{
  "bindingData": step_data,
  "code": fileData.content,
  "useContextService": "optional_context_id"
}

Code Wrapping Process

Standard Headers

// Always include required imports and setup
const PLAYWRIGHT_URL = INTERNAL_SKILL_URL + "browserautomation/code-run";

Payload Structure

{
  "bindingData": step_data,           // Step data for context
  "code": "USER_PLAYWRIGHT_CODE",     // Exact user code without modifications
  "useContextService": "context_id"   // Optional context service ID
}

Response Handling

// Standard response format
{
  "output": {
    "message": "Code executed successfully",
    "success": true
  },
  "sessionId": "d6725b65-a27d-453f-b6cd-ad68071e1971"
}

File Storage Integration

Retrieve File Content

const FILESTORAGE_URL = INTERNAL_SKILL_URL + 'filestorage/items';
GET: {FILESTORAGE_URL}/{filename}?get_file_contents=true

File Response Structure

{
  "content": "// Playwright automation code\nawait page.goto('https://example.com');",
  "filename": "automation_script.js",
  "size": 1024,
  "created_at": "2025-01-15T10:30:00Z"
}

Output Structure

Final Output Format

const finalOutput = {
  log: executionLog, // Execution logs if available
  browserOutput: browserOutput, // Browser automation results
  api_response: {
    sessionId: browserOutput.sessionId, // Session ID for tracking
  },
};

With File Execution

const finalOutput = {
  log: executionLog, // Execution logs
  browserOutput: browserOutput.output, // Browser results from file execution
  api_response: {
    sessionId: browserOutput.sessionId, // Session tracking
  },
};

Context Service

Purpose

Session Persistence: Maintain browser state across multiple steps
Data Sharing: Share data between different automation steps
Resource Optimization: Reuse browser instances efficiently
State Management: Handle complex multi-step workflows

Usage

{
  "useContextService": "user_session_123"  // Specify context ID when needed
}

Common Playwright Patterns

await page.goto("https://example.com");
await page.waitForLoadState("networkidle");

Element Interaction

await page.click("#submit-button");
await page.fill('input[name="email"]', "user@example.com");
await page.selectOption("select#country", "US");

Data Extraction

const title = await page.textContent("h1");
const links = await page.$$eval("a", (links) => links.map((link) => link.href));

Screenshots and Files

await page.screenshot({ path: "screenshot.png" });
await page.pdf({ path: "document.pdf" });

Error Handling

Common Issues

Code Syntax Errors: Invalid JavaScript/Playwright syntax
Element Not Found: Selectors that don’t match page elements
Timeout Errors: Operations that exceed timeout limits
File Access: Issues retrieving code from file storage

Best Practices

// Use proper waits
await page.waitForSelector("#element");

// Handle errors gracefully
try {
  await page.click("#optional-button");
} catch (error) {
  console.log("Optional element not found");
}

Important Notes

Code Preservation: User Playwright code is inserted exactly as provided without modifications
No Logging: Don’t add log statements to user code automatically
Session Tracking: Always include sessionId in API response
File Retrieval: Use file storage API for file-based code execution
Context Optional: Context service usage is optional based on user specification
Internal URLs: Always use INTERNAL_SKILL_URL for service endpoints

Best Practices

Code Integrity: Preserve user code exactly as provided
Error Handling: Implement proper error handling for code execution
Session Management: Track browser sessions for debugging and monitoring
File Validation: Validate file existence before attempting retrieval
Resource Cleanup: Ensure proper cleanup of browser resources
Context Usage: Use context service only when explicitly specified
Logging: Maintain execution logs for troubleshooting
Response Format: Follow consistent output structure for integration

On this page

Wrap Playwright
Overview
Connection Requirements
Basic Usage
Key Features
Code Execution
Session Management
Input Formats
Direct Playwright Code
File-based Code
Common Operations
Execute Direct Code
Execute Code from File
Code Wrapping Process
Standard Headers
Payload Structure
Response Handling
File Storage Integration
Retrieve File Content
File Response Structure
Output Structure
Final Output Format
With File Execution
Context Service
Purpose
Usage
Common Playwright Patterns
Page Navigation
Element Interaction
Data Extraction
Screenshots and Files
Error Handling
Common Issues
Best Practices
Important Notes
Best Practices

​Wrap Playwright

​Overview

​Connection Requirements

​Basic Usage

​Key Features

​Code Execution

​Session Management

​Input Formats

​Direct Playwright Code

​File-based Code

​Common Operations

​Execute Direct Code

​Execute Code from File

​Code Wrapping Process

​Standard Headers

​Payload Structure

​Response Handling

​File Storage Integration

​Retrieve File Content

​File Response Structure

​Output Structure

​Final Output Format

​With File Execution

​Context Service

​Purpose

​Usage

​Common Playwright Patterns

​Page Navigation

​Element Interaction

​Data Extraction

​Screenshots and Files

​Error Handling

​Common Issues

​Best Practices

​Important Notes

​Best Practices

API Documentation

​Wrap Playwright

​Overview

​Connection Requirements

​Basic Usage

​Key Features

​Code Execution

​Session Management

​Input Formats

​Direct Playwright Code

​File-based Code

​Common Operations

​Execute Direct Code

​Execute Code from File

​Code Wrapping Process

​Standard Headers

​Payload Structure

​Response Handling

​File Storage Integration

​Retrieve File Content

​File Response Structure

​Output Structure

​Final Output Format

​With File Execution

​Context Service

​Purpose

​Usage

​Common Playwright Patterns

​Page Navigation

​Element Interaction

​Data Extraction

​Screenshots and Files

​Error Handling

​Common Issues

​Best Practices

​Important Notes

​Best Practices

Wrap Playwright

Overview

Connection Requirements

Basic Usage

Key Features

Code Execution

Session Management

Input Formats

Direct Playwright Code

File-based Code

Common Operations

Execute Direct Code

Execute Code from File

Code Wrapping Process

Standard Headers

Payload Structure

Response Handling

File Storage Integration

Retrieve File Content

File Response Structure

Output Structure

Final Output Format

With File Execution

Context Service

Purpose

Usage

Common Playwright Patterns

Page Navigation

Element Interaction

Data Extraction

Screenshots and Files

Error Handling

Common Issues

Best Practices

Important Notes

Best Practices

Wrap Playwright

Overview

Connection Requirements

Basic Usage

Key Features

Code Execution

Session Management

Input Formats

Direct Playwright Code

File-based Code

Common Operations

Execute Direct Code

Execute Code from File

Code Wrapping Process

Standard Headers

Payload Structure

Response Handling

File Storage Integration

Retrieve File Content

File Response Structure

Output Structure

Final Output Format

With File Execution

Context Service

Purpose

Usage

Common Playwright Patterns

Page Navigation

Element Interaction

Data Extraction

Screenshots and Files

Error Handling

Common Issues

Best Practices

Important Notes

Best Practices