1. Selenium入門
2021-02-12 社内勉強会
onozaty

2. Seleniumとは
• Webブラウザの操作を自動化するためのフレームワーク
• 主にWebアプリケーションのE2Eテストに利用
• ブラウザ操作をプログラムで行うことができる
• テスト以外の自動化ツールでも利用
• 単一のAPIで様々なブラウザを同じように操作可能
• 各ブラウザ×各OSの組み合わせで同じことを実行できる
Seleniumの公式サイト https://www.selenium.dev/
ドキュメントの日本語訳 https://www.selenium.dev/documentation/ja/

3. Seleniumの昔と今

4. Seleniumの昔と今 - Selenium RC
初期(10年以上前)のSelenium 1は、Selenium RC(Remote Control)とい
う仕組みを使っていた
• プロキシのような形で、テスト対象のサイトにJavaScriptを埋め込
んで操作するような仕組み
• ブラウザのセキュリティに起因する制約あり
• アーキテクチャ的に複雑→安定しない要因に
※ Selenium Core、Selenium RCといったキーワードが出てきたら、昔の情報なので要注意

5. Seleniumの昔と今 - Selenium WebDriver
Selenium 2からWebDriverを使うように
• WebDriverを使うことで、直接ブラウザを操作できるようになっ
た
• Selenium RCの時のようなセキュリティ制限を受けなくなった
• シンプルな構成となった→安定するように
• 現在ではW3Cで標準化されており、各ブラウザ毎にWebDriverの
実装が用意されている
• 主にブラウザベンダが提供している

6. Seleniumを構成する要素
• Selenium WebDriver
• Selenium IDE
• Selenium Grid

7. Selenium WebDriver
https://www.selenium.dev/documentation/ja/webdriver/

8. Selenium WebDriver
• WebDriverを使うことで、ブラウザ操作をプログラムで行うことが
できる
画像引用元: https://www.selenium.dev/documentation/ja/webdriver/understanding_the_components/
各プログラミング言語(Java、
Python、C#、Ruby、JavaScriptな
ど)のバインディングが提供されて
いる。
PHPのようにSelenium公式にはな
くて、他から提供されているもの
もあり。
各ブラウザ(Chrome、Firefox、
Edgeなど)に対応したDriverが提供
されている。
Web APIとして要求を受け付けて、
ブラウザを操作する。

9. Selenium WebDriver - 利用方法
• 実行する際には、各ブラウザ用のDriverを入手しパス等に設定する
• ブラウザ毎の入手元の情報は下記にて
• https://www.selenium.dev/documentation/en/webdriver/driver_requirements/#quick-
reference

10. Selenium WebDriver - 利用方法
System.setProperty("webdriver.chrome.driver", "C:¥¥selenium¥¥chromedriver.exe");
WebDriver driver = new ChromeDriver();
// サイトを開く
driver.get("https://selenium.dev");
// id=search-byの要素を選択し、abcといった文字を入力
driver.findElement(By.id("search-by")).click();
driver.findElement(By.id("search-by")).sendKeys("abc");
// id=search-buttonの要素を探してclick
driver.findElement(By.id("search-button")).click();
JavaだとシステムプロパティとしてダウンロードしたDriverのパスを設定
WebDriverのインスタンスを生成し、そのインスタンスを通して操作
※今後出てくるコードは全てJavaでのコード

11. Selenium WebDriver - ダウンロードの手間
• 各ブラウザのDriverをダウンロードしてきて、パス等に設定するの
は結構手間
• ブラウザのバージョンが上がる毎にDriverをダウンロードしてこなければな
らない
• 動かないと思ったら、インストールされているブラウザのバージョンと
Driverがアンマッチになっているといったことがよくある

12. Selenium WebDriver - WebDriverManager
• WebDriverManagerを使うと、インストールされているブラウザの
バージョンに応じたDriverをダウンロードして、システムプロパ
ティに設定してくれる
• https://github.com/bonigarcia/webdrivermanager
• 下記1行で終わり
WebDriverManager.chromedriver().setup();

13. Selenium WebDriverでのデモ
https://github.com/onozaty/selenium-sandbox/tree/main/selenium-junit

14. WebDriverを使いやすくしたもの
• Selenium WebDriver自体は、テスト用というより、ブラウザ操作の
ためのもの
• コードが冗長になりがち
• テストランナーやアサーションは別途用意する必要がある

