E2Eテストの自動化観点でのブラウザ操作のけるSelenium周りの言葉の定義と関連事項の整理

概要

似たような言葉があって混乱したので、整理することを目的としたメモ。
あくまでも私が理解し易い視点、であることに注意。

Webアプリケーションの画面に対するE2Eテストの実行を自動化する実装場面が検討の対象。テストコードとノーコードツールで分岐することを検討したうえで、テストコードでの実装を選択する。その実装に用いるライブラリを比較検討する中で、Selenium周辺の言葉の定義の整理を目的とする。

ツールの比較そのものではなく、言葉の整理が目的であることに注意。

整理の起点

次の通り。

• E2Eテストとして、WebアプリケーションのUIに対する機能テストを対象とする
• テストを自動化することは、つまりコマンドラインから実行出来ること、を意味する
• コマンドラインからUIテストを実行する方法として、次の2つがある
  • (A) テストコードを用いて、ブラウザーを操作するためのAPIを呼び出す
  • (B) ノーコードのブラウザー用のテストツール（がコマンドライン実行をサポートしていると仮定して）を用いる

テストの設計と実装と実行の観点で整理すると、(A)と(B)はそれぞれ次の通り。

• (A) テストコード
  • 設計：テストシナリオを作成する
  • 実装：テストの実施手順を、テストコードで記述する
  • 実行：テストドライバーを用いてテストコードを実行する
• (B) ノーコードのテストツール
  • 設計：テストシナリオを作成する
  • 実装：テストの実施手順を、テストツールの仕様に従って記述する
  • 実行：テストツールを用いて、記述したテストの実施手順を実行する

「設計」のところの作業内容は同一で、分かれのは「実装」と「実行」。
以降では「(A)」の「実装」のところにフォーカスする。

Webアプリケーションの画面に対するE2Eテストで用いるツール

ブラウザーを操作するAPIの選択肢は、最近は次の通り。

• Selenium WebDriver
• Playwright
• Cypress
• (WebDriver.io)

それぞれのツールの人気は次の通り。

https://trends.google.com/trends/explore?date=today%205-y&geo=JP&q=Selenium,Playwright,Cypress

Seleniumについて

Seleniumとは「ブラウザー操作を自動化するためのツール群」のことでである。そのツール群が提供する１つにSelenium WebDriverがある。

Selenium is a suite of tools for automating web browsers.

Selenium WebDriverは「ブラウザーを操作するためのインターフェスとそのプロトコル」の1つであり、通常は単に「WebDriver」と略される。　※「WebDriver」とスペースを含めない形での固有名詞。
WebDriverは、W3C勧告に位置づけられている。
WebDriverは、そのプロトコルに基づいた各言語向けのインターフェスであるAPIの実装ライブラリも提供する。

Selenium WebDriver refers to both the language bindings and
the implementations of the individual browser controlling code.
This is commonly referred to as just WebDriver.

Selenium WebDriver is a W3C Recommendation

WebDriver is a remote control interface that enables introspection and control of user agents.
It provides a platform- and language-neutral wire protocol as
a way for out-of-process programs to remotely instruct the behavior of web browsers.

Provided is a set of interfaces to discover and manipulate DOM elements
in web documents and to control the behavior of a user agent.

Selenium WebDriverの特徴の1つとして、そのプロトコルがW3C勧告であり、各ブラウザーはそのプロトコルに基づいたI/Fの受け口を「Browser Driver」として提供している事が揚げられる。そのため、一部のブラウザーの独断等による突然の仕様変更やサポート終了の可能性が大変低いと言える。

また仕様が明確なので、Seleniumが提供する「WebDriver client」以外の実装を行う事も可能である（独自に行うメリットはあまり無いが）。先に括弧書きでAPIの選択肢に上げた「WebDriver.io」が、このSelenium以外による実装例である。WebDriver.ioは、Node.jsからの利用に特化したAPI実装である。

なお、WebDriverのアーキテクチャーは
「ブラウザーが提供するBrowser Driverに対して、WebDriverのプロトコルに従って操作を要求する。Browser Driverは指定された操作をブラウザーに対して行う」
となっている（API実装を明確に指すために、API実装部分を「WebDriver client」と表現することもある）。

このため、WebDriverを用いたブラウザー操作の実装には、操作するブラウザーのバージョンに応じたBrowser Driverを取得する必要が、、、あった（過去形）。
Selenium 4.11以降のSelenium Managerで提供される機能を用いて、「Browser Driverを自動取得する」事が可能なので、こちらを利用することで、Browser Driverの管理が容易となる¹。

Selenium（＝ツール群）が提供するものの1つに、Selenium WebDriverの他にSelenium IDEがある。
これは、ChromeとFireFoxのプラグインの形で提供され、「Selenium WebDriverを用いたテストシナリオ（テストケース）のテストコードの実装を助けるため」の統合開発環境。
Selenium IDEでブラウザ―に対する操作を記録し（録画し）、それを各言語ごとのWebDriverを用いたテストコードの実装として出力することが出来る²。

なお、Selenium IDEに記録した「操作」は独自形式のsideファイル（*.side）として保存される。このsideファイルを読み込んで、Selenium IDE上で再生する「簡易的なブラウザー操作機能」も有している。
この再生時のブラウザー操作の実装は、Selenium WebDriverを利用せずにブラウザープラグインとしてブラウザーを直接操作する独自実装であることに注意。
再生機能はあくまで「IDEとしての簡易再生」であるため。またsideファイルは、Selenium IDEが元々はSeleniumとは独立にForkされて開発されたSideeXの後継であり、それをSelenium側が取り込んだ歴史的な背景による³。

Playback
In-browser
You can play tests back in the IDE by selecting the test or suite you'd like to play
and clicking the play button in the menu bar above the test editor.

The test(s) will play back in the browser.
If a window is still open from recording,
it will be used for playback. Otherwise, a new window will be opened and used.

Playwrightについて

Playwrightも（Cypressも）、「ブラウザーを操作するためのインターフェスとそのプロトコル」の1つであり、それぞれプロトコルに基づいたAPIの実装を提供するライブラリである。

Playwrightの、Selenium WebDriverとの大きな違いとして、ブラウザーの操作にWebDriverのプロトコルを用いない点があげられる。
Playwrightは、CDP（=Chrome DevTool Protocol）を用いてChromeブラウザーを操作するアーキテクチャーである⁴。したがって、単純に考えるとChromeブラウザー以外を操作できないことになる、、が、実際にはFirefoxとWebKitベースのブラウザーに対しても、それぞれのブラウザー毎にCDPと似たアプローチで実装が成されているので、操作をすることが出来る。
CDPはもともとデバッグ目的に作成された機能の発展形なので、WebDriverプロトコルよりも細かい操作を柔軟に行えることが特徴。一方で、ブラウザー固有のプロトコルに依存した形となるので、ブラウザー都合で突然の仕様変更やサポート終了となるリスクがある。

1. SeleniumにChrome WebDriverの事前準備はもう必要ない _ すぺきよのしくはっくブログ, https://spekiyoblog.com/no-more-preparing-chrome-webdriver-for-selenium/ ↩

2. Code Export - Selenium IDE, https://www.selenium.dev/selenium-ide/docs/en/introduction/code-export ↩

3. Webブラウザ自動化ツール「Selenium IDE」の今までとこれから| Qbook, https://www.qbook.jp/column/613.html ↩

4. Playwright Architecture, https://www.programsbuzz.com/article/playwright-architecture ↩