Test Automation with Playwright in 5 Easy Steps
Playwright is a Test Automation Framework which is maintained by Microsoft and enables end to end testing of web applications. It allows for easy cross browser testing with support of Chromium, Webkit and Firefox. The tests can be run in both headed or headless mode, i.e. with or without opening browser windows during execution. The tests can be written in Typescript, Javascript, Python, .NET and Java.
1. Getting Started
Playwright can be installed using:
npm i -D @playwright
Playwright has its own test runner called Playwright Test and allows for:
- Run tests across all browsers
- Execute tests in parallel
- Enjoy context isolation out of the box
- Capture videos, screenshots and other artifacts on failure
- Integrate your Page Object Models as extensible fixtures
The test runner can be installed using:
npm i -D @playwright/test
2. Browsers
You can also install supported browsers with the command
npx playwright install.
This will download specific versions of browser binaries for Chromium, Firefox and Webkit. It is possible to specify individual browsers if required, for instance if Webkit was the only required browser:
npx playwright install webkit.
However, it can be configured to run against browsers that are currently on the machine. The following snippet of code will run the tests against the installed version of Google Chrome.
3. Sample Tests
To set up a first test create a new test file tests\example.spec.ts and paste in the following content:
- A URL is loaded using goto.
- The page title is retrieved using title()
- The title is then checked to ensure it matches the expected value
- expect(title).toBe(‘React • TodoMVC’)
The test can be executed from the command line using:
npx playwright test
The result should look like the below.
To run a specific test, or list of tests, the test names can be specified when starting the tests.
npx playwright test tests/example.spec.ts
All playwright tests run headless by default. To run a headed test, which will open a browser and show the interactions on screen:
npx playwright test –headed
This will run the test in the default browser. It will open the window briefly as the tests run quickly. A specific browser can be specified or all can:
- npx playwright test –headed –browser=firefox
- a.) npx playwright test –headed –browser=all
When running the tests in a headed environment the steps can be executed quickly and it can be hard to see the actions happening. If needed this process can be slowed down. At the top of the test a setting can be added for the test:
test.use({ launchOptions: { slowMo: 1000 } })
This will slow down the Playwright operations by the specified number of milliseconds.
4. Actions and Auto-waiting
Depending on the site responsiveness there are occasions where actions may be performed on elements which are not ready, for example clicking on a button before it is rendered. To prevent this and improve reliability Playwright implements an auto wait policy. This works by performing a range of checks on the elements before performing actions.
For example, for page.click(selector[, options]), it will ensure that:
- element is attached to the DOM
- element is visible
- element is stable
- element receives events
- element is enabled.
Sample Action Usage
Examples of actions that can be used on the test ToDo application to add/edit a ToDo item
For more information on actions see https://playwright.dev/docs/actionability)
Â
5. Assertions
There are a number of APIs available for common tasks, such as reading the text content of an element.
In this example the content is set to the textContent of the first nav item and the result then is expected to be ‘home’. If not then the test will fail. Similar APIs provided to retrieve text include
- innerText
- getAttribute
- innerHTML
Playwright also provides an option to check if something is true or false. In the following example page.isChecked(‘input’) is used to determine if a checkbox is checked. The result then can be checked, if expected to be true ‘toBeTruthy’ is used and if false then ‘toBeFalsy’.
Other examples were true and false can be checked are:
- isVisible
- isEnabled
To view the complete list of Assertions please see https://playwright.dev/docs/assertions
Contact Us
If you would like to learn more about how we are helping our clients address their critical objectives, while also building their internal capabilities and tapping into the true potential that their own resources have to offer, contact us or call us today on 051 878555.
To stay up to date with Dataworks Limited news and events, connect with us via the links below:
DATAWORKS – Driving Digital Transformation in the worlds’ Leading Life Science Companies
for over 25 Years