Playwright の Java 版を試してみる


E2E テスト・フレームワーク(ブラウザ操作するやつ)の1つである Playwright は個人的に node.js のイメージが強いのですが、よく見たら Java 版もあったので試してみました。(.NET, Python 版もある模様)

GitHub にある Playwright Java 版の手順を参考に導入してみます。Maven モジュールと main class の作り方はここでは省略します。サンプルは GitHub に上げているので、そちらでも確認できます。

Maven の依存関係に追加

<dependency>
  <groupId>com.microsoft.playwright</groupId>
  <artifactId>playwright</artifactId>
  <version>1.17.2</version>
</dependency>

最新のバージョンは Maven リポジトリか GitHub のリリースページで確認できます。

コードを書く

スクリーンショットを撮るサンプルが README に書いてあったので、それを参考に書きました。chromiun, webkit, firefox それぞれで全画面でスクリーンショットを撮ります。

package com.zu_min.java.examples.playwright;

import java.nio.file.Paths;
import java.util.List;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class App {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      List<BrowserType> browserTypes =
          List.of(playwright.chromium(), playwright.webkit(), playwright.firefox());

      for (BrowserType browserType : browserTypes) {
        try (Browser browser = browserType.launch();
            BrowserContext context = browser.newContext();
            Page page = context.newPage()) {

          page.navigate("https://www.zu-min.com/");
          page.screenshot(new Page.ScreenshotOptions().setFullPage(true)
              .setPath(Paths.get("screenshot-" + browserType.name() + ".png")));
        }
      }
    }
  }
}

実行する

以下 PowerShell での実行例です。

mvn compile exec:java "-Dexec.mainClass=com.zu_min.java.examples.playwright.App"

すると色々ログに出てきますが、ブラウザが立ち上がったりはせず静かに実行されました1裏でヘッドレスなブラウザが起動しているようです。そこにバイナリ保存するんだと思いましたが、 java 以外の Playwright でも共通で使われるんでしょうか。

PS C:\Dev\take-screenshot-java\take-screenshot> mvn clean compile exec:java
[INFO] Scanning for projects...
[INFO] 
[INFO] ------< com.zu_min.java.examples.playwright:take-screenshot >-------
[INFO] Building take-screenshot 1.0.0-SNAPSHOT
[INFO] --------------------------------[ jar ]---------------------------------
[INFO] 
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ take-screenshot ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Dev\examples-playwright-java\take-screenshot\src\main\resources
[INFO]
[INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ take-screenshot ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 1 source file to C:\Dev\examples-playwright-java\take-screenshot\target\classes
[INFO] 
[INFO] --- exec-maven-plugin:3.0.0:java (default-cli) @ take-screenshot ---
Downloading Playwright build of chromium v939194 - 101.8 Mb [====================] 100% 0.0s
Playwright build of chromium v939194 downloaded to C:\Users\zu-min\AppData\Local\ms-playwright\chromium-939194
Downloading Playwright build of ffmpeg v1006 - 1.4 Mb [====================] 100% 0.0s
Playwright build of ffmpeg v1006 downloaded to C:\Users\zu-min\AppData\Local\ms-playwright\ffmpeg-1006
Downloading Playwright build of firefox v1304 - 74.2 Mb [====================] 100% 0.0s
Playwright build of firefox v1304 downloaded to C:\Users\zu-min\AppData\Local\ms-playwright\firefox-1304
Downloading Playwright build of webkit v1578 - 41.3 Mb [====================] 100% 0.0s
Playwright build of webkit v1578 downloaded to C:\Users\zu-min\AppData\Local\ms-playwright\webkit-1578
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  01:50 min
[INFO] Finished at: 2021-12-11T12:57:11+09:00
[INFO] ------------------------------------------------------------------------

結果

ブラウザエンジンごとにスクリーンショットが保存されます。

全画面の場合もきれいに撮れている印象です。画面下部固定などのパーツが繰り返し出ることもありません。ただ、固定位置がブラウザによって異なるのが若干気になります(chromium は最下部、その他はファーストビューの下部)。

全画面キャプチャの一部抜粋

そういえば Windows で試したのに Webkit が動くのはどういう仕組みなんでしょう。

WSL Ubuntu でも

ついでに WSL の Ubuntu でも動かしてみました。

途中以下のようなエラーが出るので、

[INFO] --- exec-maven-plugin:3.0.0:java (default-cli) @ take-screenshot ---
Downloading Playwright build of chromium v939194 - 128.9 Mb [====================] 100% 0.0s
Playwright build of chromium v939194 downloaded to /home/zu-min/.cache/ms-playwright/chromium-939194
Downloading Playwright build of ffmpeg v1006 - 2.6 Mb [====================] 100% 0.0s
Playwright build of ffmpeg v1006 downloaded to /home/zu-min/.cache/ms-playwright/ffmpeg-1006
Downloading Playwright build of firefox v1304 - 72.7 Mb [====================] 100% 0.0s
Playwright build of firefox v1304 downloaded to /home/zu-min/.cache/ms-playwright/firefox-1304
Downloading Playwright build of webkit v1578 - 76.7 Mb [====================] 100% 0.0s
Playwright build of webkit v1578 downloaded to /home/zu-min/.cache/ms-playwright/webkit-1578
[WARNING]
com.microsoft.playwright.PlaywrightException: Error {
  message='
╔════════════════════════════════════════════════════════════════════════════════════════════════════╗
║ Host system is missing a few dependencies to run browsers.                                         ║
║ Please install them with the following command:                                                    ║
║                                                                                                    ║
║     sudo mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="install-deps" ║
║                                                                                                    ║
║ <3 Playwright Team                                                                                 ║
╚════════════════════════════════════════════════════════════════════════════════════════════════════╝

エラー文に出ていたコマンドを実行します(root ユーザーにも java と mvn の設定が必要)。

sudo mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="install-deps"

すると同様に画像が生成されます2但し、フォントが足りないので漢字がいまいちです。GUI じゃない環境でも実行できるのは素晴らしいですね。

まとめ

今回はスクリーンショットを試しましたが、 JavaScript の実行や現在位置の設定などもできるようです。簡単に複数のブラウザでのテストを書けるので、Webアプリの品質向上のために導入を検討していきたいと思います。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください