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

docs: Codegen new screenshots (#18347)

Browse source
This commit is contained in:
Debbie O'Brien 2022-10-26 20:49:02 +02:00 committed by GitHub
parent f6e642e1fa
commit d4bab139b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
docs/src/codegen-intro.md
View file

@ -13,37 +13,34 @@ Playwright comes with the ability to generate tests out of the box and is a grea
## Running Codegen
```bash js
npx playwright codegen playwright.dev
npx playwright codegen demo.playwright.dev/todomvc
```
```bash java
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen playwright.dev"
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen demo.playwright.dev/todomvc"
```
```bash python
playwright codegen playwright.dev
playwright codegen demo.playwright.dev/todomvc
```
```bash csharp
pwsh bin/Debug/netX/playwright.ps1 codegen playwright.dev
pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc
```
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" />
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.
<img width="1266" alt="Codegen generating code for tests for playwright.dev" src="https://user-images.githubusercontent.com/13063165/183905981-003c4173-0d5e-4960-8190-50e6ca71b2c3.png" />
<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>
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.
Use the **clear** button to clear the code to start recording again. Once finished close the Playwright inspector window or stop the terminal command.
To learn more about generating tests check out or detailed guide on [Codegen](./codegen.md).
## What's Next
- [See a trace of your tests](./trace-viewer-intro.md)

18
docs/src/codegen.md
View file

@ -5,28 +5,31 @@ 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
npx playwright codegen demo.playwright.dev/todomvc
```
```bash java
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen playwright.dev"
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen demo.playwright.dev/todomvc"
```
```bash python
playwright codegen playwright.dev
playwright codegen demo.playwright.dev/todomvc
```
```bash csharp
pwsh bin/Debug/netX/playwright.ps1 codegen playwright.dev
pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc
```
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" />
<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>
## Emulate viewport size
@ -72,8 +75,7 @@ playwright codegen --device="iPhone 11" playwright.dev
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" />
<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

2
docs/src/running-tests-js.md
View file

@ -82,7 +82,7 @@ Since Playwright runs in Node.js, you can debug it with your debugger of choice
npx playwright test example.spec.ts:42 --debug
```
<img width="1188" alt="Debugging Tests" src="https://user-images.githubusercontent.com/13063165/181847661-7ec5fb6c-7c21-4db0-9931-a593b21bafc2.png" />
<img width="1350" alt="Debugging Tests with the Playwright inspector" src="https://user-images.githubusercontent.com/13063165/197800771-50cb2f39-2345-4153-b4ed-de9fe63ba29b.png" />
Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools).