Playwrightを使ったWebアプリケーションのE2Eテスト自動化

これまでWebアプリケーションのUIの自動テストにはtesting libraryを導入してある程度の実績があったものの、あくまでもtesting libraryはコンポーネント単位のテストであり、E2Eテストが自動化できていないという課題が残っていた。ここ最近品質保証のタスクを割り振られることが多くなってきたので、ちょうどいい機会だし重い腰を上げてE2Eテストの自動化を試みる事にした。

まずはツールの選定だが、調べてみるとPlaywrightがかなり有力そうだったので、まずはPlaywrightを導入してみた。以下はPlaywrightを使った画面のテストをする上での覚書。

要素の取得

ページ内の要素を取得する場合、CSSセレクターを用いた方法と画面に表示される文字列やtitle属性の文字列をベースに探す方法がある。

CSSセレクターを用いる場合、PageあるいはLocatorオブジェクトのlocateメソッドを用いる。Page#$などのメソッドもあるが、こちらは推奨されていないようだ。

<div>
    <label>label value</label>
    <br>
    <select>
        <option>...</option>
        <option>...</option>
        <option>...</option>
    </select>
</div>

// pageはPlaywrightのPageオブジェクト
const locator = page.locator('label:has-text("' + labelValue + '") + br + select');

また、locatorを用いて要素を探す場合、hasオプションで絞り込みを行う事ができる。また、locatorの返り値のLocator型自身がlocator()を持つため、locatorのチェインが行える。例えば次のようなHTMLを考える。

<div class="item-component">
    <div class="item">
        <div class="item-header">
            <div class="header-title">header1</div>
        </div>
        <div class="item-body">
            <div>...</div>
            <div>...</div>
            <div>...</div>
        </div>
    </div>
    <div class="item">
        <div class="item-header">
            <div class="header-title">header2</div>
        </div>
        <div class="item-body">
            <div>...</div>
            <div>...</div>
            <div>...</div>
        </div>
    </div>
</div>

そもそもあまり良い構造ではないかもしれないがそれはさておき、要件としては指定された値のdiv.header-titleをもつitem-headerに隣接したdiv.item-bodyを取得することを考える。この時の考え方としては、

1. 条件を満たすdiv.itemを探す。
2. 上記のdiv.itemの下のitem-bodyを取得する。

という方法で実現できそうだ。書き方としては以下のようになる。この例だとCSSのhas疑似クラスでも書けそうだが、とりあえずlocatorで書いてみよう。

const itemBody = page.localtor('div.item', { has: page.locator('header-title:has-text("header1")') } ).locator('div.item-body');

とりあえずLocatorを使えという事らしい

Playwrightのドキュメントを読むと、Locatorが使える場面ではLocatorの利用が推奨されているようだ。

• https://playwright.dev/docs/locators
• https://playwright.dev/docs/api/class-page#page-wait-for-selector
• https://playwright.dev/docs/api/class-elementhandle

また、PlaywrightのPageオブジェクトは多くの操作でAuto-waitingをしてくれるのだが、LocatorはこのAuto-waitingと非常に相性が良いようだ。そのため、特に理由がなければLocatorを利用した方が良い。実はきちんと勉強する前に見様見真似で書いたテストの中にLocatorを活用していないコードがあるので、さっそくそれらは置き換える事にしよう。

• https://playwright.dev/docs/actionability

スクリーンショットを取る

なんか思うようにCSSセレクターが機能しないとか、Auto-waitingしてくれないとか、そういう時に結局スクリーンショットが欲しくなることがあった。

await page.screenshot({ path: 'error_screenshot.png' });

@playwright/testを使う

@playwright/testにはjestライクなアサーションなどが含まれているので、@playwrite/testをインストールすればjestのようにテストを書けるようだ。

• https://playwright.dev/docs/test-fixtures
• https://playwright.dev/docs/test-configuration
• https://playwright.dev/docs/test-cli

@playwright/testとplaywrightパッケージは同居できない？

@playwright/testの前にplaywrightパッケージをインストールして色々と試していたのだが、どうもplaywrightをインストールした後に@playwright/testをインストールしたところ、テストの実行時にエラーになった。

• https://github.com/Microsoft/playwright/issues/6981

解決方法としては、playwrightパッケージをアンインストールして@playwrite/testだけをインストールすれば良いようだ。

とりあえず覚書なのでこのぐらいで。まだPlaywrightを使い始めたばかりなのでアレだが、印象としては以下のような感じ。

• Auto-watingが効く部分が多くて使い易い。
• Locatorが特に使っていて有難かったかも。
• ドキュメントは結構充実している。