Skip to content

Commit b51e41a

Browse files
ruifigueiraruifigueira
authored
Merge pull request #8 from cloudflare/merge-upstream
2 parents ce31331 + 8158339 commit b51e41a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+8782
-3544
lines changed

‎.github/workflows/ci.yml

+30-4
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,30 @@ on:
77
branches: [ main ]
88

99
jobs:
10-
build-and-test:
10+
lint:
1111
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v4
14+
- name: Use Node.js 18
15+
uses: actions/setup-node@v4
16+
with:
17+
node-version: '18'
18+
cache: 'npm'
19+
- name: Install dependencies
20+
run: npm ci
21+
- run: npm run build
22+
- name: Run ESLint
23+
run: npm run lint
24+
- run: npm run update-readme
25+
- name: Ensure no changes
26+
run: git diff --exit-code
27+
28+
test:
29+
strategy:
30+
fail-fast: false
31+
matrix:
32+
os: [ubuntu-latest, macos-latest, windows-latest]
33+
runs-on: ${{ matrix.os }}
1234

1335
steps:
1436
- uses: actions/checkout@v4
@@ -22,8 +44,12 @@ jobs:
2244
- name: Install dependencies
2345
run: npm ci
2446

25-
- name: Run linting
26-
run: npm run lint
47+
- name: Playwright install
48+
run: npx playwright install --with-deps
49+
50+
- name: Install MS Edge
51+
if: ${{ matrix.os == 'macos-latest' }} # MS Edge is not preinstalled on macOS runners.
52+
run: npx playwright install msedge
2753

2854
- name: Build
2955
run: npm run build
@@ -32,4 +58,4 @@ jobs:
3258
run: npx playwright install --with-deps
3359

3460
- name: Run tests
35-
run: npm test
61+
run: npm test -- --forbid-only

‎.github/workflows/publish.yml

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@ on:
55
jobs:
66
publish-npm:
77
runs-on: ubuntu-latest
8+
permissions:
9+
contents: read
10+
id-token: write
811
steps:
912
- uses: actions/checkout@v4
1013
- uses: actions/setup-node@v4
1114
with:
1215
node-version: 18
1316
registry-url: https://registry.npmjs.org/
1417
- run: npm ci
18+
- run: npx playwright install --with-deps
1519
- run: npm run build
1620
- run: npm run lint
17-
- run: npm run test
18-
- run: npm publish
21+
- run: npm run ctest
22+
- run: npm publish --provenance
1923
env:
2024
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
lib/
22
node_modules/
33
test-results/
4+
.vscode/mcp.json

‎Dockerfile

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node:22-bookworm-slim
2+
3+
# Set the working directory
4+
WORKDIR /app
5+
6+
# Copy package.json and package-lock.json at this stage to leverage the build cache
7+
COPY package*.json ./
8+
9+
# Install dependencies
10+
RUN npm ci
11+
12+
# Install chromium and its dependencies, but only for headless mode
13+
RUN npx -y playwright install --with-deps --only-shell chromium
14+
15+
# Copy the rest of the app
16+
COPY . .
17+
18+
# Build the app
19+
RUN npm run build
20+
21+
# Run in headless and only with chromium (other browsers need more dependencies not included in this image)
22+
ENTRYPOINT ["node", "cli.js", "--headless", "--browser", "chromium"]

‎README.md

+245-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## Cloudflare Playwright MCP
22

3+
[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/playwright-mcp/tree/main/cloudflare/example)
4+
35
### Overview
46

