Newly released Playwright 1.4 brings key improvements to the cross-browser test-automation tool. Using the now public Playwright command line interface, developers and testers will be able to record user interactions and replay them with automatically generated Playwright scripts, generate page screenshots, inspect Playwright selectors, and record videos of test scripts.
The codegen subcommand of the Playwright CLI allows developers and QA engineers to launch a browser, open a page and record interactions with the page in the form of a Playwright script:
(Source: Playwright GitHub repository)
The previous illustration is obtained by running in the terminal the following command:
npx playwright-cli codegen wikipedia.org
The codegen subcommand will additionally attempt to generate resilient text-based selectors. Text-based selectors may help produce test scripts that are resilient to changes in the implementation of the tested features (e.g., changes in classes, id, style, or position in an HTML tree). In an ideal scenario, the tests should change only when the related specification changes and should continue to pass unchanged when an alternative implementation of the feature under test is provided.
The ability to generate intelligent and faithful test scripts from user interactions is a key productivity feature. One developer mentioned in a related GitHub issue:
This is definitely something others would benefit from, IMHO, as it makes Playwright adoption and use even easier.
Some developers reacted enthusiastically to the new release on Hacker News. One developer said:
I otherwise have nothing but awesome things to say about the playwright project, it really is such a great improvement over selenium and I think it’s now got a more ergonomic API than puppeteer
The Playwright CLI may also generates screenshots as follows:
$ npx playwright-cli screenshot --full-page en.wikipedia.org wiki-full.png
During codegen, developers can inspect selectors in the developer tools console. playwright.inspect('text=Log in') will reveal the corresponding element in the Elements panel. Issues however exist on Safari as opening the WebKit Web Inspector will disconnect Playwright from the browser and interrupt the code generation.
Playwright also allows developers to capture videos of test scripts runs:
const fs = require('fs');
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({
_videosPath: __dirname // save videos here.
});
const context = await browser.newContext({
_recordVideos: { width: 1024, height: 768 }, // downscale
});
const page = await context.newPage();
const video = await page.waitForEvent('_videostarted');
await page.goto('https://github.com/microsoft/playwright');
// ... perform actions
await page.close();
fs.renameSync(await video.path(), 'video.webm');
await browser.close();
})();
Playwright can emulate a long list of mobile and tablet devices , color schemes, viewport sizes, geolocation, languages and timezones across the three major browsers (Chrome, Firefox, Safari):
# Emulate iPhone 11.
npx playwright-cli --device="iPhone 11" open wikipedia.org
# Emulate timezone, language & location
# Once page opens, click the "my location" button to see geolocation in action
npx playwright-cli --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" open maps.google.com
The Youtube channel Execute Automation provides a pedagogical tour of the key CLI features, including video recording and replay.
The Playwright team is additionally working on an integrated test runner that allows to write tests as follows:
// tests/foo.spec.ts
const { it, expect } = require('@playwright/test');
it('is a basic test with the page', async ({ page }) => {
await page.goto('https://playwright.dev/');
const home = await page.waitForSelector('home-navigation');
expect(await home.innerText()).toBe(' Playwright');
});
Dedicated testing libraries are also actively developed by the community (e.g., playwright-testing-library, or jest-playwright).
Playwright is also available in Python and C#. Playwright’s automation capabilities encompass file downloads and uploads, out-of-process iframes, native input events, and dark mode.
Playwright is open source software available under the Apache 2 license. Contributions are welcome via the Playwright contribution guidelines, and should follow the Microsoft code of conduct. A Playwright playground is available for developers to get started with Playwright together with practical examples of usage with a few test runners.
