mirror of
https://github.com/microsoft/playwright-mcp.git
synced 2025-07-25 16:02:26 +08:00
chore: include "playwright" keyword, add examples (#196)
This commit is contained in:
parent
5c2e11017d
commit
e7c7709b33
47
examples.md
Normal file
47
examples.md
Normal file
@ -0,0 +1,47 @@
|
||||
# Examples
|
||||
|
||||
Below are some examples of prompts to use with Playwright MCP. Draw inspiration from them to create your own. If you come up with a new prompt that works well, feel free to let us know in an issue or pull request.
|
||||
|
||||
## Write a regression test for a bug report
|
||||
|
||||
We have received a user report about a bug on our website https://debs-obrien.github.io/playwright-movies-app. I'd like you to verify if this bug exists by trying to follow the steps. If you see different behaviour, explain how it's different. If you see the same behaviour, please write me a Playwright regression test that encapsulates the buggy user flow. While writing the test, draw inspiration from the Playwright code you ran. Here's the user report:
|
||||
|
||||
Howdy. I love your movies site, but there's something fishy going on. I'm looking at The Garfield Movie - a spectacular film - but somehow it's showing the wrong length. The movie is 90mins long, I measured myself yesterday! But somehow your site is claiming 101mins. Am I looking at it wrong, or is there a bug?
|
||||
|
||||
**Output:**
|
||||
|
||||
```ts
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Regression test for bug: The Garfield Movie showing incorrect runtime
|
||||
* User reported actual runtime is 90 minutes, but site shows 101 minutes
|
||||
*/
|
||||
test('verify The Garfield Movie runtime bug', async ({ page }) => {
|
||||
// Navigate to the movies app home page
|
||||
await page.goto('https://debs-obrien.github.io/playwright-movies-app');
|
||||
|
||||
// Wait for page to load completely
|
||||
await expect(page.getByRole('heading', { name: 'Popular', level: 1 })).toBeVisible();
|
||||
|
||||
// Look for The Garfield Movie and click on it
|
||||
const garfieldMovieLink = page.getByRole('link', { name: /poster of The Garfield Movie/i });
|
||||
await expect(garfieldMovieLink).toBeVisible();
|
||||
await garfieldMovieLink.click();
|
||||
|
||||
// Verify we're on the correct movie page
|
||||
await expect(page.getByRole('heading', { name: 'The Garfield Movie', level: 1 })).toBeVisible();
|
||||
|
||||
// Check the runtime information
|
||||
// The bug: Expected runtime should be 90 min, but site shows 101 min
|
||||
const movieInfoText = await page.locator('text=English / 101 min. / 2024').textContent();
|
||||
|
||||
// This test will fail because of the bug (which is what we want to demonstrate)
|
||||
// Once fixed, this assertion should be updated to the correct runtime (90 min)
|
||||
expect(movieInfoText).toContain('90 min');
|
||||
|
||||
// Alternative assertion that verifies the incorrect runtime is still present
|
||||
// Uncomment this and comment the above assertion to verify the bug exists
|
||||
// expect(movieInfoText).toContain('101 min');
|
||||
});
|
||||
```
|
@ -228,7 +228,7 @@ class Tab {
|
||||
}
|
||||
|
||||
const result: string[] = [];
|
||||
result.push(`- Ran code:
|
||||
result.push(`- Ran Playwright code:
|
||||
\`\`\`js
|
||||
${runResult.code.join('\n')}
|
||||
\`\`\`
|
||||
|
@ -24,7 +24,7 @@ test('browser_navigate', async ({ client }) => {
|
||||
url: 'data:text/html,<html><title>Title</title><body>Hello, world!</body></html>',
|
||||
},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// Navigate to data:text/html,<html><title>Title</title><body>Hello, world!</body></html>
|
||||
await page.goto('data:text/html,<html><title>Title</title><body>Hello, world!</body></html>');
|
||||
@ -55,7 +55,7 @@ test('browser_click', async ({ client }) => {
|
||||
ref: 's1e3',
|
||||
},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// Click Submit button
|
||||
await page.getByRole('button', { name: 'Submit' }).click();
|
||||
@ -87,7 +87,7 @@ test('browser_select_option', async ({ client }) => {
|
||||
values: ['bar'],
|
||||
},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// Select options [bar] in Select
|
||||
await page.getByRole('combobox').selectOption(['bar']);
|
||||
@ -120,7 +120,7 @@ test('browser_select_option (multiple)', async ({ client }) => {
|
||||
values: ['bar', 'baz'],
|
||||
},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// Select options [bar, baz] in Select
|
||||
await page.getByRole('listbox').selectOption(['bar', 'baz']);
|
||||
@ -260,7 +260,7 @@ test('browser_resize', async ({ client }) => {
|
||||
height: 780,
|
||||
},
|
||||
});
|
||||
expect(response).toContainTextContent(`- Ran code:
|
||||
expect(response).toContainTextContent(`- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// Resize browser window to 390x780
|
||||
await page.setViewportSize({ width: 390, height: 780 });
|
||||
|
@ -41,7 +41,7 @@ test('cdp server reuse tab', async ({ cdpEndpoint, startClient }) => {
|
||||
name: 'browser_snapshot',
|
||||
arguments: {},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// <internal code to capture accessibility snapshot>
|
||||
\`\`\`
|
||||
|
@ -31,7 +31,7 @@ async function createTab(client: Client, title: string, body: string) {
|
||||
|
||||
test('create new tab', async ({ client }) => {
|
||||
expect(await createTab(client, 'Tab one', 'Body one')).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// <internal code to open a new tab>
|
||||
\`\`\`
|
||||
@ -49,7 +49,7 @@ test('create new tab', async ({ client }) => {
|
||||
\`\`\``);
|
||||
|
||||
expect(await createTab(client, 'Tab two', 'Body two')).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// <internal code to open a new tab>
|
||||
\`\`\`
|
||||
@ -77,7 +77,7 @@ test('select tab', async ({ client }) => {
|
||||
index: 2,
|
||||
},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// <internal code to select tab 2>
|
||||
\`\`\`
|
||||
@ -105,7 +105,7 @@ test('close tab', async ({ client }) => {
|
||||
index: 3,
|
||||
},
|
||||
})).toHaveTextContent(`
|
||||
- Ran code:
|
||||
- Ran Playwright code:
|
||||
\`\`\`js
|
||||
// <internal code to close tab 3>
|
||||
\`\`\`
|
||||
|
Loading…
x
Reference in New Issue
Block a user