はじめに
最近, 会社でテスト自動化のさらなる推進が行われていて, 色々なツールを調べています. そんな中でPlaywright の話を聞き, 試してみることにしました.
Playwright とは
ブラウザ を動かす Node.js のライブラリで, Webdriver や Puppeteer みたいなものだと思ってもらえば良いかなと思います. もともと, Puppeteer のチームの人が関わって作っているものとなります. 対応しているブラウザは, Chromium, Firefox, Webkit です. Microsoft のチームなんだから, Trident も頼む！とか思いますけど, もう使うなが正しいような気もします.
Node.js のインストール
Windows の人はまずは, node.js をインストールするところから始めましょう. 私の環境はMac なので, 以下の作業で Node.js をインストールしていきます. まずは nodebrew を入れます.
$ brew install nodebrew
パスを通さないと動かないため, nodebrew のインストールパスを .zprofile などに追記します.
export PATH=$HOME/.nodebrew/current/bin:$PATH
次に, nodebrew を使用して Node.js をインストールします. バージョン指定したい場合は, 予め ls-remote で調べて指定してください. コマンドを打って, Installed successfully がでたら成功です.
$ nodebrew install-binary latest Fetching: https://nodejs.org/dist/v13.13.0/node-v13.13.0-darwin-x64.tar.gz ################################################################################################################################################################## 100.0% Installed successfully
現在インストールしているバージョンを調べて,
$ nodebrew ls v12.13.1 v13.3.0 v13.13.0
使用するバージョンを指定します.
$ nodebrew use v13.13.0 use v13.13.0
node と npm のバージョンを確認します. うまく出力されてたら大丈夫ですね.
$ node -v v13.13.0 $ npm -v 6.14.4
使用するディレクトリで初期化します. コマンドを打ったときのディレクトリに package.json が作られます. 色々聞かれますが, 後で編集できるので, Enter連打で問題ないです.
$ npm init
package.json の中身はこんな感じ.
{ "name": "playwrightTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
Playwright のインストール
今回は Playwright と Jest を組み合わせて使用します. 以下のコマンドを打つと完了!
npm install -D jest jest-playwright-preset playwrightls
Playwright でテストを書く
早速, グーグル検索をしてみましょう. ちなみにディレクトリの構造はこんな感じです.
playwrightTest
├── node_modules
├── package-lock.json
├── package.json
├── jest.config.js
└── test
└── google.test.js
今回は以下の動作確認をします.
- google.com にアクセス
- 検索フォームを埋めて検索ボタンをクリックする
- 検索結果ページ の要素を確認する
const playwright = require('playwright') const browserTypes = ['chromium', 'webkit'] for (const browserType of browserTypes){ describe('Google Test', () =>{ beforeAll(async () =>{ browser = await playwright[browserType].launch() const context = await browser.newContext() page = await context.newPage() await page.goto('https://www.google.com') await page.screenshot({path: `example-${browserType}.png`}) }) test(`checkURL and searchform ${browserType}`, async () =>{ await page.fill('.gLFyf.gsfi','playwright puppeteer') await page.screenshot({path: `example-start-${browserType}.png`}) await page.click('input[value="Google 検索"]') await page.screenshot({path: `example-end-${browserType}.png`}) searchForm = await page.$$('css=.gLFyf.gsfi') expect(searchForm.length).toBe(1) result = await page.$$('css=.g') expect(result.length).toBe(10) }) afterAll(async () => { browser.close() }) }) }
重要な部分は殆ど, 公式ページのコピペです.
テスト全体の前処理として, beforeAll, 後処理として afterAll に処理を記述しています. test の中身での要素取得はCSSセレクタを使っている場合が多いですが, 多分もっといい方法があるはず. これはAPI をもう少し調べる必要がありますね. もっと詳しくなれたら, 解説記事書いていこうかなと思います.
次に, jest.config.js の記述です. 記述の内容は, npmの説明ページを参考にしています. 今回は, playwright を動かすだけなので, 以下の記述でOK.
module.exports = { preset: 'jest-playwright-preset' }
テストを動かすために, package.json を少し書き換えます. scriptsのところを以下の通りに変更.
{ "name": "playwrighttest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "jest" }, "author": "", "license": "ISC", "devDependencies": { "jest": "^25.3.0", "jest-playwright-preset": "^0.1.2", "playwright": "^0.13.0" } }
Jest からPlaywright を実行
以下のコマンドをプロジェクトルートで実行すると, 次の出力が出てきます.
$ npm test Test Suites: 1 failed, 1 total Tests: 1 failed, 2 passed, 3 total Snapshots: 0 total Time: 23.411s Ran all test suites.
スクリーンショットも取れています.
わりとイメージ通りに動くかなと思います. ただ, firefox がうまく動かない……。なぜだろう……。
感想
- 日本語のドキュメントが皆無であるので, 実際に動くまでに苦労する
- 公式ドキュメントも微妙に分かりづらい
- webdriver に比べたらwait とか書かなくてよいし, 早い
- プロキシ設定が効かない. 全くわからなかった
そういえば, まだ バージョン 0なので上のコードも正式版のときには動かなくなっているかもですね.
