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. If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient that uniquely identify the target element.
How to record automation scripts with Playwright
1. To record interactions, you can do simply write this command on your terminal.
npx playwright codegen2. 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.
3. 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
4. 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.
5. Use the clear button to clear the code to start recording again. Once finished, close the Playwright inspector window or stop the terminal command.
Sample recorded test file :
import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://www.flipkart.com/'); await page.getByRole('link', { name: 'Login', exact: true }).click(); await page.locator('form').filter({ hasText: 'Enter Email/Mobile numberBy' }).getByRole('textbox').click(); await page.getByRole('link', { name: 'Cart' }).click(); await page.getByRole('link', { name: 'My Profile' }).click(); await page.getByRole('link', { name: 'Infinix', exact: true }).click(); const page1Promise = page.waitForEvent('popup'); await page.getByRole('link', { name: 'Tecno Spark Go 1 (Startrail' }).click(); const page1 = await page1Promise; await page1.getByRole('button', { name: 'Buy Now' }).click(); });
Additional commands you may required during automation, good to know.
1. If you want to keep the recorded test to any specific spec file, then use the following command.
npx playwright codegen -o tests/mytest.spec.js
2. If you want to record the user integration to any specific programming language, then use the following command. Here in this example we are using JavaScript language.
npx playwright codegen --target javascript
3. If you want to record the user integration for any specific browser, then use the following command. Here in this example we are using chromium browser.
npx playwright codegen --browser chromium
4. If you want to record the user integration for any specific mobile device, then use the following command. Here in this example we are using "iPhone 14 Pro Max" mobile device.
npx playwright codegen --device "iPhone 14 Pro Max"
Supported mobile devices :
"Blackberry PlayBook" "Blackberry PlayBook landscape" "BlackBerry Z30" "BlackBerry Z30 landscape" "Galaxy Note 3" "Galaxy Note 3 landscape" "Galaxy Note II" "Galaxy Note II landscape" "Galaxy S III" "Galaxy S III landscape" "Galaxy S5" "Galaxy S5 landscape" "Galaxy S8" "Galaxy S8 landscape" "Galaxy S9+" "Galaxy S9+ landscape" "Galaxy Tab S4" "Galaxy Tab S4 landscape" "iPad (gen 5)" "iPad (gen 5) landscape" "iPad (gen 6)" "iPad (gen 6) landscape" "iPad (gen 7)" "iPad (gen 7) landscape" "iPad Mini" "iPad Mini landscape" "iPad Pro 11" "iPad Pro 11 landscape" "iPhone 6" "iPhone 6 landscape" "iPhone 6 Plus" "iPhone 6 Plus landscape" "iPhone 7" "iPhone 7 landscape" "iPhone 7 Plus" "iPhone 7 Plus landscape" "iPhone 8" "iPhone 8 landscape" "iPhone 8 Plus" "iPhone 8 Plus landscape" "iPhone SE" "iPhone SE landscape" "iPhone X" "iPhone X landscape" "iPhone XR" "iPhone XR landscape" "iPhone 11" "iPhone 11 landscape" "iPhone 11 Pro" "iPhone 11 Pro landscape" "iPhone 11 Pro Max" "iPhone 11 Pro Max landscape" "iPhone 12" "iPhone 12 landscape" "iPhone 12 Pro" "iPhone 12 Pro landscape" "iPhone 12 Pro Max" "iPhone 12 Pro Max landscape" "iPhone 12 Mini" "iPhone 12 Mini landscape" "iPhone 13" "iPhone 13 landscape" "iPhone 13 Pro" "iPhone 13 Pro landscape" "iPhone 13 Pro Max" "iPhone 13 Pro Max landscape" "iPhone 13 Mini" "iPhone 13 Mini landscape" "iPhone 14" "iPhone 14 landscape" "iPhone 14 Plus" "iPhone 14 Plus landscape" "iPhone 14 Pro" "iPhone 14 Pro landscape" "iPhone 14 Pro Max" "iPhone 14 Pro Max landscape" "iPhone 15" "iPhone 15 landscape" "iPhone 15 Plus" "iPhone 15 Plus landscape" "iPhone 15 Pro" "iPhone 15 Pro landscape" "iPhone 15 Pro Max" "iPhone 15 Pro Max landscape" "Kindle Fire HDX" "Kindle Fire HDX landscape" "LG Optimus L70" "LG Optimus L70 landscape" "Microsoft Lumia 550" "Microsoft Lumia 550 landscape" "Microsoft Lumia 950" "Microsoft Lumia 950 landscape" "Nexus 10" "Nexus 10 landscape" "Nexus 4" "Nexus 4 landscape" "Nexus 5" "Nexus 5 landscape" "Nexus 5X" "Nexus 5X landscape" "Nexus 6" "Nexus 6 landscape" "Nexus 6P" "Nexus 6P landscape" "Nexus 7" "Nexus 7 landscape" "Nokia Lumia 520" "Nokia Lumia 520 landscape" "Nokia N9" "Nokia N9 landscape" "Pixel 2" "Pixel 2 landscape" "Pixel 2 XL" "Pixel 2 XL landscape" "Pixel 3" "Pixel 3 landscape" "Pixel 4" "Pixel 4 landscape" "Pixel 4a (5G)" "Pixel 4a (5G) landscape" "Pixel 5" "Pixel 5 landscape" "Pixel 7" "Pixel 7 landscape" "Moto G4" "Moto G4 landscape" "Desktop Chrome HiDPI" "Desktop Edge HiDPI" "Desktop Firefox HiDPI" "Desktop Safari" "Desktop Chrome" "Desktop Edge" "Desktop Firefox"
5. If you want to open a browser window with its viewport set to a specific width and height, then use the following command :
npx playwright codegen --viewport-size="800,600"
This is all about playwright codegen features. This is like having a helper who can automatically write some parts of the code for you. Instead of writing everything from scratch, you provide certain instructions or templates, and the helper generates the code based on those instructions. It saves time and ensures consistency in the program.
No comments:
Post a Comment