Introduction
This article will be part of a series focusing on the Playwright framework implemented with Typescript.
Playwright is a modern web testing framework that is primarily used for testing web applications. It was developed by Microsoft and released in 2019. Playwright provides a set of APIs that allow developers to automate interactions with web pages, such as clicking buttons, filling out forms, and navigating through pages. It supports multiple programming languages including JavaScript, Python, and C#, making it accessible to a wide range of developers.
Key Features:
- Playwright supports cross-browser test execution including Chromium, WebKit, and Firefox
- It is designed to work on various operating systems including Windows, Linux, MacOS
- Playwright offers a rich set of APIs for automating interactions with web pages. Developers can simulate user actions such as clicking, typing, hovering, and navigating through pages.
- Playwright includes built-in mechanisms for waiting for specific conditions to be met before executing further actions. This helps handle asynchronous behavior in web applications more effectively.
- Playwright provides parallel execution option out the box that can significantly reduce the overall execution time, especially for large test suites.
- It provides codegen capability to generate test steps and assertions.
Moreover, Playwright uses unique approach for browser automation. Instead of launching a full new browser instance for each test case, Playwright launches one browser instance for entire suite of tests. It then creates a unique browser context from that instance for each test. A browser context is essentially like an incognito session: it has its own session storage and tabs that are not shared with any other context. Browser contexts are very fast to create and destroy. Then, each browser context can have one or more pages. All Playwright interactions happen through a page, like clicks and scrapes. Most tests only ever need one page.
Setup the project
Get started by installing Playwright using npm: npm init playwright@latest.
Run the install command and select the following to get started:
- Choose between TypeScript or JavaScript (we are going to use TypeScript for this project)
- Name of your Tests folder (tests)
- Add a GitHub Actions workflow to easily run tests on CI (false)
- Install Playwright browsers (true)
What is installed:
playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts
This command will create a bunch of new project files, including:
package.jsonfile with the Playwright package dependencyplaywright.config.tsfile with test configurationstestsdirectory with basic example teststests-examplesdirectory with more extensive example tests
Running Tests using command line.
npx playwright test – run test cases in headless mode. In this case browser will not appear, all projects will be executed. On the screenshot below you can see that 4 test cases have been executed, all of them are passed, 2 workers have been used. Number of workers is configurable parameter in the playwright config.
Playwright has built-in reporter. To see full report you can run npx playwright show-report command in the terminal.
You can see test results, test duration, filter them by category “passed”, “failed”, “flaky”, “skipped”. All test cases marked with the name of project (in our case this is a name of the browser we are running test against). Moreover, you can expand and check test steps and traces (if available).
If you want to run against one particular browser, run: npx playwright test --project=chromium.Test cases will be executed in headless mode.
Headed mode: npx playwright test --project=chromium --headed
In order to execute only one test spec add the name of the test spec: npx playwright test <name-of-the-test-spec> --project=chromium
If you’d like to execute only one specific test case: npx playwright test -g <name-of-the-test-case> --project=chromium
To skip test case add test.skip in test case file, like:
import { test, expect } from '@playwright/test';
test.skip('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects page to have a heading with the name of Installation.
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});Result after test execution:
Report shows that two test cases are skipped as intended:
While test development you might need to run only one test. In this case use test.only.
Test execution in UI mode.
One of its most helpful features is UI mode, which visually shows and executes tests.
To open UI mode, run the following command in your terminal: npx playwright test --ui
Once you launch UI Mode you will see a list of all your test files. You can run all your tests by clicking the triangle icon in the sidebar. You can also run a single test file, a block of tests or a single test by hovering over the name and clicking on the triangle next to it.
In the middle you will see a step-by-step trace of the test execution, together with screenshots of each step. It is also important to mention that you can debug test case here by checking “before” and “after” view, code source, logs and errors. One flaw of this mode is that the browser is not a browser itself, technically this is simply screenshot. That’s why it is more convenient to use it in combination with Playwright Extension (in VSCode).
Test Execution with Playwright Extension.
Install Extension by navigating to Preferences -> Extensions. Search for official extension called Playwright Test for VSCode, hit Install button. Once it’s been installed, navigate to Testing section on the left panel. List of test cases should be loaded.
Before running test cases, you might want to provide specific settings by enabling/disabling headed execution, choosing target project, enabling / disabling trace generation. It is also possible to leverage codegen capabilities by recording test case, picking locator.
Important point for this type of execution, that after execution is completed, browser stays open and you can easily interact with elements on the page like in real browser.
Make debugging your friend.
Playwright provides a tracing feature that allows you to capture a detailed log of all the actions and events taking place within the browser. With tracing enabled, you can closely monitor network requests, page loads, and code execution. This feature is helpful for debugging and performance optimization.
To record a trace during development mode set the --trace flag to on when running your tests: npx playwright test --trace on
You can then open the HTML report and click on the trace icon to open the trace: npx playwright show-report
At the first glance the report looks the same:
But you can find more information inside when you open one of the test case information:
Also, to open trace you can run this command from the terminal: npx playwright show-trace path/to/trace.zip
To debug all tests run the test command with the --debug flag. This will run tests one by one, and open the inspector and a browser window for each test: npx playwright test --debug
Generating Test Code
Playwright provides a codegen feature that allows users to easily generate code for their browser automation scripts. The Codegen feature in Playwright captures user interactions with the webpage, such as clicks, fills, and navigation, and then translates these interactions into executable code. This makes it easier for developers to create and maintain browser automation scripts, as they can simply record their actions and generate code.
To launch code generator, run: npx playwright codegen
Try loading a web page and making interactions with it. You’ll see Playwright code generated in real time. Once recording is complete, you can copy the code and refine it into a test case.
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
Once you’ve done with changes, you can press the 'record' button to stop the recording and use the 'copy' button to copy the generated code to your editor.
Conclusion.
In this introductory article, we made a journey to creating a Playwright framework using Typescript. We delved into executing test cases, setting up the development environment, and installing necessary extensions. Additionally, we gained insights into debugging properly and speeding up development process through the utilization of the built-in codegen functionality.
Resources.
- Official Documentation: https://playwright.dev/
- Repository with the framework: https://github.com/nora-weisser/playwright-typescript
TechNotes 