先日の記事で Windows で Playwright 動かしたら Webkit のバイナリが落ちてきた件の続きです。Windows 版 Safari が廃止され、 Chromium が Blink になってから Windows で Webkit が動かすのは難しいと考えていたのですが、 Playwright 動かしてたらあっさりと動いていたのでもう少し調べてみることにしました。
アイキャッチは WHAT’S MY USER AGENT? のキャプチャです。
バイナリを直接立ち上げてみる
playwright をインストールすると %userprofile%\AppData\Local\ms-playwright にブラウザのバイナリが自動でインストールされるのですが、その中に webkit も含まれます。
その中の Playwright.exe が webkit のブラウザになっているようです。
それをダブルクリックするとブラウザのようなものが立ち上がります。
ブラウザエンジンと最低限の UI だけ実装されています。Windows で Web Inspector が動いているのに違和感を感じてしまいますね。Playwright はこれを使うことで webkit のテストができるようです。
Webkit 特有の動きをテストしてみる
Webkit 特有の動きが再現するか試してみました。今回は transparent でグラデーションかけると Webkit だけ黒っぽくなる問題を見てみようと思います。
npm init などモジュールの作り方の説明は省略しています。ソースは GitHub にも置いてありますのでそちらも参考にして見てください。
背景色が transparent から白に変化するスタイルを書いてみました。以下を public/index.html に配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webkit だけ中央が黒っぽくなる</title>
<style>
body {
height: 100vh;
padding: 0;
margin: 0;
background: linear-gradient(transparent, #ffffff);
}
</style>
</head>
<body>
</body>
</html>
これを実行するコードは以下です。サーバー立ち上げる必要はないですが、ローカルのファイルパス指定だといまいちなので express で上記の HTML を返却します。コードは Playwright の README を参考にしています。
const playwright = require('playwright');
const express = require('express')
const app = express()
app.use(express.static(__dirname + '/public'));
var server = app.listen(3000);
(async () => {
for (const browserType of [playwright.chromium, playwright.firefox, playwright.webkit]) {
const browser = await browserType.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('http://localhost:3000/');
await page.screenshot({ path: `example-${browserType.name()}.png` });
await browser.close();
}
server.close()
})();
もちろん playwright が必要なのでインストールしておきます。express もいれます。
npm i express
npm i -D playwright
これを実行した結果は以下です1先日の Java 版の実行でブラウザは入っていたのですぐに動きました。ちょっとわかりにくいのですが、webkit (一番右) だけ黒っぽくなっています。
原因としては webkit は transparent を「黒の透明」として扱うからだそうです。本筋ではないので詳細はここでは省かせていただきます。
まとめ
Playwright では Windows 上でも簡単に Webkit のテストができるということが分かりました。ただ、 Safari は macOS/iPadOS/iOS で動きが違ったりするのですべてのケースを網羅できるわけでは無い点に注意は必要です。それでも Windows で Webkit の動作確認ができるというのは大きなメリットだと思います。