15. WebDriverを使いやすくしたもの
• WebDriverを内部で使いながら、テストを書きやすくするためのラ
イブラリがいくつもある
• Selenide https://selenide.org/
• Java
• Geb https://gebish.org/
• Groovy
• WebdriverIO https://webdriver.io/
• Node.js

16. Selenide
System.setProperty("webdriver.chrome.driver", "C:¥¥selenium¥¥chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("http://192.168.33.10/");
driver.findElement(By.cssSelector("a[href=¥"/login¥"]")).click();
driver.findElement(By.id("username")).sendKeys("admin");
driver.findElement(By.id("password")).sendKeys("password");
driver.findElement(By.id("login-submit")).click();
assertThat(driver.findElement(By.cssSelector("h2")).getText())
.isEqualTo("title");
Configuration.browser = WebDriverRunner.CHROME;
open("http://192.168.33.10/");
$("a[href=¥"/login¥"]").click();
$("#username").sendKeys("admin");
$("#password").sendKeys("password");
$("#login-submit").click();
$("h2").shouldHave(exactText("title"));
上記をSelenideで書くと、下記のように簡潔になる

17. Selenium IDE
https://www.selenium.dev/selenium-ide/

18. Selenium IDE
• Selenium IDEはブラウザ操作の記録、実行が行えるブラウザの拡張
機能
• ChromeとFirefox版がある

19. Selenium IDE
• 昔のSelenium IDEはFirefox版のみで、FirefoxがXUL/XPCOMベースの
拡張機能を廃止したことで、一度死んだ
• 今のものは、まったく新しいものとして作られたもの
• 当初は旧IDEからかなり機能が落ちるものだったが、コマンドも揃ってきて、
今現在では十分使えるものとなった
• コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/

20. Selenium IDE - 操作方法
• Selenium IDEを起動し、ブラウザ操作をレコーディング
• Assertもブラウザ上で右クリックから追加することができる
• for each や if文などの制御構文も書くことができる
• コマンドとして直接入力することで複雑な動きも実現
• コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/
• 一連の操作を繰り返し実行できる
• ファイル(*.side)としても保存できるので、再度開いて実行ということも可
能

21. Selenium IDEでのデモ

22. Selenium IDE - selenium-side-runner
• 保存したファイル(*.side)は、selenium-side-runner というコマンド
ラインツールでも実行可能
• Node.js で書かれたツールになっている
• https://www.selenium.dev/selenium-ide/docs/en/introduction/command-
line-runner

23. Selenium IDE と WebDriver
• Selenium IDEとSelenium WebDriverは全く異なる仕組みとなるが、
Selenium IDEの内容を、WebDriverでのコードとしてエクスポート
することができる
• 最初のうちは、IDEからエクスポートした
コードを元にすると、WebDriverのコードが
書きやすいかも

24. Selenium Grid
https://www.selenium.dev/documentation/ja/grid/

25. Selenium Grid
• Selenium Gridを使うことで、複数のリモートマシン上でSeleniumを
実行することができる
• 異なるブラウザ、異なるOS上でのテストを一元管理しながら、複数のリ
モートマシン上で実行できる
• 並列で実行することで、テストの時間短縮を行える

26. Selenium Grid
画像引用元: https://www.selenium.dev/documentation/ja/grid/grid_4/components_of_a_grid/

27. Selenium以外のもの

28. Selenium以外のブラウザ自動化ツール
• Puppeteer https://github.com/puppeteer/puppeteer
• ChromeのDevTools Protocolを使って操作するNode.jsのライブラリ
• DevTools Protocolを使うので、WebDriverより高機能なことができる
• ChromeDriverも内部的にはDevTools Protocolを使っているが、WebDriverとして定義さ
れている部分しか現状は触れない
• 次のSelenium 4でDevToolsをネイティブサポートする予定

29. Selenium以外のブラウザ自動化ツール
• Cypress https://www.cypress.io/
• TestCafe https://devexpress.github.io/testcafe/
• どっちもテストに特化したフレームワーク
• オールインワン、準備が楽、学習コストが低い
• プロキシやブラウザの拡張機能使って、ページ上でJavaScriptを実行するよ
うな仕組み

30. おわり
ご清聴ありがとうございました