5e9d2b1e14
Add new sections to `README.md`, create `CHANGELOG.md`, and update `CONTRIBUTING.md`, `CODE_OF_CONDUCT.md`, and `.eslintrc.js`. * **README.md** - Add an overview section to provide a better understanding of the project. - Add a getting started section with installation and first test instructions. - Add a section on running tests and checks. - Add a section on contributing to the project. * **CHANGELOG.md** - Create a new file to document changes, new features, and bug fixes in each release. * **CONTRIBUTING.md** - Add guidelines for coding standards, pull request process, and issue reporting. * **CODE_OF_CONDUCT.md** - Add guidelines for community behavior and ensure a welcoming environment for all contributors. * **.eslintrc.js** - Ensure that the ESLint configuration is properly set up and used. * **.github/workflows** - Add GitHub Actions workflows for continuous integration and other automated tasks. * **examples** - Add more examples and use cases to help users understand how to use the project effectively. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/microsoft/playwright?shareId=XXXX-XXXX-XXXX-XXXX).
76 lines
2.1 KiB
Plaintext
76 lines
2.1 KiB
Plaintext
# Examples
|
|
|
|
This directory contains various examples and use cases to help users understand how to use the Playwright project effectively.
|
|
|
|
## Example 1: Page Screenshot
|
|
|
|
This code snippet navigates to the Playwright homepage and saves a screenshot.
|
|
|
|
```typescript
|
|
import { test } from '@playwright/test';
|
|
|
|
test('Page Screenshot', async ({ page }) => {
|
|
await page.goto('https://playwright.dev/');
|
|
await page.screenshot({ path: `example.png` });
|
|
});
|
|
```
|
|
|
|
## Example 2: Mobile and Geolocation
|
|
|
|
This snippet emulates Mobile Safari on a device at a given geolocation, navigates to maps.google.com, performs the action, and takes a screenshot.
|
|
|
|
```typescript
|
|
import { test, devices } from '@playwright/test';
|
|
|
|
test.use({
|
|
...devices['iPhone 13 Pro'],
|
|
locale: 'en-US',
|
|
geolocation: { longitude: 12.492507, latitude: 41.889938 },
|
|
permissions: ['geolocation'],
|
|
});
|
|
|
|
test('Mobile and Geolocation', async ({ page }) => {
|
|
await page.goto('https://maps.google.com');
|
|
await page.getByText('Your location').click();
|
|
await page.waitForRequest(/.*preview\/pwa/);
|
|
await page.screenshot({ path: 'colosseum-iphone.png' });
|
|
});
|
|
```
|
|
|
|
## Example 3: Evaluate in Browser Context
|
|
|
|
This code snippet navigates to example.com and executes a script in the page context.
|
|
|
|
```typescript
|
|
import { test } from '@playwright/test';
|
|
|
|
test('Evaluate in Browser Context', async ({ page }) => {
|
|
await page.goto('https://www.example.com/');
|
|
const dimensions = await page.evaluate(() => {
|
|
return {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
deviceScaleFactor: window.devicePixelRatio,
|
|
};
|
|
});
|
|
console.log(dimensions);
|
|
});
|
|
```
|
|
|
|
## Example 4: Intercept Network Requests
|
|
|
|
This code snippet sets up request routing for a page to log all network requests.
|
|
|
|
```typescript
|
|
import { test } from '@playwright/test';
|
|
|
|
test('Intercept Network Requests', async ({ page }) => {
|
|
// Log and continue all network requests
|
|
await page.route('**', (route) => {
|
|
console.log(route.request().url());
|
|
route.continue();
|
|
});
|
|
await page.goto('http://todomvc.com');
|
|
});
|
|
```
|