Finding the best locator for a web element can be a hassle:
Here you can see that Test Explorer has discovered the test suite example.spec.ts, along with two tests it created:
Debugging Playwright tests in VS Code
"CodeGen is Playwright's powerful test generation tool that automatically creates test code by recording your interactions with a web page. Instead of writing tests from scratch, you can simply navigate through your application while CodeGen captures your actions and converts them into reliable test code with proper locators and assertions". - Playwright.Dev / Getting Started VS Code
How to Generate Tests in Playwright with the VS Code Extensionhttps://www.youtube.com/watch?v=5XIZPqKkdBA
Per the instructions, I will start sketching out tests for a Login page application: https://the-internet.herokuapp.com/login
https://the-internet.herokuapp.com/login
Happy Testing! - Right clicking on an element in Google Chrome. Inspecting the element. Going to Chrome Developer Tools. Try to decide what to do if there isn't a clear test id.
Playwright comes with a built in code generator where it can built out a rough draft of a test while you interact with a website. "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", according to Playwright.dev / Test Generator.
Do you have the Integrated Development Environment (IDE) by Microsoft, VS Code? You can get it at the Visual Studio Marketplace.
Playwright Test Explorer
- Playwright.dev / Getting Started VS Code: https://playwright.dev/docs/getting-started-vscode
After installation, you will see a beaker icon in your VS Code left navigation menu. Selecting that, you can see your tests, such as the default ones Playwright automatically adds when it is installed:
- has title: Verifies that if you go to playwright.dev, that it has a link titled "Get Started".
- get started link: Verifies at playwright.dev that after clicking on Get Started link, the heading says "Installation".
But wait! There's more! You can:
- Run a single test.
- Run all tests at different levels.
- Run on multiple browsers.
- Show a browser.
- Set breakpoints by clicking on the gutter next to a line number
- Right clicking the test and select "Debug test".
- Running your test will pause at your breakpoint, allowing you to step through your code.
You can also:
- Fix a test with AI.
- Debug tests with Trace Viewer
- View DOM inspection, reviewing the Document Object Model snapshots.
Generating Tests with CodeGen
Testing The-Internet: Login Page
Test #1: Is Everything Visible?
- Playwright / Tools, click on "(+) Record new", opens up a blank peach colored window.
- The red RECORD icon shows that it is recording.
- In the browser window, entered the URL: https://the-internet.herokuapp.com/login
Generate code to detect a Heading:
- In the menu, I selected the "eye" to assert visibility, and the heading, "Login Page".
Generate code to detect an error message.
- Assert visibility of username + password textbox: "eye" + click on username textbox. "eye" + click on password textbox. "eye" + click on Login button.
The code it generated. after some cleanup such as naming it "Checking visibility:
test('Checking visibility', async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/login');
await page.getByRole('heading', { name: 'Login Page' }).click();
await expect(page.getByRole('heading', { name: 'Login Page' })).toBeVisible();
await expect(page.getByRole('textbox', { name: 'Username' })).toBeVisible();
await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible();
await expect(page.getByRole('button', { name: ' Login' })).toBeVisible();
});
... Not bad! I'd rather use some ids than "getByRole", but not bad!
Test #2: Negative Test: Invalid User.
- Playwright / Tools, click on "(+) Record new", opens up a blank peach colored window.
- The red RECORD icon shows that it is recording.
- In the browser window, entered the URL: https://the-internet.herokuapp.com/login
Generate code to enter incorrect username and password:
- "Eye" + Login Page to check the heading is there.
- Enter "NotAUser" into the username textbox.
- Enter "NotAPassword" into the password textbox.
Check the alert message:
- Let's see what happens if we click "Assert Visibility" and the alert message "Your username is invalid". Or "Assert text" and the error message.
test('Invalid login', async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/login');
await page.getByRole('heading', { name: 'Login Page' }).click();
await expect(page.getByRole('heading', { name: 'Login Page' })).toBeVisible();
await page.getByRole('textbox', { name: 'Username' }).fill('NotAUser');
await page.getByRole('textbox', { name: 'Password' }).fill('NotAPassword');
await page.getByRole('button', { name: ' Login' }).click();
await expect(page.getByText('Your username is invalid! ×')).toBeVisible();
await expect(page.locator('#flash')).toContainText('Your username is invalid! ×');
});
... Again, it could use some reformatting, but not bad.
Okay, one more test: Let's log in correctly.
Test #3: Smoke Test: Valid Login
- Playwright / Tools, click on "(+) Record new", opens up a blank peach colored window.
- The red RECORD icon shows that it is recording.
- In the browser window, entered the URL: https://the-internet.herokuapp.com/login
Generate code to do a successful login:
- "Eye" + Login Page to check the heading is there.
- Enter "tomsmith" into username, "SuperSecretPassword!" in password, and click on "Login".
Validate that you are in the secure area:
- "Eye" + "Assert Visibility" on title "Login Page".
- Let's see what happens if you assert text, "Login Page", and then assert "Welcome to the Secure Area".
- "Eye" + "Assert Visibility" Logout button.
test('Successful Login', async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/login');
await page.getByRole('textbox', { name: 'Username' }).fill('tomsmith');
await page.getByRole('textbox', { name: 'Password' }).fill('SuperSecretPassword!');
await expect(page.getByRole('heading',
{ name: 'Secure Area', exact: true })).toBeVisible();
await expect(page.locator('h2')).toContainText('Secure Area');
await expect(page.locator('h4')).toContainText('Welcome to the Secure Area.
When you are done click logout below.');
await expect(page.getByRole('link', { name: 'Logout' })).toBeVisible();
});
We now have enough to create some tests!
-T.J. Maher
Software Engineer in Test
BlueSky | YouTube | LinkedIn | Articles
No comments:
Post a Comment