【Selenium】IEモードでテスト自動化をしてみる

2022年6月15日にIEのサポートが終了するということで、他のブラウザに移行する方も多いかと思われます。
その移行先の1つにEdgeのIEモードがあります。[Qiitaの記事](https://qiita.com/skwbr/items/456a341715a90c166093)によると、2029年までサポートするとの事です。

しかし自動テストツールではこのIEモードに対応しているツールは少ないです。
その1つに[Selenium](https://www.selenium.dev/ja/documentation/)があります。
今回は、そのSeleniumを使って自動化してみたいと思います。

## お伝えしたいこと

いくつか設定の変更や制約があるが、SeleniumでEdgeのIEモードを動かすことは可能

## 今回実装した環境

| 項目 | バージョン |
|:-----------|:------------|
| OS       | Windows 10 pro       |
|ブラウザ    | バージョン 100.0.1185.29 (公式ビルド) (64 ビット)      |
| 言語      | Python        |
| IDE         | Visual Studio Code          |
| Webdriver       | The Internet Explorer Driver Server 4.0.0.0       |
| Selenium    | 4.1.3     |
|pytest | 7.1.1 |

## 事前準備

1. Chromium版Edgeのインストール（すでにある人は不要）
    - ダウンロード場所：[Microsoft Edge Web ブラウザーをダウンロード | Microsoft](https://www.microsoft.com/ja-jp/edge?r=1)
1. EdgeのIEモードを有効にする
    - [こちらの記事](https://solutions.vaio.com/4409)が分かりやすいです。
1. IE用WebDriverのダウンロード
    - Seleniumで使用するwebdriverをダウンロードします。
    - ダウンロード場所：[Downloads | Selenium](https://www.selenium.dev/downloads/)
        - 「32 bit Windows IE」を選択することをおすすめします。
::: note warn
注意
ダウンロード後、格納場所を環境変数PATHに追加してください。（[こちら](https://www.selenium.dev/ja/documentation/ie_driver_server/#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)の記事を参照のこと）
:::


## EdgeのIEモードで実施するためのコードを書く

今回の対象webサイトはHotelサイトをフォークし、アレンジしたものを使用します。
対象Webサイト：[宿泊予約 | HOTEL PLANISPHERE - テスト自動化練習サイト (vtoruyamaguchi.github.io)](https://vtoruyamaguchi.github.io/hotel-example-site/ja/reserve.html?plan-id=0)

[Microsoftの記事](https://docs.microsoft.com/ja-jp/microsoft-edge/webdriver-chromium/ie-mode?tabs=c-sharp)を参考にして、実装しました。

### IEモードで起動する

```py
from selenium import webdriver

class TestHotelPlanisphere(object):

    def setup_method(self):

        # Microsoft Edgeに追加のプロパティを使用し、InternetExplorerOptionsを定義
        ie_options = webdriver.IeOptions() 
        ie_options.attach_to_edge_chrome = True
        ie_options.edge_executable_path = "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"

        # IEDriverの起動し、画面サイズを最大にする
        self.driver = webdriver.Ie(options=ie_options) 
        self.driver.maximize_window()

```

<details><summary>サンプルコード</summary>

```py
from os import name
from selenium import webdriver
from selenium.webdriver.support.ui import Select
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

class TestHotelPlanisphere(object):

    def setup_method(self):
        ie_options = webdriver.IeOptions()
        ie_options.attach_to_edge_chrome = True
        ie_options.edge_executable_path = "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"

        self.driver = webdriver.Ie(options=ie_options)
        self.driver.maximize_window()

    def test_change_all_params(self):
        # サイトを開く
        driver = self.driver
        driver.get("https://vtoruyamaguchi.github.io/hotel-example-site/ja/reserve.html?plan-id=0")

        WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, "confirm-button")))
        # 宿泊日の指定
        textbox = driver.find_element(By.ID, "accommodation")
        textbox.clear()
        textbox.send_keys("2022/04/09")

        # 宿泊数
        stay = driver.find_element(By.ID, "term")
        stay.clear()
        stay.send_keys("3")

        # 宿泊人数
        people = driver.find_element(By.ID, "head-count")
        people.clear()
        people.send_keys("2")

        # プラン選択
        driver.find_element(By.ID, "sightseeing").click()

        # 名前入力
        name = driver.find_element(By.ID, "username")
        name.clear()
        name.send_keys("toru yamaguchi")

        # 確認連絡方法
        dropdown = Select(driver.find_element(By.ID, "contact"))
        dropdown.select_by_value("no")

        # 予約ボタン押下
        driver.find_element(By.ID, "confirm-button").click()

    def teardown_method(self):
        self.driver.quit()

```

</details>

## テスト実施時に気を付けること

テストコードを実行する時、以下の設定が必要になります。

- ディスプレイの拡張率を100%にする
- インターネットオプションのセキュリティタブにて、IEの拡張保護モードをすべて無効にする（インターネット/ローカルイントラネット/信頼済みサイト/制限付きサイト）
![Qiita参考画像_インターネットオプション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1895890/fa884888-009d-c17e-00f1-160d622d0a5f.png)


実行は従来通りです。

``` cmd
pytest ファイル名
```

以下のようにIEモードで実行することができましたー
![Qiita参考画像_実施時.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1895890/a4c63d3a-2d3f-0fd7-bea6-03a17b0e2026.png)


## まとめ

いくつか設定変更や制約がありますが、EdgeのIEモードでも自動化できました。
IEモードで実装する必要が出てきたらこの記事を参考にしていただければと思います。

## 参考資料

- [IE (IE11) の完全終了に関するメモ](https://qiita.com/skwbr/items/456a341715a90c166093)
- [ドライバー Internet Explorerを使用して、デバイスで IE モードをMicrosoft Edge](https://docs.microsoft.com/ja-jp/microsoft-edge/webdriver-chromium/ie-mode?tabs=c-sharp)
- [Seleniumブラウザー自動化プロジェクト](https://www.selenium.dev/ja/documentation/)
    - [IE Driver サーバー](https://www.selenium.dev/ja/documentation/ie_driver_server/#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)