2020 年 5 月の頭頃、Playwright が 1.0 に到達した際に、作成チームによって書かれた記事がホットエントリーになっていました。
https://medium.com/@arjunattam/fast-and-reliable-cross-browser-testing-with-playwright-155c0e8a821f
タイミング良くクロスブラウザテストを書く機会があったので、簡単なテストを書いてみました。
※ ブラウザ毎に挙動の異なる API のテストだと良かったのですが、こちらで実施するのはボタンをクリックして innerText の変更をテストするのみです。
ソースはこちらにあります。
https://github.com/nnashiki/playwright_sample
Playwrigh とは
Chromium、Firefox、Safari を簡単にクロスブラウザテストするための、Node library とのことです。
Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.
https://playwright.dev/
https://github.com/microsoft/playwright
冒頭に挙げた medium の記事では、Chromium、WebKit、FireFox、WebDriver などに協力を得た(巨人の肩に乗ってるんだぜ!)とあります。
アーリアダプターはこんな感じに充実しています。
テスト対象
"ボタン押下前"と書かれているボタンを押すと"ボタン押下前"に変わる簡単なものです。
以下コマンドでサービスを立ち上げます。docker run --rm --name sample -p 8090:80 -v $PWD/src/app:/usr/share/nginx/html -d nginx
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>ボタンテスト</title><linkrel="icon"href="favicon.ico"/><!-bootstrap4-><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"/><!-bootstrap4-></head><body><divclass="container"><buttonid="test_button1"type="button"class="btn btn-primary">ボタン押下前
</button></div><script type="text/javascript"src="./index.js?0.0"></script><!-bootstrap4-><script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><!-bootstrap4-></body></html>constbutton1=document.getElementById("test_button1");button1.addEventListener("click",(e)=>{document.getElementById(e.target.id).innerText="ボタン押下後";});テストコード
利用コード
test runner は Jest を使用しています。
各ブラウザで自動操縦でボタンをクリックして、表記の変化を確認するテストです。
ブラウザ単位でテスト結果を確認したいので分割しました。
constplaywright=require("playwright");// #test_button1 のボタンを押下して、ボタンの表記を取得するconstcroll_click=async(browserType)=>{constbrowser=awaitplaywright[browserType].launch();constcontext=awaitbrowser.newContext();constpage=awaitcontext.newPage();awaitpage.goto("http://localhost:8090");awaitpage.click("#test_button1");constclick_after_text=awaitpage.evaluate(()=>{returndocument.getElementById("test_button1").innerText;});awaitbrowser.close();returnclick_after_text;};test("click chromium",async()=>{letresult=awaitcroll_click("chromium");expect(result).toMatch(/ボタン押下後/);});test("click firefox",async()=>{letresult=awaitcroll_click("firefox");expect(result).toMatch(/ボタン押下後/);});test("click webkit",async()=>{letresult=awaitcroll_click("webkit");expect(result).toMatch(/ボタン押下後/);});page の中での javascript(webAPI)の実行は以下を参考にしました。
https://playwright.dev/#version=v1.0.2&path=docs%2Fverification.md&q=evaluating-javascript
Jest の set up、tear down でブラウザの呼び出しと終了をするには以下が参考になります。
https://playwright.dev/#version=v1.0.2&path=docs%2Ftest-runners.md&q=jest--jasmine
環境構築
Playwright、 Jest を install します。
npm install --save-dev playwright
npm install --save-dev jest
実行してみる
jest src/testを実行します。
ブラウザ毎のテストを実行することができました。
> jest src/test
PASS src/test/button_action.test.js (7.1 s)
✓ click chromium (1327 ms)
✓ click firefox (4186 ms)
✓ click webkit (1073 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 7.594 s
Ran all test suites matching /src\/test/i.
tips
そのまま実行すると、Jest の default time out が引っかかることがありました。
FAIL src/test/button_action.test.js (8.725 s)✓ click chromium (2076 ms)✕ click firefox (5002 ms)✓ click webkit (1018 ms)● click firefox
: Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Error:
22 | });
23 |
> 24 | test("click firefox", async ()=>{
| ^
25 | let result = await croll_click("firefox");
26 | expect(result).toMatch(/ボタン押下後/);
27 | });
at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
at Object.<anonymous> (src/test/button_action.test.js:24:1)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 2 passed, 3 total
Snapshots: 0 total
Time: 9.605 s, estimated 12 s
Ran all test suites.
そこで、timeout を伸ばして実行しました。jest src/test --testTimeout=10000
5000mm を超えても実行できています。
$ jest src/test --testTimeout=10000
PASS src/test/button_action.test.js (11.592 s)
✓ click chromium (3831 ms)
✓ click firefox (5042 ms)
✓ click webkit (1948 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 12.957 s
Ran all test suites matching /src\/test/i.
まとめ
puppeteer は使った事が無いので、比較はできませんが利用の開始はとても簡単でした。
Playwright は普及しそうなので、今後も追ってみたいと思います。