chore: include "playwright" keyword, add examples (#196)

This commit is contained in:
Simon Knott 2025-04-16 17:18:40 +02:00 committed by GitHub
parent 5c2e11017d
commit e7c7709b33
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 58 additions and 11 deletions

47
examples.md Normal file
View 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');
});
```

View File

@ -228,7 +228,7 @@ class Tab {
}
const result: string[] = [];
result.push(`- Ran code:
result.push(`- Ran Playwright code:
\`\`\`js
${runResult.code.join('\n')}
\`\`\`

View File

@ -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 });

View File

@ -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>
\`\`\`

View File

@ -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>
\`\`\`