Playwright で Chrome の旧バージョンを使ってテストする方法
2025.03.21最初に
私たち製造ビジネステクノロジー部では、製造業に関するエンドユーザや事業会社さんに対して、システムやサービスを事業会社さんと一緒に作成・運用しています。
本記事では製造業や金融機関など何らかの理由でブラウザを更新できない環境向けの Web システムを作成する際に、Playwright を使用した E2E テストで、Chrome のバージョンを固定し、旧バージョンでも動作検証する方法を紹介します。
（↑ なんて書きましたが、この記事執筆理由は googlebot の Chrome バージョンの検証だったりします）
準備: 検証用プロジェクトの作成
まずは準備として検証用プロジェクトの作成から進めていきます。
執筆環境は M4 macOS を使っていますが、Windows でも Linux でも同様の手順で進めていけると思います。
playwright-example ディレクトリを作成し、その中で以下のコマンドを実行し、プロジェクトを作成します。
npm init playwright@latest
今回は Chrome の旧バージョンの検証なので playwright.config.ts 内の reporter と projects は以下の通りに設定しています。
reporter: 'line',
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
次にテスト実行時にブラウザのバージョンを表示させるため、tests/example.spec.ts を以下の通りに書き換えました。やっつけですがバージョンさえ知れたらいいので見逃してください 🙈
import { test, expect } from "@playwright/test";
test("version", async ({ browser }) => {
const version = browser.version();
console.log(version);
expect(version).toBeTruthy();
});
テストを実行し、バージョンを確認します。
$ npx playwright test
Running 1 test using 1 worker
[chromium] › tests/example.spec.ts:3:5 › version
133.0.6943.16
1 passed (319ms)
Playwright インストール時の Chrome のバージョンが表示されるはずです。ここでは 133.0.6943.16 が表示されました。
準備ができたので、Chrome の旧バージョンを用いてテストを行っていきます。
Chrome 113 以上のバージョンでテストする場合
Google から Chrome for Testing という「ウェブアプリのテストと自動化のユースケースに特化した Chrome」が提供されていますので、こちらを使用することで旧バージョンの Chrome を用いてテストできます。
提供されているバージョンは以下の JSON ファイルで確認できます。
{"timestamp":"2025-03-06T01:37:04.011Z","milestones":{
"113":{"milestone":"113","version":"113.0.5672.63","revision":"1121455"},
"114":{"milestone":"114","version":"114.0.5735.133","revision":"1135570"},
"115":{"milestone":"115","version":"115.0.5790.170","revision":"1148114"},
"116":{"milestone":"116","version":"116.0.5845.96","revision":"1160321"},
"117":{"milestone":"117","version":"117.0.5938.149","revision":"1181205"},
"118":{"milestone":"118","version":"118.0.5993.70","revision":"1192594"},
"119":{"milestone":"119","version":"119.0.6045.105","revision":"1204232"},
"120":{"milestone":"120","version":"120.0.6099.109","revision":"1217362"},
"121":{"milestone":"121","version":"121.0.6167.184","revision":"1233107"},
"122":{"milestone":"122","version":"122.0.6261.128","revision":"1250580"},
"123":{"milestone":"123","version":"123.0.6312.122","revision":"1262506"},
"124":{"milestone":"124","version":"124.0.6367.207","revision":"1274542"},
"125":{"milestone":"125","version":"125.0.6422.141","revision":"1287751"},
"126":{"milestone":"126","version":"126.0.6478.182","revision":"1300313"},
"127":{"milestone":"127","version":"127.0.6533.119","revision":"1313161"},
"128":{"milestone":"128","version":"128.0.6613.137","revision":"1331488"},
"129":{"milestone":"129","version":"129.0.6668.100","revision":"1343869"},
"130":{"milestone":"130","version":"130.0.6723.116","revision":"1356013"},
"131":{"milestone":"131","version":"131.0.6778.264","revision":"1368529"},
"132":{"milestone":"132","version":"132.0.6834.159","revision":"1381561"},
"133":{"milestone":"133","version":"133.0.6943.141","revision":"1402768"},
"134":{"milestone":"134","version":"134.0.6998.35","revision":"1415337"},
"135":{"milestone":"135","version":"135.0.7049.5","revision":"1427262"},
"136":{"milestone":"136","version":"136.0.7051.0","revision":"1428295"}}}
執筆時点では 113 から 136 となっていました。
（※ 執筆時点の Chrome の Stable チャンネルは 134 なので、 135 は Beta チャンネル、136 は Dev チャンネルのようです。記事タイトルは旧バージョンと書いてますが、これらを利用することで将来のバージョンでテストが可能です。）
それでは上記のリストから最古のバージョンである 113 を使ってテストを実行します。
まずは、対象のバージョンの Chrome をインストールします。
npx @puppeteer/browsers install chrome@113
するとプロジェクト内に chrome ディレクトリが作成され、更にその中に mac_arm-113.0.5672.63 もしくは win64-113.0.5672.63のような名前でディレクトリが作成され、Chrome 本体がインストールされます。
次にインストールされた Chrome を使ってテストを実行するように、playwright.config.ts を以下のように変更します。executablePath で先ほどの Chrome のパスを指定します。
projects: [
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
launchOptions: {
executablePath:
"./chrome/mac_arm-113.0.5672.63/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
// Windows の場合は exe へのパスを指定します
// executablePath: "./chrome/win64-113.0.5672.63/chrome-win64/chrome.exe",
},
},
},
],
この時パスの指定の仕方に注意してください。
macOS の場合、Finder で見ると chrome/mac_arm-113.0.5672.63/chrome-mac-arm64/Google Chrome for Testing.app が表示されますが、指定するパスはパッケージの中の Contents/MacOS/Google Chrome for Testing となります。
そしてテストを実行し、バージョンを確認します。
$ npx playwright test
Running 1 test using 1 worker
[chromium] › tests/example.spec.ts:3:5 › version
113.0.5672.63
1 passed (2.3s)
無事指定したバージョンの 113 の表示が確認できました。
Chrome 112 以下のバージョンでテストする場合
上記で紹介した Chrome for Testing は 113 以降しか公開されていません。
112 以下でテストをしたい場合は別の手段で行う必要があります。
Chrome が無いなら Chromium を使えばいいじゃないってことで以下から旧バージョンの Chromium をダウンロードします。
OS、アーキテクチャ毎にディレクトリが分かれているので動作対象のディレクトリを開きます。
執筆環境では Mac_Arm になります。
すると今度はリビジョンの数字が書かれたディレクトリが大量に出てきます。ここではバージョンではなくリビジョンから対象のバージョンを探し出さなければなりません。
リビジョンとバージョンのマッピングは以下のリポジトリが参考になると思います。
今回は 111.0.5484.0 (r1084740)で進めていきます。
- Mac_Arm
- https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac_Arm/1084740/
- 上記 URL から chrome-mac.zip をダウンロードします。
- Win_x64
- https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/1084740/
- 上記 URL から chrome-win.zip をダウンロードします。
ダウンロードした zip を展開し、中身を ./chrome ディレクトリ内に配置します。
ここで一つ注意点があります。
macOS ではダウンロードしてきたファイルを実行しようとすると警告が出ます。
このままではテストも実行できませんので、以下のコマンドを実行し拡張属性をクリアします。
xattr -c Chromium.app
そして同じようにplaywright.config.ts で、ダウンロードしてきた chromium を指定します。
projects: [
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
launchOptions: {
executablePath:
"./chrome/chrome-mac-111.0.5484.0/Chromium.app/Contents/MacOS/Chromium",
// Windows の場合は exe へのパスを指定します
// "./chrome/chrome-win-111.0.5484.0/chrome.exe",
},
},
},
],
こちらも macOS の場合は Chromium.app 内の Chromium までパスを指定します。
そしてテストを実行し、バージョンを確認します。
$ npx playwright test
Running 1 test using 1 worker
[chromium] › tests/example.spec.ts:3:5 › version
111.0.5484.0
1 passed (2.3s)
無事指定したバージョンの 111 の表示が確認できました。
最後に
Playwright で旧バージョンの Chrome を利用し、テストする方法を紹介しました。
本文中にも書きましたが、「旧バージョン」と言っていますが、Chrome for Testing には現行バージョン、将来バージョンがありますので、今回紹介した方法を用いて今後の Chrome アップデートに備えた E2E テストを作成できます。バージョン情報の JSON もありますので、CI で常に次のバージョンでテストするといったことができそうです。
今回紹介した方法を用いて、特定のブラウザバージョンに依存する問題を早期に発見したり、様々な環境でのユーザー体験を確保したりすることが可能になります。
この記事が確実に動作する Web システムの提供のお役に立てれば幸いです。
