Skip to content

Commit 743877c

Browse files
committed
added playwright example
1 parent aad8acc commit 743877c

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Playwright Screenshot Example
2+
3+
This example demonstrates how to use the OpenAI Agents SDK with Playwright MCP (Machine Control Protocol) to automate browser interactions and capture screenshots.
4+
5+
## Features
6+
7+
- Navigates to websites
8+
- Captures full-page screenshots
9+
- Saves screenshots with descriptive filenames
10+
- Reports file information
11+
12+
## Requirements
13+
14+
- Node.js and npm
15+
- Python 3.9+ with the OpenAI Agents SDK installed
16+
17+
## Installation
18+
19+
Before running this example, make sure you have the Playwright MCP package available:
20+
21+
```bash
22+
# This will be installed automatically when you run the example
23+
npm install -g @playwright/mcp
24+
```
25+
26+
## Usage
27+
28+
Run the example:
29+
30+
```bash
31+
python main.py
32+
```
33+
34+
The script will:
35+
1. Launch a headless Playwright browser via the MCP server
36+
2. Navigate to OpenAI's website
37+
3. Capture screenshots
38+
4. Save them to the `screenshots` directory
39+
40+
## Customization
41+
42+
- Modify `user_request` in `main.py` to capture different websites
43+
- Remove the `--headless` flag in the MCP server configuration to see the browser in action
44+
- Extend the agent's instructions to handle more complex browser automation tasks
45+
46+
## Additional Capabilities
47+
48+
This example only demonstrates basic screenshot functionality, but the Playwright MCP server can be used for:
49+
50+
- Form filling and submission
51+
- Web scraping
52+
- UI testing
53+
- Authentication flows
54+
- And much more!
55+
56+
For more information on Playwright capabilities, see the [Playwright documentation](https://playwright.dev/docs/intro).
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import asyncio
2+
import glob
3+
import os
4+
import shutil
5+
from datetime import datetime
6+
7+
from agents import Agent, Runner, gen_trace_id, trace
8+
from agents.mcp import MCPServer, MCPServerStdio
9+
10+
11+
async def run(mcp_server: MCPServer):
12+
# Create a directory for screenshots if it doesn't exist
13+
screenshots_dir = os.path.join(os.path.dirname(__file__), "screenshots")
14+
os.makedirs(screenshots_dir, exist_ok=True)
15+
16+
# agent with enhanced instructions for screenshot capability
17+
agent = Agent(
18+
name="Web Screenshot Assistant",
19+
instructions="""
20+
You are a web screenshot assistant that can navigate to websites and capture screenshots.
21+
22+
Use the Playwright tools to:
23+
1. Navigate to websites requested by the user
24+
2. Take screenshots of the entire page or specific elements
25+
3. Save screenshots with descriptive filenames that include the website name and current date
26+
4. Report back with the location of saved screenshots
27+
28+
Follow these guidelines:
29+
- Always wait for the page to fully load before taking screenshots
30+
- If asked to capture a specific element, use page.locator() and then screenshot that element
31+
- If no specific path is provided, save screenshots to the "screenshots" directory
32+
- Generate descriptive filenames that include the website domain and current date
33+
- Always confirm successful screenshot capture and provide the filepath where it was saved
34+
- For full-page screenshots, capture the entire page scrolling content
35+
36+
When saving screenshots:
37+
- Use PNG format for better quality
38+
- Include helpful information in the filename (website, date, element if applicable)
39+
- Report success with the full path where the screenshot was saved
40+
""",
41+
mcp_servers=[mcp_server],
42+
)
43+
44+
# Gather the available tools to understand what we can do with Playwright
45+
tools = await agent.get_all_tools()
46+
print("Available tools:", [tool.name for tool in tools])
47+
48+
# Define the default screenshot path with current date
49+
today_date = datetime.now().strftime("%Y-%m-%d")
50+
default_screenshot_path = os.path.join(screenshots_dir, f"openai_{today_date}.png")
51+
52+
# Run the agent with a screenshot task
53+
user_request = f"""
54+
Please perform these steps:
55+
1. Navigate to https://example.com
56+
2. Wait for the page to fully load
57+
3. Take a screenshot of the entire page
58+
4. Save it to {default_screenshot_path}
59+
5. Then navigate to https://httpbin.org
60+
6. Take another screenshot with a descriptive filename in the screenshots directory
61+
"""
62+
63+
print(f"\nProcessing request: {user_request}\n")
64+
65+
# Run the agent with our request
66+
result = await Runner.run(starting_agent=agent, input=user_request)
67+
68+
# Display the result
69+
print("\nResult:", result)
70+
71+
# Verify the screenshots were created
72+
if os.path.exists(default_screenshot_path):
73+
print(f"\nSuccessfully created primary screenshot at: {default_screenshot_path}")
74+
# Get the file size
75+
file_size = os.path.getsize(default_screenshot_path) / 1024 # KB
76+
print(f"Screenshot size: {file_size:.2f} KB")
77+
78+
# List all screenshots created
79+
all_screenshots = glob.glob(os.path.join(screenshots_dir, "*.png"))
80+
print(f"\nAll screenshots in directory ({len(all_screenshots)}):")
81+
for screenshot in all_screenshots:
82+
file_size = os.path.getsize(screenshot) / 1024 # KB
83+
print(f" - {os.path.basename(screenshot)} ({file_size:.2f} KB)")
84+
85+
86+
async def main():
87+
# Configure the MCP server
88+
# Note: remove --headless if you want to see the browser in action
89+
async with MCPServerStdio(
90+
name="Playwright Screenshot Server",
91+
params={
92+
"command": "npx",
93+
"args": ["-y", "@playwright/mcp@latest", "--headless"],
94+
},
95+
) as server:
96+
trace_id = gen_trace_id()
97+
with trace(workflow_name="Playwright Screenshot Example", trace_id=trace_id):
98+
print(f"View trace: https://platform.openai.com/traces/{trace_id}\n")
99+
print(f"Starting Playwright server: {server}")
100+
101+
# Run our screenshot example
102+
await run(server)
103+
104+
105+
if __name__ == "__main__":
106+
asyncio.run(main())

0 commit comments

Comments
 (0)