テスト自動化ツール8種のサポートブラウザまとめ

## はじめに

ブラウザアプリのE2Eテスト（UIテスト）のテスト自動化ツールの選定にあたり、要件の1つになるであろう**サポートブラウザ**と**プログラミング言語**のまとめです。（2021年12月時点）

各公式サイトや、既存のツール比較やツール一覧の数々を読めば欲しい情報を得られます。しかし、「このツールが入ってない」「Chrome、Edge “など” の “など” が知りたい」「公式サイトのどこに書いてあるの？」を繰り返してきました。そこで今回は、最近よく目にするツールや、以下のまとめに登場したツールから8種を選び、要件別にまとめました。

- [GUIテストツール一覧 - Qiita](https://qiita.com/jun2014/items/8cabbd52830904af49af)
- [テスト自動化関連ツール・ライブラリまとめ - Qiita](https://qiita.com/YoshikiIto/items/2b3ab5ff84610d0f74bd)

まとめたい要件が増えたら追加する予定です。

### 調査対象

- 有償ツール　3種（SaaSで提供されるAI自動テストツール）
  - Autify
  - mabl
  - Magic Pod
- OSS　5種
  - Playwright
  - Puppeteer
  - Selenium（Webdriver）
  - Cypress
  - Testcafe

### SPブラウザの調査

全て**Chromeのモバイルエミュレーション機能**を利用できるかどうかを調査しています。

実際のモバイル端末上で動作するわけではないため、自動テストに用いる場合は以下の点に注意が必要です。

- モバイルのブラウザアプリ特有の動作はテストできない
  - 例えば、Safariの検索窓を使う、Safariのブックマーク機能を使うなど
- モバイル端末のOSやハードウェアに起因する動作のテストはできない

ネイティブアプリとしてテストしたい場合は別のツールを使うか、同ツールがモバイルアプリに対応している場合はそちらを使いましょう。（[参考：ブラウザテスト実践ガイド – Magic Pod](https://support.magic-pod.com/hc/ja/articles/4408837111449#mobile_emulation)）

※モバイルエミュレーション機能はChromeの開発者ツールから触ることができます

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548627/1bc6e53a-1026-ea29-50c6-d72a88f57f68.png) |
| :------------------------------------------------------------------------------------------------------------------------ |

## サポートブラウザまとめ

### 有償ツール

有償ツールの実行環境の種類は次の3パターン。プランや実行単位によってサポートが異なるため、後述の**注意**もご覧ください。

- `△クラウド`
    - 各サービスが用意するクラウド環境または提携する外部デバイスファーム上のOS上で対象のブラウザが立ち上がります。
    - クラウド環境のメリットは、並列実行ができること。
- `▲ローカル`
    - 実行用のPC端末に対象のブラウザをインストールしてテストを行います。
    - ローカル環境のメリットは、高速で実行できることと、実際の動作を目視で見れてFail調査がしやすいこと。
- `✓`
    - クラウド環境、ローカルPCの両環境での実行が可能です。

|                  | Autify  |  mabl   | Magic Pod |
| ---------------- | :-------: | :-------: | :---------: |
| Chrome           | △クラウド | △クラウド |      ✓      |
| Edge（Chromium） | △クラウド |     -     |  ▲ローカル  |
| Firefox          | △クラウド | △クラウド |  ▲ローカル  |
| Safari           | △クラウド | △クラウド |  ▲ローカル  |
| IE11             | △クラウド | △クラウド |  ▲ローカル  |
| Safari/iOS       | △クラウド | △クラウド |      ✓      |
| Chrome/Android   | △クラウド | △クラウド |      ✓      |

**※注意**

- Autifyとmablは、料金プランによって利用できるブラウザに制限があります。
- Magic Podは、外部デバイスファーム（[BrowserStack](https://www.browserstack.com/), [SauceLabs](https://saucelabs.com/)）を別途契約することで、デバイスファームのブラウザ上でもテスト実行できます。
- 実際の利用を想定し、表には**複数のテストケースを一括実行する場合**のサポートブラウザを記載しています。**1つのテストケースのみを実行する場合**は下表の通り。作成したテストケースを通しで試してみたい場合や、デバッグ時に利用します。

**※参考：1つのテストケースのみを実行する場合**

|                  | Autify  |  mabl   | Magic Pod |
| ---------------- | :-------: | :-------: | :---------: |
| Chrome           |     ✓     |     ✓     |      ✓      |
| Edge（Chromium） | △クラウド |     -     |  ▲ローカル  |
| Firefox          | △クラウド | △クラウド |  ▲ローカル  |
| Safari           | △クラウド | △クラウド |  ▲ローカル  |
| IE11             | △クラウド | △クラウド |  ▲ローカル  |
| Safari/iOS       |     ✓     | △クラウド |      ✓      |
| Chrome/Android   |     ✓     | △クラウド |      ✓      |

### OSS

|                  | Playwright | Puppeteer | Selenium | Cypress |    Testcafe     |
| ---------------- | :--------: | :-------: | :------: | :-----: | :-------------: |
| Chrome           |     ✓      |     ✓     |    ✓     |    ✓    |        ✓        |
| Edge（Chromium） |     ✓      |     ✓     |    ✓     |    ✓    |        ✓        |
| Firefox          |     ✓      |     ✓     |    ✓     |    ✓    |        ✓        |
| Safari           |     ✓      |     -     |    ✓     |    -    |        ✓        |
| IE11             |     -      |     -     |    ✓     |    -    |        ✓        |
| Opera            |     ✓      |     -     |    ✓     |    -    | ✓公式サポート外 |
| electron         |     -      |     -     |    -     |    ✓    |        -        |
| Safari/iOS       |     ✓      |     -     |    ✓     |    ✓    |        ✓        |
| Chrome/Android   |     ✓      |     -     |    ✓     |    ✓    |        ✓        |


## プログラミング言語まとめ

※1：ステップとして記述可能

|              |     Autify     |      mabl      | Magic<br>Pod | Playwright | Puppeteer | Selenium | Cypress | Testcafe |
| ------------ | :--------------: | :--------------: | :---------: | :--------: | :-------: | :------: | :-----: | :------: |
| ノーコード   |        ✓         |        ✓         |      ✓      |     -      |     -     |    -     |    -    |    -     |
| JavaScript   | ※1 | ※1|      -      |     ✓      |     ✓     |    ✓     |    ✓    |    ✓     |
| Python       |        -         |        -         |      -      |     ✓      |     -     |    ✓     |    -    |    -     |
| Java         |        -         |        -         |      -      |     ✓      |     -     |    ✓     |    -    |    -     |
| TypeScript   |        -         |        -         |      -      |     ✓      |     -     |    -     |    -    |    ✓     |
| Ruby         |        -         |        -         |      -      |     -      |     -     |    ✓     |    -    |    -     |
| .NET         |        -         |        -         |      -      |     ✓      |     -     |    -     |    -    |    -     |
| C#           |        -         |        -         |      -      |     -      |     -     |    ✓     |    -    |    -     |
| CoffeeScript |        -         |        -         |      -      |     -      |     -     |    -     |    -    |    ✓     |

## 参考

「公式サイトのどこに書いてあるの？」という私のような人へ。表にするとかえって見づらかったので箇条書きです。

- [Autify](https://autify.com/ja)
    - [サポートするOSとブラウザのバージョン](https://autify.zendesk.com/hc/ja/articles/900001689943-%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8BOS%E3%81%A8%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3-PC-)

- [mabl](https://www.mabl.com/)
    - [Cross-browser Functional Test Automation](https://www.mabl.com/cross-browser-testing)
    - [Mobile Web Test Automation](https://www.mabl.com/mobile-web-test-automation)

- [Magic Pod](https://magic-pod.com/)
    - [サポート環境](https://support.magic-pod.com/hc/ja/articles/4408827432089-%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E7%92%B0%E5%A2%83)

- [Playwright](https://playwright.dev/)
    - [Browsers](https://playwright.dev/docs/browsers)
    - Puppeteer vs Playwrigh
        - [Puppeteer使いがPlaywrightを使ってみて感じた利点](https://zenn.dev/84q/articles/ed6f66ab80c7ce)
        - [2020年12月現在、puppeteerとplaywright どっち選んだらいいの？ - Qiita](https://qiita.com/YusukeIwaki/items/a9dbd48b1ed4313f3815)

- [Puppeteer](https://github.com/puppeteer/puppeteer)
    - [Q: What is the status of cross-browser support?](https://github.com/puppeteer/puppeteer#q-what-is-the-status-of-cross-browser-support)

- [Selenium](https://www.selenium.dev/)
    - [Install browser drivers](https://www.selenium.dev/documentation/webdriver/getting_started/install_drivers/)

- [Cypress](https://www.cypress.io/)
    - [Launching Browsers](https://docs.cypress.io/guides/guides/launching-browsers)
    - SPブラウザ設定のヒント
        - [Cypressでスマホモードでテストするには、config.jsonのuserAgentを変更する - Qiita](https://qiita.com/reflex4qa/items/af2dd4440dcfe5b39b15)
        - [user-agent](https://docs.cypress.io/guides/references/configuration#Browser)
        - [viewport](https://docs.cypress.io/api/commands/viewport)

- [Testcafe](https://testcafe.io/)
    - [Browsers](https://testcafe.io/documentation/402828/guides/concepts/browsers)