🎉

令和時代にSelniumでIEを動かす(1)

2021/07/20に公開

1件

64bit版、32bit版のInternet Explorerの設定が重要

Windows11ではIE無くなってたなぁ。。。（￣-￣）ﾄｵｲﾒ

------------------- ↓ 前書はここから ↓-------------------

Selenumかぁ。
個人的には最も使いたくないソリューション
過去、behatやtestcafeの研究、最近ではPlaywrightをやってたりするのは、
ひとえにSelenumを使いたくない一心だった。

しかし、ことIEが絡んでくると選択肢が少なくなる。
現状TestcafeかSelenum、
または外部ソリューションなどになるわけで、
今回はSelenumが採択された。

(´・ω・｀) あーやだなー

腐ってもしょうがないので進めよう。
Selenumは2の頃で知識が止まっている。
そもそもWebDriverを発明したことでSelenumがいらなくなるという自爆をやらかしたわけだが、
今ではどうなってるんだろうか。

調べてみると現在の最新バージョンは4のalpha版で開発は相変わらずクソ遅い。
もう存在意義もないからなぁしゃーないか。

さて、知ってる人もいるかもだが、
SelenumでIE動かすのはマジ大変。
(レジストリ書き換えとかある)
今回はその設定を全部書こう。

IE供養だな。(‐人‐)ﾅﾑﾅﾑ

心してみるように。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

Windows上にNode.jsをインストール

Windows上にNode.jsをインストールする。
Windows10を最新にしておくのが前提

ストアページからアプリインストーラーをインストールする
PowerShellを起動し以下のコマンドを実行

powershell

winget install OpenJS.Nodejs

一度PowerShellを閉じで再度開く

powershell

PS > node --version
v16.3.0
PS > npm i -g npm
PS > npm --version
7.18.1

IEの設定

さて、[Selenium]でIEを動かす方法はマニュアルに記載があるので、
全部載せておこう。

・The IEDriverServer exectuable must be downloaded and placed in your PATH.
・On IE 7 or higher on Windows Vista, Windows 7, or Windows 10, you must set the Protected Mode settings for each zone to be the same value. The value can be on or off, as long as it is the same for every zone. To set the Protected Mode settings, choose "Internet Options..." from the Tools menu, and click on the Security tab. For each zone, there will be a check box at the bottom of the tab labeled "Enable Protected Mode".
・Additionally, "Enhanced Protected Mode" must be disabled for IE 10 and higher. This option is found in the Advanced tab of the Internet Options dialog.
The browser zoom level must be set to 100% so that the native mouse events can be set to the correct coordinates.
・For Windows 10, you also need to set "Change the size of text, apps, and other items" to 100% in display settings.
・For IE 11 only, you will need to set a registry entry on the target computer so that the driver can maintain a connection to the instance of Internet Explorer it creates. For 32-bit Windows installations, the key you must examine in the registry editor is HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE. For 64-bit Windows installations, the key is HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE. Please note that the FEATURE_BFCACHE subkey may or may not be present, and should be created if it is not present. Important: Inside this key, create a DWORD value named iexplore.exe with the value of 0.

(^_-)-☆彡全部やってね

IE10の話はスルー

もう存在しないものとしよう

ズームを100%にする

これは簡単。
IEを起動して拡大値を100%にしておく。

詳細設定の調整

拡張保護モードを無効する

IE10以上らしいのだが、
詳細設定欄に拡張保護モードというのがあるのでそれを解除する

メニューからインターネットオプションを開く

詳細設定タブから 拡張保護モードを有効にする の チェックをはずす

64bitプロセッサの設定

マニュアルに書いてないのだが、
拡張保護モードで64ビットプロセッサを有効にする も設定する必要がある
32bit版と64bit版では設定が異なるので注意

バージョン	項目
32bit版	チェックを外す
64bit版	チェックを入れる

画像は64bit版の設定

プロテクトモードの解除

IEにはなんちゃってではあるがセキュリティ機能がついている。
これらを有効にしておく必要がある。

インターネットオプションのセキュリティタブを押下

四角で囲った４項目

インターネット
ローカルイントラネット
信頼済みサイト
制限付きサイト

それぞれに 保護モードを有効にするチェックがあるので全部チェックをいれる

OKを押下の後IEを閉じる

レジストリを変更

※以下の作業は細心の注意を払ってください。何か起こっても自己責任で。

スタートメニューよりレジストリエディタを起動
(regeditで検索)

以下の場所へ移動

バージョン	項目
32bit版	HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl
64bit版	HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl

FeatureControlを右クリックし新規-キーより、
FEATURE_BFCACHEという名称のキーを追加(画像は32bit版)

FEATURE_BFCACHEキーを押下し、
右側の枠内で右クリック、
DWORD値 を追加し名称を iexplore.exeにする

完成図

ε=(￣｡￣;A　ﾌｩ… 緊張した～

ここまでくればあとは楽

iedriverをインストール

iedriverパッケージは必要なドライバーを全部用意してくれるので、
一緒に入れておく。

mkdir selenium
cd selenium
npm init -y
npm i -D selenium-webdriver iedriver

サンプル実行

下記サンプルコードを実行する。
Googleにアクセスしてwebdriverで検索するという簡単なもの。
ServiceBuilderのパス値は適宜変更

バージョン	項目
32bit版	node_modules/iedriver/lib/iedriver/IEDriverServer.exe
64bit版	node_modules/iedriver/lib/iedriver64/IEDriverServer.exe

seleniumSample.cjs

(async() => {
  const {Builder, By, Key, until} = require("selenium-webdriver")
  const ie = require('selenium-webdriver/ie')

  let service = new ie.ServiceBuilder("node_modules/iedriver/lib/iedriver/IEDriverServer.exe")
  let driver = await new Builder()
                .setIeService(service)
                .forBrowser('internet explorer')
                .build()
  try {
    await driver.get('https://www.google.co.jp')
    await driver.findElement(By.name('q')).sendKeys('webdriver', Key.ENTER)
  }
  finally {
    await driver.sleep(5000)
    await driver.quit()
  }
})()

実行

node seleniumSample.cjs

(･ω･) なんとかいけそうだな。

ちょっと拡張して・・・
あれ？クリックが動かない？(^_^;)

次回に続く

------------------- ↓ 後書はここから ↓-------------------

テストランナーについて

テストは一枚だけではないので、
まとめて実行するためのテストランナーも必要。
SeleniumIDEの出力コードはMochaベースになってるので、
Mochaを用意する。
ただ、フォーマットはJestも同じだからJestでもいいかもしれない。

個人的にはWebdriverIOを使いたいところ。

powershell

npm i -D mocha
npx mocha

他のブラウザのドライバを一括ダウロード

Seleniumを使うのであればIEだけでなくChromeやFirefox, Edgeなど他のブラウザにも対応させたいはず。
今回はiedriverというモジュールを使っているが、
他のブラウザの場合はドライバーをダウンロードしてパスを通す必要がある。

ただ、一つ一つやると面倒なので、
一括でダウンロードする方法がある。

selenium-standalone というパッケージにそのダウンロード機能があるのでそれを使う

npm i -D selenium-standalone
npx selenium-standalone install

これで./node_modules/selenium-standalone/.selenium 配下に各種ドライバーがダウンロードされている

Discussion

Yasuyuki ENDO

nuget install Selenium.WebDriver.IEDriver -Version 3.150.1.2

でカレントディレクトリにSelenium.Webdriver.IEDriver.3.150.1.2がインストールされ、Zoomを100%にしておく必要はありますが、特にレジストリをいじらなくてもSeleniumからIEを起動できました。