mirror of
https://github.com/microsoft/playwright.git
synced 2024-10-04 16:37:49 +03:00
docs: merge emulation config (#21340)
This commit is contained in:
Debbie O'Brien
GitHub
parent
6d549320b1
commit
e305d207fe
@ -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.
|
||||
|
||||
```js tab=js-ts
|
||||
// playwright.config.ts
|
||||
```js tab=js-js
|
||||
// playwright.config.ts/js
|
||||
import { defineConfig, devices } from '@playwright/test'; // import devices
|
||||
|
||||
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
|
||||
const { chromium, devices } = require('playwright');
|
||||
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`].
|
||||
|
||||
```js tab=js-ts
|
||||
import { test, expect } from '@playwright/test';
|
||||
```js
|
||||
// playwright.config.ts/js
|
||||
import { defineConfig } from '@playwright/test';
|
||||
|
||||
// Run tests in this file with portrait-like viewport.
|
||||
test.use({
|
||||
viewport: { width: 600, height: 900 },
|
||||
});
|
||||
|
||||
test('my portrait test', async ({ page }) => {
|
||||
// ...
|
||||
export default defineConfig({
|
||||
use: {
|
||||
// Viewport used for all pages in the context.
|
||||
viewport: { width: 1280, height: 720 },
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
```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.
|
||||
test.use({
|
||||
test.use({
|
||||
viewport: { width: 600, height: 900 },
|
||||
});
|
||||
|
||||
@ -162,7 +139,8 @@ const context = await browser.newContext({
|
||||
```
|
||||
The same works inside a describe block.
|
||||
|
||||
```js tab=js-ts
|
||||
```js
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
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
|
||||
// Create context with given viewport
|
||||
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.
|
||||
|
||||
```js tab=js-ts
|
||||
import { test, expect } from '@playwright/test';
|
||||
```js
|
||||
// playwright.config.ts/js
|
||||
import { defineConfig } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
locale: 'de-DE',
|
||||
timezoneId: 'Europe/Berlin',
|
||||
});
|
||||
export default defineConfig({
|
||||
use: {
|
||||
// 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
|
||||
const { test, expect } = require('@playwright/test');
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
locale: 'de-DE',
|
||||
@ -323,21 +291,13 @@ await using var context = await browser.NewContextAsync(new()
|
||||
Allow app to show system notifications.
|
||||
|
||||
```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({
|
||||
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.
|
||||
|
||||
```js tab=js-js
|
||||
const { test } = require('@playwright/test');
|
||||
|
||||
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
|
||||
// example.spec.ts/js
|
||||
import { test } from '@playwright/test';
|
||||
|
||||
test.beforeEach(async ({ context }) => {
|
||||
@ -480,23 +386,24 @@ await context.ClearPermissionsAsync();
|
||||
```
|
||||
## 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
|
||||
import { test, expect } from '@playwright/test';
|
||||
```js
|
||||
// playwright.config.ts/js
|
||||
import { defineConfig } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
geolocation: { longitude: 48.858455, latitude: 2.294474 },
|
||||
permissions: ['geolocation'],
|
||||
});
|
||||
|
||||
test('my test with geolocation', async ({ page }) => {
|
||||
// ...
|
||||
export default defineConfig({
|
||||
use: {
|
||||
// Context geolocation
|
||||
geolocation: { longitude: 12.492507, latitude: 41.889938 },
|
||||
permissions: ['geolocation'],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
```js tab=js-js
|
||||
const { test, expect } = require('@playwright/test');
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
geolocation: { longitude: 48.858455, latitude: 2.294474 },
|
||||
@ -546,22 +453,9 @@ await using var context = await browser.NewContextAsync(new()
|
||||
|
||||
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
|
||||
const { test, expect } = require('@playwright/test');
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
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.
|
||||
## 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
|
||||
import { test, expect } from '@playwright/test';
|
||||
```js
|
||||
import { defineConfig } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
colorScheme: 'dark' // or 'light'
|
||||
});
|
||||
|
||||
test('my test with dark mode', async ({ page }) => {
|
||||
// ...
|
||||
export default defineConfig({
|
||||
use: {
|
||||
colorScheme: 'dark',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
```js tab=js-js
|
||||
const { test, expect } = require('@playwright/test');
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
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.
|
||||
|
||||
```js tab=js-ts
|
||||
```js tab=js-js
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
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
|
||||
const context = await browser.newContext({
|
||||
userAgent: 'My user agent'
|
||||
@ -772,18 +656,9 @@ var context = await browser.NewContextAsync(new BrowserNewContextOptions { UserA
|
||||
|
||||
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
|
||||
const { test, expect } = require('@playwright/test');
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({ javaScriptEnabled: false });
|
||||
|
||||
@ -796,4 +671,4 @@ test('test with no JavaScript', async ({ page }) => {
|
||||
const context = await browser.newContext({
|
||||
javaScriptEnabled: false
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user