Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs: merge emulation config (#21340)

Browse source
This commit is contained in:
Debbie O'Brien 2023-03-06 16:43:32 +01:00 committed by GitHub
parent 6d549320b1
commit e305d207fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

245
docs/src/emulation.md
View file

@ -10,8 +10,8 @@ With Playwright you can test your app on any browser as well as emulate a real d
Playwright comes with a [registry of device parameters](https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json) using [`property: Playwright.devices`] for selected desktop, tablet and mobile devices. It can be used to simulate browser behavior for a specific device such as user agent, screen size, viewport and if it has touch enabled. All tests will run with the specified device parameters. Playwright comes with a [registry of device parameters](https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json) using [`property: Playwright.devices`] for selected desktop, tablet and mobile devices. It can be used to simulate browser behavior for a specific device such as user agent, screen size, viewport and if it has touch enabled. All tests will run with the specified device parameters.
```js tab=js-ts ```js tab=js-js
// playwright.config.ts // playwright.config.ts/js
import { defineConfig, devices } from '@playwright/test'; // import devices import { defineConfig, devices } from '@playwright/test'; // import devices
export default defineConfig({ export default defineConfig({
@ -32,29 +32,6 @@ export default defineConfig({
}); });
``` ```
```js tab=js-js
// playwright.config.js
// @ts-check
const { devices, defineConfig } = require('@playwright/test'); // require devices
module.exports = defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
{
name: 'Mobile Safari',
use: {
...devices['iPhone 12'],
},
},
],
});
```
```js tab=js-library ```js tab=js-library
const { chromium, devices } = require('playwright'); const { chromium, devices } = require('playwright');
const browser = await chromium.launch(); const browser = await chromium.launch();
@ -119,24 +96,24 @@ class Program
The viewport is included in the device but you can override it for some tests with [`method: Page.setViewportSize`]. The viewport is included in the device but you can override it for some tests with [`method: Page.setViewportSize`].
```js tab=js-ts ```js
import { test, expect } from '@playwright/test'; // playwright.config.ts/js
import { defineConfig } from '@playwright/test';
// Run tests in this file with portrait-like viewport. export default defineConfig({
test.use({ use: {
viewport: { width: 600, height: 900 }, // Viewport used for all pages in the context.
}); viewport: { width: 1280, height: 720 },
},
test('my portrait test', async ({ page }) => {
// ...
}); });
``` ```
```js tab=js-js ```js tab=js-js
const { test, expect } = require('@playwright/test'); // example.spec.ts/js
import { test, expect } from '@playwright/test';
// Run tests in this file with portrait-like viewport. // Run tests in this file with portrait-like viewport.
test.use({ test.use({
viewport: { width: 600, height: 900 }, viewport: { width: 600, height: 900 },
}); });
@ -162,7 +139,8 @@ const context = await browser.newContext({
``` ```
The same works inside a describe block. The same works inside a describe block.
```js tab=js-ts ```js
// example.spec.ts/js
import { test, expect } from '@playwright/test'; import { test, expect } from '@playwright/test';
test.describe('locale block', () => { test.describe('locale block', () => {
@ -175,19 +153,6 @@ test.describe('locale block', () => {
}); });
``` ```
```js tab=js-js
const { test, expect } = require('@playwright/test');
test.describe('locale block', () => {
// Run tests in this describe block with portrait-like viewport.
test.use({ viewport: { width: 600, height: 900 } });
test('my portrait test', async ({ page }) => {
// ...
});
});
```
```java ```java
// Create context with given viewport // Create context with given viewport
BrowserContext context = browser.newContext(new Browser.NewContextOptions() BrowserContext context = browser.newContext(new Browser.NewContextOptions()
@ -254,21 +219,24 @@ await using var context = await browser.NewContextAsync(new()
Emulate the user Locale and Timezone which can be set globally for all tests in the config and then overridden for particular tests. Emulate the user Locale and Timezone which can be set globally for all tests in the config and then overridden for particular tests.
```js tab=js-ts ```js
import { test, expect } from '@playwright/test'; // playwright.config.ts/js
import { defineConfig } from '@playwright/test';
test.use({ export default defineConfig({
locale: 'de-DE', use: {
timezoneId: 'Europe/Berlin', // Emulates the user locale.
}); locale: 'en-GB',
test('my test for de lang in Berlin timezone', async ({ page }) => { // Emulates the user timezone.
// ... timezoneId: 'Europe/Paris',
},
}); });
``` ```
```js tab=js-js ```js tab=js-js
const { test, expect } = require('@playwright/test'); // example.spec.ts/js
import { test, expect } from '@playwright/test';
test.use({ test.use({
locale: 'de-DE', locale: 'de-DE',
@ -323,21 +291,13 @@ await using var context = await browser.NewContextAsync(new()
Allow app to show system notifications. Allow app to show system notifications.
```js tab=js-js ```js tab=js-js
// @ts-check // playwright.config.ts/js
import { defineConfig } from '@playwright/test';
const { defineConfig } = require('@playwright/test');
module.exports = defineConfig({
use: {
permissions: ['notifications'],
},
});
```
```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test';
export default defineConfig({ export default defineConfig({
use: { use: {
permissions: ['notifications'], // Grants specified permissions to the browser context.
permissions: 'notifications',
}, },
}); });
``` ```
@ -365,64 +325,10 @@ context = browser.new_context(
) )
``` ```
Allow test to request current location.
```js tab=js-js
// @ts-check
const { defineConfig } = require('@playwright/test');
module.exports = defineConfig({
use: {
permissions: ['geolocation'],
},
});
```
```js tab=js-ts
import type { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
permissions: ['geolocation'],
},
});
```
```js tab=js-library
await context.grantPermissions(['geolocation']);
```
```java
context.grantPermissions(Arrays.asList("geolocation"));
```
```python async
await context.grant_permissions(['geolocation'])
```
```python sync
context.grant_permissions(['geolocation'])
```
```csharp
await context.GrantPermissionsAsync(new[] { "geolocation" });
```
Allow notifications for a specific domain. Allow notifications for a specific domain.
```js tab=js-js ```js tab=js-js
const { test } = require('@playwright/test'); // example.spec.ts/js
test.beforeEach(async ({ context }) => {
// Runs before each test and signs in each page.
await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
});
test('first', async ({ page }) => {
// page has notifications permission for https://skype.com.
});
```
```js tab=js-ts
import { test } from '@playwright/test'; import { test } from '@playwright/test';
test.beforeEach(async ({ context }) => { test.beforeEach(async ({ context }) => {
@ -480,23 +386,24 @@ await context.ClearPermissionsAsync();
``` ```
## Geolocation ## Geolocation
Create a test with `"geolocation"` permissions granted and geolocation set to a specific area. Grant `"geolocation"` permissions and set geolocation to a specific area.
```js tab=js-ts ```js
import { test, expect } from '@playwright/test'; // playwright.config.ts/js
import { defineConfig } from '@playwright/test';
test.use({ export default defineConfig({
geolocation: { longitude: 48.858455, latitude: 2.294474 }, use: {
permissions: ['geolocation'], // Context geolocation
}); geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: ['geolocation'],
test('my test with geolocation', async ({ page }) => { },
// ...
}); });
``` ```
```js tab=js-js ```js tab=js-js
const { test, expect } = require('@playwright/test'); // example.spec.ts/js
import { test, expect } from '@playwright/test';
test.use({ test.use({
geolocation: { longitude: 48.858455, latitude: 2.294474 }, geolocation: { longitude: 48.858455, latitude: 2.294474 },
@ -546,22 +453,9 @@ await using var context = await browser.NewContextAsync(new()
Change the location later: Change the location later:
```js tab=js-ts
import { test, expect } from '@playwright/test';
test.use({
geolocation: { longitude: 48.858455, latitude: 2.294474 },
permissions: ['geolocation'],
});
test('my test with geolocation', async ({ page, context }) => {
// overwrite the location for this test
await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
});
```
```js tab=js-js ```js tab=js-js
const { test, expect } = require('@playwright/test'); // example.spec.ts/js
import { test, expect } from '@playwright/test';
test.use({ test.use({
geolocation: { longitude: 48.858455, latitude: 2.294474 }, geolocation: { longitude: 48.858455, latitude: 2.294474 },
@ -597,22 +491,21 @@ await context.SetGeolocationAsync(new Geolocation() { Longitude = 48.858455f, La
**Note** you can only change geolocation for all pages in the context. **Note** you can only change geolocation for all pages in the context.
## Color Scheme and Media ## Color Scheme and Media
Create a test that emulates the users `"colorScheme"`. Supported values are 'light', 'dark', 'no-preference'. You can also emulate the media type with [`method: Page.emulateMedia`]. Emulate the users `"colorScheme"`. Supported values are 'light', 'dark', 'no-preference'. You can also emulate the media type with [`method: Page.emulateMedia`].
```js tab=js-ts ```js
import { test, expect } from '@playwright/test'; import { defineConfig } from '@playwright/test';
test.use({ export default defineConfig({
colorScheme: 'dark' // or 'light' use: {
}); colorScheme: 'dark',
},
test('my test with dark mode', async ({ page }) => {
// ...
}); });
``` ```
```js tab=js-js ```js tab=js-js
const { test, expect } = require('@playwright/test'); // example.spec.ts/js
import { test, expect } from '@playwright/test';
test.use({ test.use({
colorScheme: 'dark' // or 'light' colorScheme: 'dark' // or 'light'
@ -722,7 +615,8 @@ await page.EmulateMediaAsync(new()
The User Agent is included in the device and therefore you will rarely need to change it however if you do need to test a different user agent you can override it with the `userAgent` property. The User Agent is included in the device and therefore you will rarely need to change it however if you do need to test a different user agent you can override it with the `userAgent` property.
```js tab=js-ts ```js tab=js-js
// example.spec.ts/js
import { test, expect } from '@playwright/test'; import { test, expect } from '@playwright/test';
test.use({ userAgent: 'My user agent'}); test.use({ userAgent: 'My user agent'});
@ -732,16 +626,6 @@ test('my user agent test', async ({ page }) => {
}); });
``` ```
```js tab=js-js
const { test, expect } = require('@playwright/test');
test.use({ userAgent: 'My user agent' });
test('my user agent test', async ({ page }) => {
// ...
});
```
```js tab=js-library ```js tab=js-library
const context = await browser.newContext({ const context = await browser.newContext({
userAgent: 'My user agent' userAgent: 'My user agent'
@ -772,18 +656,9 @@ var context = await browser.NewContextAsync(new BrowserNewContextOptions { UserA
Emulate a user scenario where JavaScript is disabled. Emulate a user scenario where JavaScript is disabled.
```js tab=js-ts
import { test, expect } from '@playwright/test';
test.use({ javaScriptEnabled: false });
test('test with no JavaScript', async ({ page }) => {
// ...
});
```
```js tab=js-js ```js tab=js-js
const { test, expect } = require('@playwright/test'); // example.spec.ts/js
import { test, expect } from '@playwright/test';
test.use({ javaScriptEnabled: false }); test.use({ javaScriptEnabled: false });
@ -796,4 +671,4 @@ test('test with no JavaScript', async ({ page }) => {
const context = await browser.newContext({ const context = await browser.newContext({
javaScriptEnabled: false javaScriptEnabled: false
}); });
``` ```