From d4bab139b255800d860bdcdcaf38e0654ffec090 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Wed, 26 Oct 2022 20:49:02 +0200 Subject: [PATCH] docs: Codegen new screenshots (#18347) --- docs/src/codegen-intro.md | 21 +++++++++------------ docs/src/codegen.md | 18 ++++++++++-------- docs/src/running-tests-js.md | 2 +- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/docs/src/codegen-intro.md b/docs/src/codegen-intro.md index bee78d55bf..6f27ee34d2 100644 --- a/docs/src/codegen-intro.md +++ b/docs/src/codegen-intro.md @@ -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. -Codegen generating code for tests for playwright.dev website - -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. - -Codegen generating code for tests for playwright.dev + +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) diff --git a/docs/src/codegen.md b/docs/src/codegen.md index 8a63639231..e66a380053 100644 --- a/docs/src/codegen.md +++ b/docs/src/codegen.md @@ -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. -Codegen generating code for tests for playwright.dev website - + ## 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 ``` -Codegen generating code for tests for playwright.dev website emulated for iPhone 11 - +Codegen generating code for tests for playwright.dev website emulated for iPhone 11 ## Emulate color scheme diff --git a/docs/src/running-tests-js.md b/docs/src/running-tests-js.md index 61c66c03b4..eaedb24440 100644 --- a/docs/src/running-tests-js.md +++ b/docs/src/running-tests-js.md @@ -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 ``` -Debugging Tests +Debugging Tests with the Playwright inspector 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).