mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
docs: screens codegen emulation (#21094)
This commit is contained in:
Debbie O'Brien
GitHub
parent
135d68d8a9
commit
2067d715ff
@ -3,14 +3,64 @@ id: codegen
|
||||
title: "Test generator"
|
||||
---
|
||||
|
||||
Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests.
|
||||
import LiteYouTube from '@site/src/components/LiteYouTube';
|
||||
|
||||
<video width="100%" height="100%" controls muted>
|
||||
<source src="https://user-images.githubusercontent.com/13063165/197979804-c4fa3347-8fab-4526-a728-c1b2fbd079b4.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
## Running Codegen
|
||||
Playwright comes with the ability to generate tests for you as you perform actions in the browser and is a great way to quickly get started with testing. Playwright will look at your page and figure out the best locator, prioritizing [role, text and test id locators](./locators.md). If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient that uniquely identify the target element.
|
||||
|
||||
## Generate tests in VS Code
|
||||
* langs: js
|
||||
|
||||
Install the VS Code extension and generate tests directly from VS Code. The extension is available on the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Check out our guide on [getting started with VS Code](./getting-started-vscode.md).
|
||||
|
||||
<LiteYouTube
|
||||
id="LM4yqrOzmFE"
|
||||
title="Generating Playwright tests in VS Code"
|
||||
/>
|
||||
|
||||
### Record a New Test
|
||||
|
||||
To record a test click on the **Record new** button from the Testing sidebar. This will create a `test-1.spec.ts` file as well as open up a browser window.
|
||||
|
||||
<img width="1385" alt="record new in vs code" src="https://user-images.githubusercontent.com/13063165/220961665-615d0ab8-3f0b-439c-ad0b-0424d9aa154b.png" />
|
||||
|
||||
In the browser go to the URL you wish to test and start clicking around to record your user actions.
|
||||
|
||||
<img width="1394" alt="clicking delete button on todo app with locator highlighted" src="https://user-images.githubusercontent.com/13063165/220957132-31b54f82-6235-4c52-a966-6863553b5b23.png" />
|
||||
|
||||
Playwright will record your actions and generate the test code directly in VS Code. Once you are done recording click the **cancel** button or close the browser window. You can then inspect your `test-1.spec.ts` file and see your generated test and then manually improve the test by adding [ assertions](test-assertions).
|
||||
|
||||
<img width="1667" alt="vs code showing recorded actions of test" src="https://user-images.githubusercontent.com/13063165/220938674-6e1ff1d3-e75a-4238-a7fc-4c40dbc8b3bc.png" />
|
||||
|
||||
### Record at Cursor
|
||||
|
||||
To record from a specific point in your test move your cursor to where you want to record more actions and then click the **Record at cursor** button from the Testing sidebar. If your browser window is not already open then first run the test with 'Show browser' checked and then click the **Record at cursor** button.
|
||||
|
||||
<img width="1529" alt="record at cursor in vs code" src="https://user-images.githubusercontent.com/13063165/220959996-2bb3af59-85d9-4d58-aba7-d57375e7ca7e.png" />
|
||||
|
||||
In the browser window start performing the actions you want to record.
|
||||
|
||||
<img width="1394" alt="add feed the dog to todo app" src="https://user-images.githubusercontent.com/13063165/220960770-6435cec7-1723-42a8-8c1f-8244e2d800c7.png" />
|
||||
|
||||
|
||||
In the test file in VS Code you will see your new generated actions added to your test at the cursor position.
|
||||
|
||||
<img width="1641" alt="vs code showing test code generated" src="https://user-images.githubusercontent.com/13063165/220940902-d1dbc321-0ef5-4388-9e11-6311aff59ff4.png" />
|
||||
|
||||
### Generating locators
|
||||
|
||||
You can generate locators with the test generator.
|
||||
- Click on the **Pick locator** button form the testing sidebar and then hover over elements in the browser window to see the [locator](./locators.md) highlighted underneath each element.
|
||||
- Click the element you require and it will now show up in the **Pick locator** box in VS Code.
|
||||
- Press <kbd>Enter</kbd> on your keyboard to copy the locator into the clipboard and then paste anywhere in your code. Or press 'escape' if you want to cancel.
|
||||
|
||||
<img width="1641" alt="Pick locators in VS code" src="https://user-images.githubusercontent.com/13063165/220958368-95b03620-3c9b-40a8-be74-01c96ba03cad.png" />
|
||||
|
||||
## Generate tests with the Playwright Inspector
|
||||
|
||||
When running the `codegen` command two windows will be opened, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests and then copy them into your editor.
|
||||
|
||||
### Running Codegen
|
||||
|
||||
Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead.
|
||||
|
||||
@ -32,7 +82,7 @@ pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc
|
||||
|
||||
### Recording a test
|
||||
|
||||
Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `Codegen` will look at the rendered page and figure out the recommended locator, prioritizing role, text and test id locators. If the generator identifies multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, therefore eliminating and reducing test(s) failing and flaking due to locators.
|
||||
Run the `codegen` command and perform actions in the browser window. Playwright will generate the code for the user interactions which you can see in the Playwright Inspector window. Once you have finished recording your test stop the recording and press the **copy** button to copy your generated test into your editor.
|
||||
|
||||
######
|
||||
* langs: js
|
||||
@ -52,7 +102,7 @@ Run `codegen` and perform actions in the browser. Playwright will generate the c
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="1365" alt="Screenshot 2023-01-16 at 20 42 26" src="https://user-images.githubusercontent.com/13063165/212754994-fa637d81-b81d-44b8-bcd7-5dc218034f0a.png" />
|
||||
<img width="1365" alt="Recording a test" src="https://user-images.githubusercontent.com/13063165/212754994-fa637d81-b81d-44b8-bcd7-5dc218034f0a.png" />
|
||||
|
||||
When you have finished interacting with the page, press the **record** button to stop the recording and use the **copy** button to copy the generated code to your editor.
|
||||
|
||||
@ -111,30 +161,66 @@ playwright codegen --viewport-size=800,600 playwright.dev
|
||||
```bash csharp
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size=800,600 playwright.dev
|
||||
```
|
||||
######
|
||||
* langs: js
|
||||
|
||||
<img width="870" alt="Codegen generating code for tests for playwright.dev website with a specific viewport js" src="https://user-images.githubusercontent.com/13063165/220402029-f90d1c9f-d740-4c0f-acc8-95235ee83f85.png" />
|
||||
|
||||
######
|
||||
* langs: java
|
||||
|
||||
<img width="870" alt="Codegen generating code for tests for playwright.dev website with a specific viewport java" src="https://user-images.githubusercontent.com/13063165/220402748-12a856c2-b3ff-4155-b82d-64dad9c46886.png" />
|
||||
|
||||
######
|
||||
* langs: python
|
||||
|
||||
<img width="870" alt="Codegen generating code for tests for playwright.dev website with a specific viewport python" src="https://user-images.githubusercontent.com/13063165/220403118-7704b708-dea3-44b3-97a4-04c2b9d1d0fa.png" />
|
||||
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="870" alt="Codegen generating code for tests for playwright.dev website with a specific viewport dotnet" src="https://user-images.githubusercontent.com/13063165/220403496-4a46a9a1-4bc4-43e7-8f22-9cc760ceadaf.png" />
|
||||
|
||||
<img width="1409" alt="Codegen generating code for tests for playwright.dev website with a specific viewport" src="https://user-images.githubusercontent.com/13063165/182360039-6db79ad6-fe82-4fd6-900a-b5e25f7f720f.png" />
|
||||
|
||||
### Emulate devices
|
||||
|
||||
Record scripts and tests while emulating a mobile device using the `--device` option which sets the viewport size and user agent among others.
|
||||
|
||||
```bash js
|
||||
npx playwright codegen --device="iPhone 11" playwright.dev
|
||||
npx playwright codegen --device="iPhone 13" playwright.dev
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --device="iPhone 11" playwright.dev'
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --device="iPhone 13" playwright.dev'
|
||||
```
|
||||
|
||||
```bash python
|
||||
playwright codegen --device="iPhone 11" playwright.dev
|
||||
playwright codegen --device="iPhone 13" playwright.dev
|
||||
```
|
||||
|
||||
```bash csharp
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 11" playwright.dev
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 13" playwright.dev
|
||||
```
|
||||
######
|
||||
* langs: js
|
||||
|
||||
<img width="1300" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 13 js" src="https://user-images.githubusercontent.com/13063165/220921482-dc4f5532-9dce-40bd-8a28-e0d87d26a601.png" />
|
||||
|
||||
######
|
||||
* langs: java
|
||||
|
||||
<img width="1300" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 13 java" src="https://user-images.githubusercontent.com/13063165/220922591-241e6a59-a920-4cb1-97a2-d46c33ea17c5.png" />
|
||||
|
||||
######
|
||||
* langs: python
|
||||
|
||||
<img width="1300" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 13 python" src="https://user-images.githubusercontent.com/13063165/220922790-5c5a4d1a-e27d-4c9b-90ac-13cf9c925706.png" />
|
||||
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="1300" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 13 csharp" src="https://user-images.githubusercontent.com/13063165/220923048-f13583b1-ab08-4702-ab74-58691d50acfe.png" />
|
||||
|
||||
<img width="1254" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 11" src="https://user-images.githubusercontent.com/13063165/197976789-ee25ed24-69af-4684-b6a4-098673cfb035.png" />
|
||||
|
||||
### Emulate color scheme
|
||||
|
||||
@ -156,55 +242,123 @@ playwright codegen --color-scheme=dark playwright.dev
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --color-scheme=dark playwright.dev
|
||||
```
|
||||
|
||||
<img width="1258" alt="Codegen generating code for tests for playwright.dev website in dark mode" src="https://user-images.githubusercontent.com/13063165/182359371-0bb4a7a2-abbb-4f73-8550-d67e0101f0ad.png" />
|
||||
######
|
||||
* langs: js
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for playwright.dev website in dark mode js" src="https://user-images.githubusercontent.com/13063165/220930273-f3a25bae-64dd-4bbb-99ed-1e97c0cb1ebf.png" />
|
||||
|
||||
######
|
||||
* langs: java
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for playwright.dev website in dark mode java" src="https://user-images.githubusercontent.com/13063165/220930514-3b105fab-c87e-4f58-affa-d11d570122a8.png" />
|
||||
|
||||
######
|
||||
* langs: python
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for playwright.dev website in dark mode python" src="https://user-images.githubusercontent.com/13063165/220930714-737647fd-ae99-4dd3-b7a4-4f3eb4fe712d.png" />
|
||||
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for playwright.dev website in dark mode csharp" src="https://user-images.githubusercontent.com/13063165/220930893-c1d0df65-c662-4b33-91eb-ea10552d7cc5.png" />
|
||||
|
||||
### Emulate geolocation, language and timezone
|
||||
|
||||
Record scripts and tests while emulating timezone, language & location using the `--timezone`, `--geolocation` and `--lang` options. Once page opens, click the "show your location" icon at them bottom right corner of the map to see geolocation in action.
|
||||
Record scripts and tests while emulating timezone, language & location using the `--timezone`, `--geolocation` and `--lang` options. Once the page opens:
|
||||
|
||||
1. Accept the cookies
|
||||
1. On the top right click on the locate me button to see geolocation in action.
|
||||
|
||||
```bash js
|
||||
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
|
||||
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com'
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps'
|
||||
```
|
||||
|
||||
```bash python
|
||||
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
|
||||
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
|
||||
```
|
||||
|
||||
```bash csharp
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
|
||||
```
|
||||
|
||||
<img width="1276" alt="Codegen generating code for tests for google maps showing timezone, geolocation as Rome, Italy and in Italian language" src="https://user-images.githubusercontent.com/13063165/182394434-73e1c2a8-767e-411a-94e4-0912c1c50ecc.png" />
|
||||
######
|
||||
* langs: js
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language" src="https://user-images.githubusercontent.com/13063165/220931996-d3144421-8d3b-4f9f-896c-769c01566c01.png" />
|
||||
|
||||
######
|
||||
* langs: java
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language java" src="https://user-images.githubusercontent.com/13063165/220932268-9012163f-7673-4072-aa91-13b3c8f57799.png" />
|
||||
|
||||
######
|
||||
* langs: python
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language python" src="https://user-images.githubusercontent.com/13063165/220932413-f2943956-dd38-4560-94b9-51968076210d.png" />
|
||||
|
||||
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="1394" alt="Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language csharp" src="https://user-images.githubusercontent.com/13063165/220932688-a47df2a8-332b-47a4-9580-7d351def9f50.png" />
|
||||
|
||||
### Preserve authenticated state
|
||||
|
||||
Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) at the end of the session. This is useful to separately record an authentication step and reuse it later in the tests.
|
||||
|
||||
After performing authentication and closing the browser, `auth.json` will contain the storage state.
|
||||
Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) at the end of the session. This is useful to separately record an authentication step and reuse it later when recording more tests.
|
||||
|
||||
```bash js
|
||||
npx playwright codegen --save-storage=auth.json
|
||||
npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --save-storage=auth.json"
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen github.com/microsoft/playwright --save-storage=auth.json"
|
||||
```
|
||||
|
||||
```bash python
|
||||
playwright codegen --save-storage=auth.json
|
||||
playwright codegen github.com/microsoft/playwright --save-storage=auth.json
|
||||
```
|
||||
|
||||
```bash csharp
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --save-storage=auth.json
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen github.com/microsoft/playwright --save-storage=auth.json
|
||||
```
|
||||
|
||||
<img width="1264" alt="Screenshot 2022-08-03 at 13 28 02" src="https://user-images.githubusercontent.com/13063165/182599605-df2fbd05-622b-4cd7-8a32-0abdfea7d38d.png" />
|
||||
######
|
||||
* langs: js
|
||||
|
||||
Run with `--load-storage` to consume previously loaded storage. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) will be restored, bringing most web apps to the authenticated state without the need to login again.
|
||||
<img width="1394" alt="github page before logging in js" src="https://user-images.githubusercontent.com/13063165/220929062-88dfe567-0c6d-4e49-b9f9-74ae241fb8c7.png" />
|
||||
|
||||
|
||||
######
|
||||
* langs: java
|
||||
|
||||
<img width="1394" alt="github page before logging in java" src="https://user-images.githubusercontent.com/13063165/220929236-08129e16-82a9-46a3-9f1c-3e59619c6289.png" />
|
||||
|
||||
|
||||
######
|
||||
* langs: python
|
||||
|
||||
<img width="1394" alt="github page before logging in python" src="https://user-images.githubusercontent.com/13063165/220929429-8756ec49-fbf2-46e0-8f41-d25f5f5a6623.png" />
|
||||
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="1394" alt="github page before logging in csharp" src="https://user-images.githubusercontent.com/13063165/220929619-28d4ed0c-d172-4cf1-b30b-bf5bed0e07bf.png" />
|
||||
|
||||
#### Login
|
||||
|
||||
After performing authentication and closing the browser, `auth.json` will contain the storage state which you can then reuse in your tests.
|
||||
|
||||
<img width="1394" alt="login to Github screen" src="https://user-images.githubusercontent.com/13063165/220561688-04b2b984-4ba6-4446-8b0a-8058876e2a02.png" />
|
||||
|
||||
Make sure you only use the `auth.json` locally as it contains sensative information. Add it to your `.gitignore` or delete it once you have finished generating your tests.
|
||||
|
||||
#### Load authenticated state
|
||||
|
||||
Run with `--load-storage` to consume the previously loaded storage from the `auth.json`. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) will be restored, bringing most web apps to the authenticated state without the need to login again. This means you can can continue generating tests from the logged in state.
|
||||
|
||||
```bash js
|
||||
npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
|
||||
@ -222,26 +376,26 @@ playwright codegen --load-storage=auth.json github.com/microsoft/playwright
|
||||
pwsh bin/Debug/netX/playwright.ps1 codegen --load-storage=auth.json github.com/microsoft/playwright
|
||||
```
|
||||
|
||||
<img width="1261" alt="Screenshot 2022-08-03 at 13 33 40" src="https://user-images.githubusercontent.com/13063165/182599680-05297b4e-c258-4416-8daa-b8637c1db120.png" />
|
||||
######
|
||||
* langs: js
|
||||
|
||||
Use the `open` command with `--load-storage` to open the saved `auth.json`.
|
||||
<img width="1394" alt="github signed in showing use of load storage js" src="https://user-images.githubusercontent.com/13063165/220927873-9e55fdda-2def-45c1-9a1b-bcc851885f96.png" />
|
||||
|
||||
```bash js
|
||||
npx playwright open --load-storage=auth.json github.com/microsoft/playwright
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="open --load-storage=auth.json github.com/microsoft/playwright"
|
||||
```
|
||||
######
|
||||
* langs: java
|
||||
|
||||
```bash python
|
||||
playwright open --load-storage=auth.json github.com/microsoft/playwright
|
||||
```
|
||||
<img width="1394" alt="github signed in showing use of load storage java" src="https://user-images.githubusercontent.com/13063165/220928075-1e38347b-9d0d-4d9e-9a67-506c717893df.png" />
|
||||
|
||||
```bash csharp
|
||||
pwsh bin/Debug/netX/playwright.ps1 open --load-storage=auth.json github.com/microsoft/playwright
|
||||
```
|
||||
######
|
||||
* langs: python
|
||||
|
||||
<img width="1394" alt="github signed in showing use of load storage python" src="https://user-images.githubusercontent.com/13063165/220928211-ca1d4dc9-9966-414e-ab23-a3ef1d2d5ed9.png" />
|
||||
|
||||
######
|
||||
* langs: csharp
|
||||
|
||||
<img width="1394" alt="github signed in showing use of load storage scharp" src="https://user-images.githubusercontent.com/13063165/220928354-caa0e958-fe09-4125-9b54-67483064da51.png" />
|
||||
|
||||
## Record using custom setup
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ export default defineConfig({
|
||||
{
|
||||
name: 'Mobile Safari',
|
||||
use: {
|
||||
...devices['iPhone 12'],
|
||||
...devices['iPhone 13'],
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -36,9 +36,9 @@ export default defineConfig({
|
||||
const { chromium, devices } = require('playwright');
|
||||
const browser = await chromium.launch();
|
||||
|
||||
const iphone12 = devices['iPhone 12'];
|
||||
const iphone13 = devices['iPhone 13'];
|
||||
const context = await browser.newContext({
|
||||
...iphone12,
|
||||
...iphone13,
|
||||
});
|
||||
```
|
||||
|
||||
@ -47,10 +47,10 @@ import asyncio
|
||||
from playwright.async_api import async_playwright
|
||||
|
||||
async def run(playwright):
|
||||
iphone_12 = playwright.devices['iPhone 12']
|
||||
iphone_13 = playwright.devices['iPhone 13']
|
||||
browser = await playwright.webkit.launch(headless=False)
|
||||
context = await browser.new_context(
|
||||
**iphone_12,
|
||||
**iphone_13,
|
||||
)
|
||||
|
||||
async def main():
|
||||
@ -63,10 +63,10 @@ asyncio.run(main())
|
||||
from playwright.sync_api import sync_playwright
|
||||
|
||||
def run(playwright):
|
||||
iphone_12 = playwright.devices['iPhone 12']
|
||||
iphone_13 = playwright.devices['iPhone 13']
|
||||
browser = playwright.webkit.launch(headless=False)
|
||||
context = browser.new_context(
|
||||
**iphone_12,
|
||||
**iphone_13,
|
||||
)
|
||||
|
||||
with sync_playwright() as playwright:
|
||||
@ -86,16 +86,19 @@ class Program
|
||||
{
|
||||
Headless: False
|
||||
});
|
||||
var iphone12 = playwright.Devices["iPhone 12"];
|
||||
await using var context = await browser.NewContextAsync(iphone12);
|
||||
var iphone13 = playwright.Devices["iPhone 13"];
|
||||
await using var context = await browser.NewContextAsync(iphone13);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<img width="458" alt="playwright.dev website emulated for iPhone 13" src="https://user-images.githubusercontent.com/13063165/220411073-76fe59f9-9a2d-463d-8e30-c19a7deca133.png" />
|
||||
|
||||
## Viewport
|
||||
|
||||
The viewport is included in the device but you can override it for some tests with [`method: Page.setViewportSize`].
|
||||
|
||||
|
||||
```js
|
||||
// playwright.config.ts/js
|
||||
import { defineConfig } from '@playwright/test';
|
||||
@ -105,6 +108,7 @@ export default defineConfig({
|
||||
// Viewport used for all pages in the context.
|
||||
viewport: { width: 1280, height: 720 },
|
||||
},
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
@ -112,12 +116,11 @@ export default defineConfig({
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
// Run tests in this file with portrait-like viewport.
|
||||
test.use({
|
||||
viewport: { width: 600, height: 900 },
|
||||
test.use({
|
||||
viewport: { width: 1600, height: 1200 },
|
||||
});
|
||||
|
||||
test('my portrait test', async ({ page }) => {
|
||||
test('my test', async ({ page }) => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
@ -143,11 +146,10 @@ The same works inside a describe block.
|
||||
// example.spec.ts/js
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('locale block', () => {
|
||||
// Run tests in this describe block with portrait-like viewport.
|
||||
test.use({ viewport: { width: 600, height: 900 } });
|
||||
test.describe('specific viewport block', () => {
|
||||
test.use({ viewport: { width: 1600, height: 1200 } });
|
||||
|
||||
test('my portrait test', async ({ page }) => {
|
||||
test('my test', async ({ page }) => {
|
||||
// ...
|
||||
});
|
||||
});
|
||||
@ -215,6 +217,9 @@ await using var context = await browser.NewContextAsync(new()
|
||||
DeviceScaleFactor = 2
|
||||
});
|
||||
```
|
||||
|
||||
<img width="1714" alt="website with set viewport" src="https://user-images.githubusercontent.com/13063165/220405141-a7446ee5-aa1e-42af-b8fc-7a281f901dc2.png" />
|
||||
|
||||
## Locale & Timezone
|
||||
|
||||
Emulate the user Locale and Timezone which can be set globally for all tests in the config and then overridden for particular tests.
|
||||
@ -227,7 +232,7 @@ export default defineConfig({
|
||||
use: {
|
||||
// Emulates the user locale.
|
||||
locale: 'en-GB',
|
||||
|
||||
|
||||
// Emulates the user timezone.
|
||||
timezoneId: 'Europe/Paris',
|
||||
},
|
||||
@ -244,12 +249,12 @@ test.use({
|
||||
});
|
||||
|
||||
test('my test for de lang in Berlin timezone', async ({ page }) => {
|
||||
await page.goto('https://www.bing.com');
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
```js tab=js-library
|
||||
// Emulate locale and time
|
||||
const context = await browser.newContext({
|
||||
locale: 'de-DE',
|
||||
timezoneId: 'Europe/Berlin',
|
||||
@ -257,14 +262,12 @@ const context = await browser.newContext({
|
||||
```
|
||||
|
||||
```java
|
||||
// Emulate locale and time
|
||||
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
|
||||
.setLocale("de-DE")
|
||||
.setTimezoneId("Europe/Berlin"));
|
||||
```
|
||||
|
||||
```python async
|
||||
# Emulate locale and time
|
||||
context = await browser.new_context(
|
||||
locale='de-DE',
|
||||
timezone_id='Europe/Berlin',
|
||||
@ -272,7 +275,6 @@ context = await browser.new_context(
|
||||
```
|
||||
|
||||
```python sync
|
||||
# Emulate locale and time
|
||||
context = browser.new_context(
|
||||
locale='de-DE',
|
||||
timezone_id='Europe/Berlin',
|
||||
@ -286,6 +288,8 @@ await using var context = await browser.NewContextAsync(new()
|
||||
TimezoneId = "Europe/Berlin"
|
||||
});
|
||||
```
|
||||
|
||||
<img width="1394" alt="Bing in german lang and timezone" src="https://user-images.githubusercontent.com/13063165/220416571-ccc96ab1-44bb-4579-8430-64502fc24a15.png" />
|
||||
## Permissions
|
||||
|
||||
Allow app to show system notifications.
|
||||
@ -406,7 +410,7 @@ export default defineConfig({
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
geolocation: { longitude: 48.858455, latitude: 2.294474 },
|
||||
geolocation: { longitude: 41.890221, latitude: 12.492348 },
|
||||
permissions: ['geolocation'],
|
||||
});
|
||||
|
||||
@ -417,7 +421,7 @@ test('my test with geolocation', async ({ page }) => {
|
||||
|
||||
```js tab=js-library
|
||||
const context = await browser.newContext({
|
||||
geolocation: { longitude: 48.858455, latitude: 2.294474 },
|
||||
geolocation: { longitude: 41.890221, latitude: 12.492348 },
|
||||
permissions: ['geolocation']
|
||||
});
|
||||
|
||||
@ -425,20 +429,20 @@ const context = await browser.newContext({
|
||||
|
||||
```java
|
||||
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
|
||||
.setGeolocation(48.858455, 2.294474)
|
||||
.setGeolocation(41.890221, 12.492348)
|
||||
.setPermissions(Arrays.asList("geolocation")));
|
||||
```
|
||||
|
||||
```python async
|
||||
context = await browser.new_context(
|
||||
geolocation={"longitude": 48.858455, "latitude": 2.294474},
|
||||
geolocation={"longitude": 41.890221, "latitude": 12.492348},
|
||||
permissions=["geolocation"]
|
||||
)
|
||||
```
|
||||
|
||||
```python sync
|
||||
context = browser.new_context(
|
||||
geolocation={"longitude": 48.858455, "latitude": 2.294474},
|
||||
geolocation={"longitude": 41.890221, "latitude": 12.492348},
|
||||
permissions=["geolocation"]
|
||||
)
|
||||
```
|
||||
@ -447,10 +451,12 @@ context = browser.new_context(
|
||||
await using var context = await browser.NewContextAsync(new()
|
||||
{
|
||||
Permissions = new[] { "geolocation" },
|
||||
Geolocation = new Geolocation() { Longitude = 48.858455f, Latitude = 2.294474f }
|
||||
Geolocation = new Geolocation() { Longitude = 41.890221, Latitude = 12.492348 }
|
||||
});
|
||||
```
|
||||
|
||||
<img width="1394" alt="geolocation for italy on bing maps" src="https://user-images.githubusercontent.com/13063165/220417670-bb22d815-f5cd-47c4-8562-0b88165eac27.png" />
|
||||
|
||||
Change the location later:
|
||||
|
||||
```js tab=js-js
|
||||
@ -458,34 +464,34 @@ Change the location later:
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.use({
|
||||
geolocation: { longitude: 48.858455, latitude: 2.294474 },
|
||||
geolocation: { longitude: 41.890221, latitude: 12.492348},
|
||||
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 });
|
||||
await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
|
||||
});
|
||||
```
|
||||
|
||||
```js tab=js-library
|
||||
await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
|
||||
await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
|
||||
```
|
||||
|
||||
```java
|
||||
context.setGeolocation(new Geolocation(29.979097, 31.134256));
|
||||
context.setGeolocation(new Geolocation(48.858455, 2.294474));
|
||||
```
|
||||
|
||||
```python async
|
||||
await context.set_geolocation({"longitude": 29.979097, "latitude": 31.134256})
|
||||
await context.set_geolocation({"longitude": 48.858455, "latitude": 2.294474})
|
||||
```
|
||||
|
||||
```python sync
|
||||
context.set_geolocation({"longitude": 29.979097, "latitude": 31.134256})
|
||||
context.set_geolocation({"longitude": 48.858455, "latitude": 2.294474})
|
||||
```
|
||||
|
||||
```csharp
|
||||
await context.SetGeolocationAsync(new Geolocation() { Longitude = 48.858455f, Latitude = 2.294474f });
|
||||
await context.SetGeolocationAsync(new Geolocation() { Longitude = 48.858455, Latitude = 2.294474 });
|
||||
```
|
||||
|
||||
**Note** you can only change geolocation for all pages in the context.
|
||||
@ -611,6 +617,8 @@ await page.EmulateMediaAsync(new()
|
||||
Media = Media.Print
|
||||
});
|
||||
```
|
||||
|
||||
<img width="1394" alt="playwright web in dark mode" src="https://user-images.githubusercontent.com/13063165/220411638-55d2b051-4678-4da7-9f0b-ed22f5a3c47c.png" />
|
||||
## User Agent
|
||||
|
||||
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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user