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)

それぞれのツールの人気は次の通り。
![e2eテストツールの5年間の人気推移.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125588/f5f2a146-d808-1257-1329-757346b75a1b.png)
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.
> 
https://www.selenium.dev/about/



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
> 
https://www.selenium.dev/documentation/webdriver/


> 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.
> 
https://www.w3.org/TR/webdriver1/



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」と表現することもある）。

https://www.browserstack.com/guide/architecture-of-selenium-webdriver

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

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




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

[^selenium-code-export]: Code Export - Selenium IDE, https://www.selenium.dev/selenium-ide/docs/en/introduction/code-export


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


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



# Playwrightについて

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


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

[^playwright-architecture]: Playwright Architecture, https://www.programsbuzz.com/article/playwright-architecture