はじめに
Electron版のSelenium IDEを独自ビルドして継続利用する場合、Selenium IDE本体だけを保守していれば十分とは限りません。
Selenium IDEの画面やテスト対象のWeb画面は、Electronに内蔵されたChromiumで描画されます。通常のChromeを更新しても、このChromiumは更新されません。また、自動操作には、内蔵Chromiumと互換性のあるChromeDriverが必要です。今回の構成ではelectron-chromedriverを使用しており、Electronと同じメジャーバージョンにそろえます。
一方、electron-builderはElectronアプリを実行ファイルやインストーラーに変換するためのツールです。描画エンジンではないため、Electronと必ず同時に更新する必要があるわけではありません。
この記事では、バージョンの確認方法と更新手順、更新時に発生したトラブルへの対処を説明します。末尾では、Electron／Chromiumが古いままだったことで実際に発生した画面表示の問題も紹介します。
今回の環境
今回の環境では、Selenium IDE本体のバージョンは変更せず、Electronとelectron-chromedriverを更新しました。
| 構成要素 | 更新前 | 更新後 |
|---|---|---|
| Selenium IDE | 4.0.1-beta.14 | 4.0.1-beta.14 |
| Electron | 29.4.6 | 43.1.1 |
| Chromium | 122.0.6261.156 | 150系 |
| electron-chromedriver | 29.4.5 | 43.1.1 |
| electron-builder | 24.9.1 | 24.9.1 |
ここで示すバージョンは、今回の環境で検証した組み合わせです。導入時点の最新版を示すものではありません。
バージョンの確認方法と更新方法
以下のコマンドは、今回利用したリポジトリ構成での例です。Selenium IDE v4系と同様のpnpm monorepoを前提としており、おおよそ次の配置になっています。
リポジトリルート/
├─ package.json … ルート設定（pnpm.onlyBuiltDependenciesなど）
├─ pnpm-workspace.yaml … packages/*をworkspaceに含める
├─ pnpm-lock.yaml
└─ packages/
└─ selenium-ide/ … Electronアプリ本体（package名: selenium-ide）
├─ package.json … electron／electron-chromedriver／electron-builder
├─ build/ … ビルド成果物（main-bundle.jsなど）
└─ dist/ … electron-builderの出力
この記事のpnpm --filter selenium-ide ...にあるselenium-ideはパッケージ名、packages\selenium-ide\...はディレクトリパスを指します。構成が異なる場合は読み替えてください。
バージョンを確認する
パッケージのバージョンは、次のコマンドで確認できます。
pnpm --filter selenium-ide list electron electron-chromedriver electron-builder
更新前は、次の状態でした。
dependencies:
electron-chromedriver@29.4.5
devDependencies:
electron@29.4.6
electron-builder@24.9.1
実際に内蔵されているChromiumのバージョンは、起動したSelenium IDEのDevTools Consoleで確認します。
navigator.userAgent
Chrome/122.0.6261.156 Electron/29.4.6
Electronとelectron-chromedriverを更新する
更新前に、関連プロセスを終了します。起動したままだと、後述するDLLの削除エラーが発生することがあります。
taskkill /F /IM "Selenium IDE.exe" /T 2>nul
taskkill /F /IM electron.exe /T 2>nul
taskkill /F /IM chromedriver.exe /T 2>nul
node.exeまでまとめて終了すると、ほかの開発環境にも影響する可能性があります。必要な場合だけ終了してください。
今回は、Electronとelectron-chromedriverを43.1.1へ更新しました。
pnpm --filter selenium-ide add -D electron@43.1.1
pnpm --filter selenium-ide add electron-chromedriver@43.1.1
ChromiumはElectronに含まれているため、Electronの更新に伴って更新されます。
更新後、パッケージのバージョンを確認します。
pnpm --filter selenium-ide list electron electron-chromedriver electron-builder
dependencies:
electron-chromedriver@43.1.1
devDependencies:
electron@43.1.1
electron-builder@24.9.1
この操作によって、package.jsonとpnpm-lock.yamlが更新されます。
ビルドとパッケージングを行う
古いElectron向けの成果物が残っていると影響する可能性があるため、先に削除します。
プロジェクトのcleanスクリプトがnode_modulesまで削除する構成になっている場合があるので、実行前に削除対象を確認してください。
Remove-Item .\packages\selenium-ide\build `
-Recurse -Force -ErrorAction SilentlyContinue
Remove-Item .\packages\selenium-ide\dist `
-Recurse -Force -ErrorAction SilentlyContinue
依存関係をインストールし、Selenium IDE本体をビルドします。
pnpm install
pnpm run build
dir packages\selenium-ide\build\main-bundle.js
main-bundle.jsが存在しない状態でelectron-builderを実行すると、次のエラーになります。
Application entry file "build\main-bundle.js" does not exist.
electron-builderは、ビルド済みのElectronアプリをパッケージングするツールです。アプリ本体のビルドを代わりに実行するものではありません。
ビルドスクリプトがUnix系OS向けの環境変数指定になっている場合、Windowsではそのまま実行できません。
CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder -mwl --publish never
Windowsのコマンドプロンプトでは、次のように実行します。
cd packages\selenium-ide
set CSC_IDENTITY_AUTO_DISCOVERY=false&& pnpm exec electron-builder --win --publish never
正常に完了すると、例えば次のファイルが生成されます。
dist\win-unpacked\Selenium IDE.exe
dist\Selenium IDE Setup 4.0.1-beta.14.exe
更新後の状態を確認する
起動したSelenium IDEのDevTools Consoleで、再度navigator.userAgentを実行します。
navigator.userAgent
Chrome/150...
Electron/43.1.1
あわせて、次の内容を確認します。
- Selenium IDEが正常に起動する
-
.sideファイルを読み込める - テストケースを編集できる
- 操作を記録できる
- 既存シナリオを実行できる
- 代表画面が正常に表示される
- HTTPSのWebアプリケーションへ接続できる
- DevToolsのConsoleに重大なエラーが出ていない
代表画面をスモークテストとして固定しておくと、次回以降の確認がしやすくなります。
バージョンアップ時のトラブルシューティング
DLLを削除できない
更新中に、次のエラーが発生することがあります。
failed to remove existing dxcompiler.dll
アクセスが拒否されました
Selenium IDE.exe、electron.exe、chromedriver.exeが起動したままだと、DLLが使用中になり、削除や上書きができません。関連プロセスを終了してから更新をやり直します。
pnpm 10が依存パッケージのビルドスクリプトを無視する
pnpm 10では、依存パッケージが持つインストールスクリプトの実行が抑止される場合があります。
今回、次の警告が表示されました。
Ignored build scripts:
@bazel/hide-bazel-files
@bazel/typescript
無視されているパッケージは、次のコマンドで確認できます。
pnpm ignored-builds
プロジェクトでスクリプトの実行を許可する場合は、ルートのpackage.jsonにonlyBuiltDependenciesを設定します。
{
"pnpm": {
"onlyBuiltDependencies": [
"electron",
"electron-builder",
"electron-chromedriver",
"@bazel/hide-bazel-files",
"@bazel/typescript"
]
}
}
設定後、再インストールまたは再ビルドします。
pnpm install
pnpm rebuild
許可するパッケージは、内容を確認したうえで選んでください。
React Developer Toolsの導入でCr24エラーになる
Electronの更新後、開発モードでSelenium IDEを起動した際に、次のエラーが発生しました。
Invalid header: Does not start with Cr24
Cr24はCRXファイル先頭の識別子です。今回のスタックトレースでは、unzip-crx-3の展開処理で失敗していました。
考えられる要因には、次のようなものがあります。
- 拡張機能の取得先からHTMLのエラーページが返された
- 拡張機能のダウンロード方式やURLが変更された
- 古いCRX展開ライブラリが新しい配布形式に対応していない
- Electron更新後も、古い
electron-devtools-installerやunzip-crx-3を使用している - プロキシやネットワーク制御によって、想定外のレスポンスが返された
React Developer Toolsは、Selenium IDE自身のReactコンポーネントを調査するための開発用機能です。通常のテスト記録・再生や、対象Webアプリケーションの表示には必須ではありません。
そのため、今回は環境変数を指定した場合だけReact Developer Toolsを導入するように変更しました。
const enableReactDevtools =
process.env.ENABLE_REACT_DEVTOOLS === 'true'
if (enableReactDevtools && !app.isPackaged && !isAutomated) {
installReactDevtools()
}
必要な場合だけ、次のように有効化します。
$env:ENABLE_REACT_DEVTOOLS = 'true'
pnpm start
この対応はReact Developer Toolsの自動インストールを回避するものであり、Selenium IDEのテスト記録や再生機能を無効化するものではありません。
同じエラーが発生しても、Electronとの互換性だけが原因とは限りません。実際に取得したファイルがCRX形式なのか、HTMLやエラーレスポンスになっていないかを確認すると、より正確に切り分けられます。
大幅更新を避け、小さく定期的に更新する
今回のようにElectron 29から43まで一度に更新すると、依存パッケージや開発用拡張機能など、周辺の問題もまとめて発生します。
可能であれば、定期的にElectronとChromiumのバージョンを確認し、検証環境で小さな単位に分けて更新する方が、問題を切り分けやすくなります。
ご参考：Electron／Chromiumが古いと何が起きるか
通常のChromeでは正常なのに、Selenium IDEだけ画面が崩れる
今回、通常のChromeでは正常に表示されるWeb画面が、Selenium IDEから開いた場合だけ、次の状態になりました。
- ヘッダ部分のコンポーネントが表示されない
- 一覧や入力エリアがつぶれて表示される
- ウィンドウサイズを変更しても改善しない
- キャッシュやLocal Storageを削除しても改善しない
- Selenium IDEを再ビルドしても改善しない
最初は、レイアウト、キャッシュ、テストシナリオによる誤操作などを疑いました。Local StorageとSession Storageも削除しましたが、表示は改善しませんでした。
localStorage.clear();
sessionStorage.clear();
location.reload();
Selenium IDEと通常のChromeでnavigator.userAgentを比較すると、大きなバージョン差がありました。
Selenium IDE
Chrome/122.0.6261.156
Electron/29.4.6
通常のChrome
Chrome/150.0.0.0
Selenium IDEのソースコードを再ビルドしても、Electronのバージョンが変わらなければ、内蔵Chromiumのバージョンも変わりません。そのため、単純な再ビルドだけでは問題を解消できませんでした。
Webアプリケーション側のどの変更が直接のきっかけになったかまでは特定していません。
ただし、次の結果から、Electron内のChromiumバージョンが主な原因だったと判断しました。
通常のChrome 150 → 正常表示
Electron 29／Chromium 122 → 画面の一部が表示されない
Electron 43／Chromium 150 → 正常表示
Electronとelectron-chromedriverを更新した結果、Selenium IDE内で発生していた画面表示の問題は解消しました。
画面崩れ以外にも起きる可能性がある
テスト対象のWebアプリケーションは継続的に更新されます。一方、Electron内のChromiumを固定したままにすると、その差によって互換性の問題が表面化する可能性があります。
例えば、次のような形で問題が発生することが考えられます。
- 新しいWeb APIやフロントエンドの実装を古いChromiumが扱えず、一部の操作や非同期UIが正しく動作しない
- DOM、イベント、タイミングの差によって、
.sideシナリオの記録や再生が不安定になる - HTTPS、証明書、Cookie、セキュリティヘッダなどの扱いが、新しい前提のWebアプリケーションや基盤と合わなくなる
- 長期間バージョンを固定したあとに一気に更新すると、依存関係や開発用拡張機能の問題がまとめて発生する
今回は画面崩れが最初に確認できた症状でしたが、保守対象として考えるべきなのは表示部分だけではありません。
Electron版Selenium IDEを独自ビルドして継続利用する場合は、Selenium IDE本体だけでなく、Electron／Chromium／electron-chromedriverも含めて、定期的に更新・検証する必要があります。