mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
278 lines
9.8 KiB
Markdown
278 lines
9.8 KiB
Markdown
---
|
|
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.
|
|
|
|
## Running Codegen
|
|
|
|
```bash js
|
|
npx playwright codegen playwright.dev
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen playwright.dev"
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen playwright.dev
|
|
```
|
|
|
|
```bash csharp
|
|
pwsh bin/Debug/netX/playwright.ps1 codegen playwright.dev
|
|
```
|
|
|
|
Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `Codegen` will attempt to generate resilient text-based selectors.
|
|
|
|
<img width="1183" alt="Codegen generating code for tests for playwright.dev website" src="https://user-images.githubusercontent.com/13063165/181852815-971c10da-0b55-4e54-8a73-77e1e825193c.png" />
|
|
|
|
|
|
## Emulate viewport size
|
|
|
|
Playwright opens a browser window with it's viewport set to a specific width and height and is not responsive as tests need to be run under the same conditions. Use the `--viewport` option to generate tests with a different viewport size.
|
|
|
|
```bash js
|
|
npx playwright codegen --viewport-size=800,600 playwright.dev
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --viewport-size=800,600 playwright.dev"
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen --viewport-size=800,600 playwright.dev
|
|
```
|
|
|
|
```bash csharp
|
|
pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size=800,600 playwright.dev
|
|
```
|
|
|
|
|
|
|
|
<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
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args='codegen --device="iPhone 11" playwright.dev'
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen --device="iPhone 11" playwright.dev
|
|
```
|
|
|
|
```bash csharp
|
|
pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 11" playwright.dev
|
|
```
|
|
|
|
<img width="1239" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 11" src="https://user-images.githubusercontent.com/13063165/182360089-9dc6d33d-480e-4bb2-86a3-fec51c1c228e.png" />
|
|
|
|
|
|
## Emulate color scheme
|
|
|
|
Record scripts and tests while emulating the color scheme with the `--color-scheme` option.
|
|
|
|
```bash js
|
|
npx playwright codegen --color-scheme=dark playwright.dev
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --color-scheme=dark playwright.dev"
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen --color-scheme=dark playwright.dev
|
|
```
|
|
|
|
```bash csharp
|
|
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" />
|
|
|
|
## 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.
|
|
|
|
```bash js
|
|
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args='codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com'
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
|
|
```
|
|
|
|
```bash csharp
|
|
pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
|
|
```
|
|
|
|
<img width="1276" alt="Codegen generating code for tests for google maps showing timezone, geoloation as Rome, Italy and in Italian language" src="https://user-images.githubusercontent.com/13063165/182394434-73e1c2a8-767e-411a-94e4-0912c1c50ecc.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.
|
|
|
|
```bash js
|
|
npx playwright codegen --save-storage=auth.json
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --save-storage=auth.json"
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen --save-storage=auth.json
|
|
```
|
|
|
|
```bash csharp
|
|
pwsh bin/Debug/netX/playwright.ps1 codegen --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" />
|
|
|
|
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.
|
|
|
|
```bash js
|
|
npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --load-storage=auth.json github.com/microsoft/playwright"
|
|
```
|
|
|
|
```bash python
|
|
playwright codegen --load-storage=auth.json github.com/microsoft/playwright
|
|
```
|
|
|
|
```bash csharp
|
|
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" />
|
|
|
|
Use the `open` command with `--load-storage` to open the saved `auth.json`.
|
|
|
|
```bash js
|
|
npx playwright open --load-storage=auth.json github.com/microsoft/playwright
|
|
```
|
|
|
|
```bash java
|
|
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="open --load-storage=auth.json github.com/microsoft/playwright"
|
|
```
|
|
|
|
```bash python
|
|
playwright open --load-storage=auth.json github.com/microsoft/playwright
|
|
```
|
|
|
|
```bash csharp
|
|
pwsh bin/Debug/netX/playwright.ps1 open --load-storage=auth.json github.com/microsoft/playwright
|
|
```
|
|
|
|
|
|
## Record using custom setup
|
|
|
|
If you would like to use codegen in some non-standard setup (for example, use [`method: BrowserContext.route`]), it is possible to call [`method: Page.pause`] that will open a separate window with codegen controls.
|
|
|
|
```js
|
|
const { chromium } = require('@playwright/test');
|
|
|
|
(async () => {
|
|
// Make sure to run headed.
|
|
const browser = await chromium.launch({ headless: false });
|
|
|
|
// Setup context however you like.
|
|
const context = await browser.newContext({ /* pass any options */ });
|
|
await context.route('**/*', route => route.continue());
|
|
|
|
// Pause the page, and start recording manually.
|
|
const page = await context.newPage();
|
|
await page.pause();
|
|
})();
|
|
```
|
|
|
|
```java
|
|
import com.microsoft.playwright.*;
|
|
|
|
public class Example {
|
|
public static void main(String[] args) {
|
|
try (Playwright playwright = Playwright.create()) {
|
|
BrowserType chromium = playwright.chromium();
|
|
// Make sure to run headed.
|
|
Browser browser = chromium.launch(new BrowserType.LaunchOptions().setHeadless(false));
|
|
// Setup context however you like.
|
|
BrowserContext context = browser.newContext(/* pass any options */);
|
|
context.route("**/*", route -> route.resume());
|
|
// Pause the page, and start recording manually.
|
|
Page page = context.newPage();
|
|
page.pause();
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```python async
|
|
import asyncio
|
|
from playwright.async_api import async_playwright
|
|
|
|
async def main():
|
|
async with async_playwright() as p:
|
|
# Make sure to run headed.
|
|
browser = await p.chromium.launch(headless=False)
|
|
|
|
# Setup context however you like.
|
|
context = await browser.new_context() # Pass any options
|
|
await context.route('**/*', lambda route: route.continue_())
|
|
|
|
# Pause the page, and start recording manually.
|
|
page = await context.new_page()
|
|
await page.pause()
|
|
|
|
asyncio.run(main())
|
|
```
|
|
|
|
```python sync
|
|
from playwright.sync_api import sync_playwright
|
|
|
|
with sync_playwright() as p:
|
|
# Make sure to run headed.
|
|
browser = p.chromium.launch(headless=False)
|
|
|
|
# Setup context however you like.
|
|
context = browser.new_context() # Pass any options
|
|
context.route('**/*', lambda route: route.continue_())
|
|
|
|
# Pause the page, and start recording manually.
|
|
page = context.new_page()
|
|
page.pause()
|
|
```
|
|
|
|
```csharp
|
|
using Microsoft.Playwright;
|
|
|
|
using var playwright = await Playwright.CreateAsync();
|
|
var chromium = playwright.Chromium;
|
|
// Make sure to run headed.
|
|
var browser = await chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });
|
|
|
|
// Setup context however you like.
|
|
var context = await browser.NewContextAsync(); // Pass any options
|
|
await context.RouteAsync('**/*', route => route.ContinueAsync());
|
|
|
|
// Pause the page, and start recording manually.
|
|
var page = await context.NewPageAsync();
|
|
await page.PauseAsync();
|
|
```
|