G
glaucia_lemos86
Another excellent session was held during the Azure Developers JavaScript Day 2024 event! This time, the focus was on Playwright. But, what is Playwright? And, what are the best practices for using it? Let's find out with the talk "Playwright in Action: From Setup to Best Practices"! Made by Max Schmitt, Software Engineer on the Playwright team at Microsoft and Stefan Judis, Playwright Ambassador!
Introduction
During the Azure Develoeprs JavaScript Day 2024, Max and Stefan, presented a session titled "Playwright in Action: From Setup to Best Practices". They provided a comprehensive overview of Playwright, a browser automation library, and demonstrated how to leverage it for creating robust, end-to-end tests for modern web applications.
If you couldn't make it to the lecture, no problem! You can check out the video below:
What is Playwright?
Playwright is an end-to-end test automation tool for web applications. It allows you to write scripts to simulate a user's interaction with your application.
What's more, Playwright allows you to test your application in different browsers, devices, and scenarios. This is possible because Playwright is a multi-browser tool, meaning you can test your application in different browsers such as Chrome, Firefox, Safari, and Edge.
Playwright Features
Playwright has several features that make it a powerful tool for automating web application testing. Some of Playwright's main features are:
Cross-browser and cross-platform support: Playwright supports all modern rendering engines (Chromium, WebKit, Firefox) and runs on Windows, Linux, and macOS, locally or on CI, both headless and headed.
Language versatility: Playwright's API can be used with Node.js, Python, .NET, and Java, allowing broad accessibility for developers.
Resilient testing: Playwright's auto-wait and web-first assertions eliminate flaky tests by ensuring elements are ready for interaction and retrying checks until conditions are met. Tracing features help configure test retries and capture execution details.
Full test isolation and fast execution: Playwright creates a new browser context for each test, equivalent to a new browser profile, ensuring complete test isolation with minimal overhead. Authentication states can be saved and reused across tests.
Powerful tooling: Playwright includes tools like Codegen for generating tests by recording actions, Playwright inspector for exploring and debugging tests, and Trace Viewer for comprehensive test failure investigation with screencasts, DOM snapshots, and action explorers.
Playwright is also fully open-source, boasting almost 60,000 start on GitHub and 3,000 forks contributed by the community.
Getting Started with Playwright
Visual Studio Code Extension for Playwright
Max and Stefan highlighted the Visual Studio Code Extension for Playwright, which simplifies the setup process. The extension allows developers to create new projects, write, generate, raun and debug tests directly from the editor. It as almost half a million downloads, making it a popular choice among developers.
If you want to know how to use the Visual Studio Code extension for Playwright, check out the video below:
Or if you prefer, you can read the official Playwright documentation: Getting Started - Vs Code.
Installing Playwright
To get started, you can use the command Install Playwright -> Test: Install Playwright directly from the Visual Studio Code Extension for Playwright. This command sets up the project, installs Playwright and the necessary browsers, and creates essential files such as package.json, playwright.config.ts, and example test files.
Writing Your Fist Test
Max demonstrated how to write a test in Playwright. The syntax is straightforward and familiar to those who have used JavaScript testing libraries like Jest.
For example, during the session, Max presented a test that was automatically generated by the extension. It is contained in the test -> example.spec.ts folder. The test checks if the page title is "Playwright".
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle('/Playwright/');
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getBodyRole('link', { name: 'Get Started' }).click();
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
What does this test do?
- Navigates to the page Fast and reliable end-to-end testing for modern web apps | Playwright.
- Checks if the page title is "Playwright".
- Clicks on the "Get Started" link.
- Checks if the page title is "Installation".
- If all steps are successful, the test passes.
Test it for yourself! Run the above test on your Playwright project sample and see the results.
Locators in Playwright
Stefan explained the concept of locators in Playwright, which are used to identify elements on a web page. Playwright introduces 'get by' locators, which are more intuitive and aligned with accessibility standards. These locators are essential for writing robust tests that mimic user interactions.
Examples of Locator
const locator = page.getByRole('button', { name: 'Get started' });
This locator identifies a button with the text 'Get started'. Combining locators with actions (like clicks) and assertions (like visibility checks) forms the foundation of Playwright tests.
Have a look at the Playwright documentation for more information on locators.
Running and Debugging Tests
Max and Stefan demonstrated how to run tests using Playwright extension in Visual Studio Code. By enabling the "Show Browser" option, developers can see the tests running in a browser window. This visual feedback is helpful for debugging and understanding test execution.
Playwright integrates seamlessly with VS Code's debugging tools. Developers can set breakpoints, inspect variables, and hover over locators to see the corresponding elements highlighted in the browser.
Recording Tests with Codegen
The Playwright extension offers a Record New feature, allowing developers to interact with a browser window while Playwright generates the corresponding test code. This feature simplifies the process of writing tests and ensures accurate element selection.
Advanced Features: Trace Viewer and GitHub Integration
Playwright Trace Viewer
The Trace Viewer in Playwright provides detailed insights into each test run. It shows before, during, and after snapshots of each action, complete with DOM snapshots, console logs, and network requests. This level of detail is invaluable for debugging complex issues.
There is a video available that shows how to use the Trace Viewer. You can check the video below:
GitHub Actions Integration
Max and Stefan demonstrated how to integrate Playwright tests with GitHub Actions. By setting up a GitHub workflow, tests can run automatically on each push, ensuring continuous integration and delivery. They also showed how to view Playwright reports and traces directly from GitHub Actions.
You can also get a report in HTML format, which is automatically generated by Playwright. This report contains detailed information about the test run, including failures, errors and screenshots. Just use the command:
npx playwright show-report name-of-my-extracted-playwright-report
Key Takeaways
The session "Playwright in Action: From Setup to Best Practices" provided a comprehensive overview of Playwright, a powerful tool for automating web application testing. Here are some key takeaways from the session:
Playwright is a multi-browser automation tool that supports cross-browser and cross-platform testing.
Playwright's language versatility and powerful tooling make it accessible and efficient for developers.
Locators are essential for identifying elements on a web page and writing robust tests.
Playwright's Visual Studio Code extension simplifies test setup, writing, and debugging.
Advanced features like Trace Viewer and GitHub Actions integration enhance test visibility and automation.
Azure Developers JavaScript Day Cloud Skills Challenge
Do you want to test your knowledge and skills in a series of learn modules and learn more about Azure services and tools? Don't forget to participate in the Azure Developers JavaScript Day Cloud Skills Challenge. Even though the challenge is over, you can still access the content and learn more about the topics covered during the event.
Link to the challenge: JavaScript and Azure Cloud Skills Challenge
Max and Stefan's talk presentation was very informative and full of useful tips for those who want to start using Playwright. If you want to learn more about Playwright, check out the additional resources below:
Playwright Documentation
Playwright GitHub Repository
Free Course: Introduction to GitHub Actions
Free Course: Build continuous integration (CI) workflows by using GitHub Actions
Free Courses: GitHub Actions
Free Course: Build JavaScript applications using TypeScript
Build JavaScript applications with Node.js
Stay Tuned for More!
If you wish, you can follow what happened during the two days of the event via the playlist on YouTube. The event was full of interesting content and insights for JavaScript developers!
If you are a JavaScript/TypeScript developer, follow me on Twitter or LinkedIn Glaucia Lemos for more news about the development and technology world! Especially if you are interested in how to integrate JavaScript/TypeScript applications with the Azure Cloud, Artificial Intelligence, Web Development, and more!
And, of course, don't forget to follow Max Schmitt and Stefan Judis on Twitter to stay up-to-date with the latest Playwright news and best practices!
And that's it for today! I hope you enjoyed the article! If you have any questions, comments, or suggestions, please feel free to reach out to me! I would love to hear from you!
See you in the next article!
Continue reading...