diff --git a/docs/src/codegen-intro.md b/docs/src/codegen-intro.md index f469b8a93cbc2..1fd05ff6b3161 100644 --- a/docs/src/codegen-intro.md +++ b/docs/src/codegen-intro.md @@ -36,25 +36,33 @@ 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 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. +With the test generator you can record: +* Actions like click or fill by simply interacting with the page +* Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose: + * `'assert visibility'` to assert that an element is visible + * `'assert text'` to assert that an element contains specific text + * `'assert value'` to assert that an element has a specific value + ###### * langs: js -![Recording a test](https://github.com/microsoft/playwright/assets/13063165/9effe72a-3bfd-42e1-87f3-2e6b0a2b71f9) +![Recording a test](https://github.com/microsoft/playwright/assets/13063165/34a79ea1-639e-4cb3-8115-bfdc78e3d34d) ###### * langs: java -![recording a test](https://github.com/microsoft/playwright/assets/13063165/26183fc4-a8a1-4d1c-9cdc-aca404a6eb9c) +![recording a test](https://github.com/microsoft/playwright/assets/13063165/ec9c4071-4af8-4ae7-8b36-aebcc29bdbbb) ###### * langs: python -![recording a test](https://github.com/microsoft/playwright/assets/13063165/57ed3f29-6436-4f2b-98ad-05de92d30075) +![recording a test](https://github.com/microsoft/playwright/assets/13063165/9751b609-6e4c-486b-a961-f86f177b1d58) ###### * langs: csharp -![recording a test](https://github.com/microsoft/playwright/assets/13063165/06bd474b-cdd1-4384-9de2-c745f296c78c) +![recording a test](https://github.com/microsoft/playwright/assets/13063165/53bdfb6f-d462-4ce0-ab95-0619faaebf1e) + ###### * langs: js, java, python, csharp @@ -77,22 +85,22 @@ You can generate [locators](/locators.md) with the test generator. ###### * langs: js -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/4e46e1dd-dac2-4372-b643-00f896bb7e5f) +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/2c8a12e2-4e98-4fdd-af92-1d73ae696d86) ###### * langs: java -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/6200e6d1-e420-422c-9b62-831ec3fd43ea) +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/733b48fd-5edf-4150-93f0-018adc52b6ff) ###### * langs: python -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/49ad6214-dfec-4aae-b86c-0fdf05278293) +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/95d11f48-96a4-46b9-9c2a-63c3aa4fdce7) ###### * langs: csharp -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/d8d47fbc-38d6-4a6b-a9ab-4c40380f480b) +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/1478f56f-422f-4276-9696-0674041f11dc) ### Emulation diff --git a/docs/src/codegen.md b/docs/src/codegen.md index 20fd37050f65a..55136e6ac8d37 100644 --- a/docs/src/codegen.md +++ b/docs/src/codegen.md @@ -27,17 +27,25 @@ To record a test click on the **Record new** button from the Testing sidebar. Th In the browser go to the URL you wish to test and start clicking around to record your user actions. -clicking delete button on todo app with locator highlighted +![generating user actions](https://github.com/microsoft/playwright/assets/13063165/1d4c8f37-8325-4816-a665-d0e95e63f509) -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). +Playwright will record your actions and generate the test code directly in VS Code. You can also generate assertions by choosing one of the icons in the toolbar and then clicking on an element on the page to assert against. The following assertions can be generated: + * `'assert visibility'` to assert that an element is visible + * `'assert text'` to assert that an element contains specific text + * `'assert value'` to assert that an element has a specific value -vs code showing recorded actions of test +![generating assertions](https://github.com/microsoft/playwright/assets/13063165/d131eb35-b2ca-4bf4-a8ac-88b6e40dcf07) + +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 manually improve it if needed. + +![code from a generated test](https://github.com/microsoft/playwright/assets/13063165/2ba4c212-4713-460a-b054-6dc6b67a9a7c) ### 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. -record at cursor in vs code + +![record at cursor in vs code](https://github.com/microsoft/playwright/assets/13063165/77948ab8-92a2-435f-9833-0944da5ae664) In the browser window start performing the actions you want to record. @@ -46,7 +54,7 @@ In the browser window start performing the actions you want to record. In the test file in VS Code you will see your new generated actions added to your test at the cursor position. -vs code showing test code generated +![code from a generated test](https://github.com/microsoft/playwright/assets/13063165/4f4bb34e-9cda-41fe-bf65-8d8016d84c7f) ### Generating locators @@ -85,25 +93,35 @@ pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc 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. +With the test generator you can record: +* Actions like click or fill by simply interacting with the page +* Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose: + * `'assert visibility'` to assert that an element is visible + * `'assert text'` to assert that an element contains specific text + * `'assert value'` to assert that an element has a specific value + ###### * langs: js -Recording a test +![Recording a test](https://github.com/microsoft/playwright/assets/13063165/34a79ea1-639e-4cb3-8115-bfdc78e3d34d) ###### * langs: java -Recording a test +![recording a test](https://github.com/microsoft/playwright/assets/13063165/ec9c4071-4af8-4ae7-8b36-aebcc29bdbbb) ###### * langs: python -Recording a test +![recording a test](https://github.com/microsoft/playwright/assets/13063165/9751b609-6e4c-486b-a961-f86f177b1d58) ###### * langs: csharp -Recording a test +![recording a test](https://github.com/microsoft/playwright/assets/13063165/53bdfb6f-d462-4ce0-ab95-0619faaebf1e) + +###### +* langs: js, java, python, csharp 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. @@ -122,22 +140,22 @@ You can generate [locators](/locators.md) with the test generator. ###### * langs: js -Picking a locator +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/2c8a12e2-4e98-4fdd-af92-1d73ae696d86) ###### * langs: java -Picking a locator +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/733b48fd-5edf-4150-93f0-018adc52b6ff) ###### * langs: python -Picking a locator +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/95d11f48-96a4-46b9-9c2a-63c3aa4fdce7) ###### * langs: csharp -Picking a locator +![picking a locator](https://github.com/microsoft/playwright/assets/13063165/1478f56f-422f-4276-9696-0674041f11dc) ## Emulation diff --git a/docs/src/getting-started-vscode-js.md b/docs/src/getting-started-vscode-js.md index 55d9075e91b11..af22b8833725b 100644 --- a/docs/src/getting-started-vscode-js.md +++ b/docs/src/getting-started-vscode-js.md @@ -145,23 +145,28 @@ CodeGen will auto generate your tests for you as you perform actions in the brow ### 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. In the browser go to the URL you wish to test and start clicking around. Playwright will record your actions and generate a test for you. 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. +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. In the browser go to the URL you wish to test and start clicking around. Playwright will record your actions and generate the test code directly in VS Code. You can also generate assertions by choosing one of the icons in the toolbar and then clicking on an element on the page to assert against. The following assertions can be generated: + * `'assert visibility'` to assert that an element is visible + * `'assert text'` to assert that an element contains specific text + * `'assert value'` to assert that an element has a specific value +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. -![record a new test](https://github.com/microsoft/playwright/assets/13063165/a81eb147-e479-4911-82b0-28fb47823c44) + +![record a new test](https://github.com/microsoft/playwright/assets/13063165/0407f112-e1cd-41e7-a05d-ae64e24d27ed) ### Record at Cursor To record from a specific point in your test file click the **Record at cursor** button from the Testing sidebar. This generates actions into the existing test at the current cursor position. You can run the test, position the cursor at the end of the test and continue generating the test. -![record at cursor](https://github.com/microsoft/playwright/assets/13063165/a636d95f-6e72-4d02-9f9f-60e161089e99) +![record at cursor](https://github.com/microsoft/playwright/assets/13063165/96933ea1-4c84-453a-acd7-22b4d3bde185) ### Picking a Locator Pick a [locator](./locators.md) and copy it into your test file by clicking the **Pick locator** button form the testing sidebar. Then in the browser click the element you require and it will now show up in the **Pick locator** box in VS Code. Press 'enter' 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. -![pick locators](https://github.com/microsoft/playwright/assets/13063165/dcb724a6-deb7-4993-b04a-3030cb76a22d) +![pick locators](https://github.com/microsoft/playwright/assets/13063165/9a1b2da9-9ac7-4def-a9e0-f94770364fc2) 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 and uniquely identify the target element, so you don't have to worry about failing tests due to locators. diff --git a/docs/src/release-notes-js.md b/docs/src/release-notes-js.md index 7a7ad52bb9088..4de5a423fd5a2 100644 --- a/docs/src/release-notes-js.md +++ b/docs/src/release-notes-js.md @@ -8,6 +8,11 @@ import LiteYouTube from '@site/src/components/LiteYouTube'; ## Version 1.40 + + ### Test Generator Update ![Playwright Test Generator](https://github.com/microsoft/playwright/assets/9881434/e8d67e2e-f36d-4301-8631-023948d3e190)