前提

  • mac
  • npmインストール済

手順

1. インストール

$ npm i -D playwright

Chromiumなど落としてくるので結構待ちました。もちろん回線速度に依存します。

2. サンプルコードの実行

公式に載っているFirst scriptを動かしてみます。コードを適当な名前のファイル（今回はsample.js）として保存して、ターミナルから以下コマンドで実行します。

$ nodd sample.js

サンプルをそのまま実行すると、ヘッドレスモード（＝ブラウザが画面上に表示されないモード）で実行されるので、ぱっと見何も起こりません。

が、うまくいっていれば実行したjsファイルと同じフォルダにexample.pngというファイルが生成されているはずです。

example.js

サンプルをいじって理解する

サンプルコードそのままだと「動いたね」で終わりなので、どこがどんな動きをしているのかを理解していきます。

起動するブラウザの変更

サンプルの１行目でブラウザを指定しています。

const { webkit } = require('playwright');

webkitのところを、以下の選択肢に変更可能です。

  • webkit
  • chromium
  • firefox

ブラウザを画面に表示する

デフォルトだとヘッドレスモードでブラウザが起動しますが、特に自動テストの実装中はブラウザが動いているところを見たい場合もあります。

const browser = await chromium.launch({headless: false});

ブラウザ.launchする際に、headless:falseを指定することで、ヘッドレスでなく通常の状態でブラウザが起動して、動いているところを確認できます。

launch時の他のオプションについては公式ドキュメントbrowserType.launchにまとまっています。

ちなみにブラウザのexecutablePathを渡せるということで、PCにインストール済のブラウザを指定して起動が可能なようでした。ただし推奨はされていない＝Playwrightをインストール時にBundleされているブラウザで動かすべき、だそうです。

決まった秒数待機

サンプルにはありませんでしたが、待機の書き方についても気になったので調べてみました。

決まった秒数待機させる方法として、waitForTimeout()がありました。

説明は以下です。

Returns a promise that resolves after the timeout. Note that page.waitForTimeout() should only be used for debugging. Tests using the timer in production are going to be flaky. Use signals such as network events, selectors becoming visible and others instead.

これは本番でFlakyになりがちだから、ネットワークのイベントや要素が画面に出るまで待つなどの処理を使うべき。デバッグ時以外には使わないように。と書いてあります。

その他

他はSeleniumWebDriverと似ている感じで、gotoでURLを開いて、screenshotでスクショ撮影＆保存、closeでブラウザを閉じています。

他の基本的な操作（clickとか、typeとか）もInputに記載がありますし、サンプルには出てきていませんがAssertionsもあります。

ちょっと自分のWebアプリで自動操作を試してみたのですが、ボタンクリックしてダウンロードするあたりでうまくいかずに詰まってしまいました。

自動化する手間的には、慣れたSelenium « 慣れていないPlaywright、という印象です。（そりゃそうだ）

ダウンロード部分がうまくいっていませんが、サンプルを参考に若干書いてみたコードを以下に貼っておきます。

const { firefox } = require('playwright');

(async () => {
  const browser = await firefox.launch({headless: false, slowMo:100, downloadsPath: '/Users/yoshikiito/Downloads'});
  const page = await browser.newPage({acceptDownloads: true});
  await page.goto('https://yoshikiito.github.io/MyMarkdownEditor/');
  await page.type('#filename', "hoge")
  await page.click('#download')
  await page.waitForTimeout(3000)
  await browser.close();
})();

参考