57
This project leverages Playwright for automated browser testing and integrates with Cloudflare Workers, [Browser Rendering](https://developers.cloudflare.com/browser-rendering/) and [`@cloudflare/playwright`](https://github.com/cloudflare/playwright) for deployment.
@@ -13,9 +15,16 @@ Follow these steps to set up and deploy the project:
1315
npm ci
1416
```
1517

16-
2. Deploy to Cloudflare Workers:
18+
2. Build:
19+
```bash
20+
cd cloudflare
21+
npm run build
22+
```
23+
24+
3. Deploy to Cloudflare Workers:
1725

1826
```bash
27+
cd cloudflare/example
1928
npx wrangler deploy
2029
```
2130

@@ -104,3 +113,238 @@ code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"htt
104113
```
105114

106115
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
116+
117+
### Tool Modes
118+
119+
The tools are available in two modes:
120+
121+
1. **Snapshot Mode** (default): Uses accessibility snapshots for better performance and reliability
122+
2. **Vision Mode**: Uses screenshots for visual-based interactions
123+
124+
Vision Mode works best with the computer use models that are able to interact with elements using
125+
X Y coordinate space, based on the provided screenshot.
126+
127+
<!--- Generated by update-readme.js -->
128+
129+
### Snapshot-based Interactions
130+
131+
<!-- NOTE: This has been generated via update-readme.js -->
132+
133+
- **browser_snapshot**
134+
- Description: Capture accessibility snapshot of the current page, this is better than screenshot
135+
- Parameters: None
136+
137+
<!-- NOTE: This has been generated via update-readme.js -->
138+
139+
- **browser_click**
140+
- Description: Perform click on a web page
141+
- Parameters:
142+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
143+
- `ref` (string): Exact target element reference from the page snapshot
144+
145+
<!-- NOTE: This has been generated via update-readme.js -->
146+
147+
- **browser_drag**
148+
- Description: Perform drag and drop between two elements
149+
- Parameters:
150+
- `startElement` (string): Human-readable source element description used to obtain the permission to interact with the element
151+
- `startRef` (string): Exact source element reference from the page snapshot
152+
- `endElement` (string): Human-readable target element description used to obtain the permission to interact with the element
153+
- `endRef` (string): Exact target element reference from the page snapshot
154+
155+
<!-- NOTE: This has been generated via update-readme.js -->
156+
157+
- **browser_hover**
158+
- Description: Hover over element on page
159+
- Parameters:
160+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
161+
- `ref` (string): Exact target element reference from the page snapshot
162+
163+
<!-- NOTE: This has been generated via update-readme.js -->
164+
165+
- **browser_type**
166+
- Description: Type text into editable element
167+
- Parameters:
168+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
169+
- `ref` (string): Exact target element reference from the page snapshot
170+
- `text` (string): Text to type into the element
171+
- `submit` (boolean, optional): Whether to submit entered text (press Enter after)
172+
- `slowly` (boolean, optional): Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.
173+
174+
<!-- NOTE: This has been generated via update-readme.js -->
175+
176+
- **browser_select_option**
177+
- Description: Select an option in a dropdown
178+
- Parameters:
179+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
180+
- `ref` (string): Exact target element reference from the page snapshot
181+
- `values` (array): Array of values to select in the dropdown. This can be a single value or multiple values.
182+
183+
<!-- NOTE: This has been generated via update-readme.js -->
184+
185+
- **browser_take_screenshot**
186+
- Description: Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.
187+
- Parameters:
188+
- `raw` (boolean, optional): Whether to return without compression (in PNG format). Default is false, which returns a JPEG image.
189+
- `element` (string, optional): Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.
190+
- `ref` (string, optional): Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.
191+
192+
### Vision-based Interactions
193+
194+
<!-- NOTE: This has been generated via update-readme.js -->
195+
196+
- **browser_screen_capture**
197+
- Description: Take a screenshot of the current page
198+
- Parameters: None
199+
200+
<!-- NOTE: This has been generated via update-readme.js -->
201+
202+
- **browser_screen_move_mouse**
203+
- Description: Move mouse to a given position
204+
- Parameters:
205+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
206+
- `x` (number): X coordinate
207+
- `y` (number): Y coordinate
208+
209+
<!-- NOTE: This has been generated via update-readme.js -->
210+
211+
- **browser_screen_click**
212+
- Description: Click left mouse button
213+
- Parameters:
214+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
215+
- `x` (number): X coordinate
216+
- `y` (number): Y coordinate
217+
218+
<!-- NOTE: This has been generated via update-readme.js -->
219+
220+
- **browser_screen_drag**
221+
- Description: Drag left mouse button
222+
- Parameters:
223+
- `element` (string): Human-readable element description used to obtain permission to interact with the element
224+
- `startX` (number): Start X coordinate
225+
- `startY` (number): Start Y coordinate
226+
- `endX` (number): End X coordinate
227+
- `endY` (number): End Y coordinate
228+
229+
<!-- NOTE: This has been generated via update-readme.js -->
230+
231+
- **browser_screen_type**
232+
- Description: Type text
233+
- Parameters:
234+
- `text` (string): Text to type into the element
235+
- `submit` (boolean, optional): Whether to submit entered text (press Enter after)
236+
237+
### Tab Management
238+
239+
<!-- NOTE: This has been generated via update-readme.js -->
240+
241+
- **browser_tab_list**
242+
- Description: List browser tabs
243+
- Parameters: None
244+
245+
<!-- NOTE: This has been generated via update-readme.js -->
246+
247+
- **browser_tab_new**
248+
- Description: Open a new tab
249+
- Parameters:
250+
- `url` (string, optional): The URL to navigate to in the new tab. If not provided, the new tab will be blank.
251+
252+
<!-- NOTE: This has been generated via update-readme.js -->
253+
254+
- **browser_tab_select**
255+
- Description: Select a tab by index
256+
- Parameters:
257+
- `index` (number): The index of the tab to select
258+
259+
<!-- NOTE: This has been generated via update-readme.js -->
260+
261+
- **browser_tab_close**
262+
- Description: Close a tab
263+
- Parameters:
264+
- `index` (number, optional): The index of the tab to close. Closes current tab if not provided.
265+
266+
### Navigation
267+
268+
<!-- NOTE: This has been generated via update-readme.js -->
269+
270+
- **browser_navigate**
271+
- Description: Navigate to a URL
272+
- Parameters:
273+
- `url` (string): The URL to navigate to
274+
275+
<!-- NOTE: This has been generated via update-readme.js -->
276+
277+
- **browser_navigate_back**
278+
- Description: Go back to the previous page
279+
- Parameters: None
280+
281+
<!-- NOTE: This has been generated via update-readme.js -->
282+
283+
- **browser_navigate_forward**
284+
- Description: Go forward to the next page
285+
- Parameters: None
286+
287+
### Keyboard
288+
289+
<!-- NOTE: This has been generated via update-readme.js -->
290+
291+
- **browser_press_key**
292+
- Description: Press a key on the keyboard
293+
- Parameters:
294+
- `key` (string): Name of the key to press or a character to generate, such as `ArrowLeft` or `a`
295+
296+
### Console
297+
298+
<!-- NOTE: This has been generated via update-readme.js -->
299+
300+
- **browser_console_messages**
301+
- Description: Returns all console messages
302+
- Parameters: None
303+
304+
### Files and Media
305+
306+
<!-- NOTE: This has been generated via update-readme.js -->
307+
308+
- **browser_file_upload**
309+
- Description: Upload one or multiple files
310+
- Parameters:
311+
- `paths` (array): The absolute paths to the files to upload. Can be a single file or multiple files.
312+
313+
<!-- NOTE: This has been generated via update-readme.js -->
314+
315+
- **browser_pdf_save**
316+
- Description: Save page as PDF
317+
- Parameters: None
318+
319+
### Utilities
320+
321+
<!-- NOTE: This has been generated via update-readme.js -->
322+
323+
- **browser_close**
324+
- Description: Close the page
325+
- Parameters: None
326+
327+
<!-- NOTE: This has been generated via update-readme.js -->
328+
329+
- **browser_wait**
330+
- Description: Wait for a specified time in seconds
331+
- Parameters:
332+
- `time` (number): The time to wait in seconds
333+
334+
<!-- NOTE: This has been generated via update-readme.js -->
335+
336+
- **browser_resize**
337+
- Description: Resize the browser window
338+
- Parameters:
339+
- `width` (number): Width of the browser window
340+
- `height` (number): Height of the browser window
341+
342+
<!-- NOTE: This has been generated via update-readme.js -->
343+
344+
- **browser_handle_dialog**
345+
- Description: Handle a dialog
346+
- Parameters:
347+
- `accept` (boolean): Whether to accept the dialog.
348+
- `promptText` (string, optional): The text of the prompt in case of a prompt dialog.
349+
350+
<!--- End of generated section -->

0 commit comments

Comments
 (0)