Playwright in Action: From Setup to Best Practices | Azure Developers JavaScript Day 2024

 

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?

1. Navigates to the page https://playwright.dev/.
2. Checks if the page title is "Playwright".
3. Clicks on the "Get Started" link.
4. Checks if the page title is "Installation".
5. 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