目次

はじめに

私がメンテナンスしているvanilla-smoothie.jsというスムーススクロールライブラリでは、Playwrightを使って簡易的なクロスブラウザテストを実装しています。

GitHub ActionsでPlaywrightを実行するために多少ゴリ押しで実装して放置してしまっていたのですが、今年の4月頃に公式のActionがリリースされていたので紹介します。

Playwrightとは、Chromium、WebKit、Firefoxをヘッドレスで操作できるNode.jsライブラリです。以前「PlaywrightとJestでクロスブラウザテストを実装する」と言う記事でクロスブラウザテストを実装する手順を紹介したので、気になる方は是非こちらも合わせてご覧ください。

公式のActionを使う前

一応、公式のActionを使う前の実装方法も簡単に紹介します。

実装当時はまだ公式のActionがなく、GitHub ActionsでPlaywrightを実行させるためにはapt-getで依存パッケージを別途インストールする必要がありました。既に個人で開発されているActionもあったのですが、自分の環境ではうまいこと動作しない状況でした。そこで、PlaywrightのissueやStack Overflowなどの情報を元に、次のように依存パッケージをいろいろとインストールしていました。（具体的なURLなどは記録していなかったので忘れてしまいました。ごめんなさい。）

name: Test
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: sudo apt-get update -y
    - run: sudo apt-get install -y libwoff1 libopus0 libwebp6 libwebpdemux2 libenchant1c2a libgudev-1.0-0 libsecret-1-0 libhyphen0 libgdk-pixbuf2.0-0 libegl1 libnotify4 libxslt1.1 libevent-2.1-6 libgles2 libgl1 libvpx5 libnss3 libxss1 libasound2 libdbus-glib-1-2 libxt6 xvfb
    - run: yarn
    - run: yarn test

ですが、パッケージのインストールに時間がかかったり、たまに原因不明でテストに失敗したりしており、安定稼働はしていませんでした。

microsoft/playwright-github-action を使う

2020年4月に、Playwrightの開発元であるMicrosoftが公式でmicrosoft/playwright-github-actionというActionを公開しました。

これを使うと、数行書くだけでPlaywrightを実行するための環境構築を行ってくれます。置き換えると次のようになります。

name: Test
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - uses: microsoft/playwright-github-action@v1
    - run: yarn
    - run: yarn test

とてもスッキリしましたね。セットアップの速度も問題なく、テストも安定して実行されるようになりました。

さいごに

microsoft/playwright-github-actionを使えば、簡単にGitHub ActionでPlaywrightを実行できます。

その他のCIを使用する場合は、「Continuous Integration | Playwright」に主要ないくつかのCIでの実行方法が記載されているので、参考にしてみてください。