新たにリリースされたPlaywright 1.4で注目される改良点は、ブラウザ不問のテスト自動化ツールだ。公開されているPlaywrightコマンドラインインターフェースを使うことで、開発者やテスタは、ユーザのインタラクションを記録して自動生成されるPlaywrightスクリプトを使ってその操作を再現できる。ページのスクリーンショットの生成、Playwrightセレクタの検査、テストスクリプトのビデオ録画などを行うことも可能だ。
Playwright CLIのcodegenサブコマンドを使えば、開発者やQAエンジニア向けに、ブラウザのローンチやページのオープン、ページのインタラクションのPlaywright形式での記録などを行うことができる。
(出典: Playwright GitHub repository)
上の例は、ターミナルで次のコマンドを実行することで再現が可能だ。
npx playwright-cli codegen wikipedia.org
codegenサブコマンドはさらに、レジリエントなテキストベースのセレクタ(selector)を付加情報として生成する。このセレクタは、テスト対象機能の実装変更(クラス、id、スタイル、あるいはHTMLツリー内の位置の変更など)に対してレジリエントなテストスクリプト作成を支援するためのものだ。理想的なシナリオでは、テスト対象となる実装が別のものに置き換えられた場合でも、仕様変更された部分に関連するテストのみを修正すれば、テストを変更する必要なくパスできなければならない。
ユーザ操作に忠実なテストスクリプトをインテリジェント生成できることは、生産性の上で重要な機能だ。関連するGitHubイシューでは、ある開発者が次のように述べている。
これは間違いなく、他の人たちにも有益なものです。個人的意見として、Playwrightの採用や利用がさらに容易になると思います。
Hacker Newsでは、一部の開発者が新リリースを熱烈に歓迎している。ある開発者の意見では、
Playwrightプロジェクトには称賛以外の言葉がありません。seleniumよりもはるかに先を行っていますし、APIはpuppeteerよりもずっと人間工学的です。
Playwright CLIでは、次のようにしてスクリーンショットを生成することもできる。
$ npx playwright-cli screenshot --full-page en.wikipedia.org wiki-full.png
codegenの実行中は、開発用コンソールでセレクタの確認を行うことができる。playwright.inspect('text=Log in')によって、対応する要素がElementsパネルに表示されるようになる。ただし、WebkitのWeb Inspectorを開くとPlaywrightがブラウザから切断され、コード生成が中断されるため、Safariでは問題がある。
テストスクリプトの実行をビデオキャプチャすることも可能だ。
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();
})();
さまざまなモバイルおよびタブレットデバイス、カラースキーマ、ビューポートサイズ、地理的位置、言語、タイムゾーンを、主要な３ブラウザ(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
YouTubeのExecute Automationチャネルには、ビデオ録画と再生を含む主要なCLI機能を紹介するツアーが公開されている。
Playwrightの開発チームはさらに、次のようなテストの記述が可能な統合型のテストランナの開発も進めている。
// 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');
});
コミュニティによる専用のテストライブラリの開発(playwright-testing-library、jest-playwrightなど)も進行中だ
PlaywrightはPythonとC#で使用可能である。Playwrightの自動機能では、ファイルのダウンロードとアップロード、別プロセスiframe(out-of-process iframes)、ネイティブな入力イベント、ダークモードなどを利用することができる。
Playwrightは、Apache 2ライセンスで公開されているオープンソースソフトウェアである。コントリビューションはPlaywright contribution guidelinesを通じて、Microsoft code of conductに従うことを要件として受け入れられている。Playwrightを始めてみたい開発者にはplaywright playgroundや、いくつかのテストランナを使った実践的なサンプルが用意されている。