Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Selenium入門
Search
onozaty
February 12, 2021
Programming
0
32
Selenium入門
社内勉強会でSeleniumについて話した資料です。
onozaty
February 12, 2021
Tweet
Share
More Decks by onozaty
See All by onozaty
リモートワーク中に買って良かったものベスト3
onozaty
0
180
情報を表現するときのポイント
onozaty
0
22
チームで開発するための環境を整える
onozaty
1
200
Selenium入門(2023年版)
onozaty
1
170
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
0
55
Java8から17へ
onozaty
0
18
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
0
190
Redmine issue assign notice plugin の紹介
onozaty
0
160
最近作ったもの
onozaty
0
26
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
650
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.3k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
5k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Discover Metal 4
rei315
2
140
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Visualization
eitanlees
146
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
GitHub's CSS Performance
jonrohan
1031
460k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Designing Experiences People Love
moore
142
24k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
BBQ
matthewcrist
89
9.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Transcript
Selenium入門 2021-02-12 社内勉強会 onozaty
Seleniumとは • Webブラウザの操作を自動化するためのフレームワーク • 主にWebアプリケーションのE2Eテストに利用 • ブラウザ操作をプログラムで行うことができる • テスト以外の自動化ツールでも利用 •
単一のAPIで様々なブラウザを同じように操作可能 • 各ブラウザ×各OSの組み合わせで同じことを実行できる Seleniumの公式サイト https://www.selenium.dev/ ドキュメントの日本語訳 https://www.selenium.dev/documentation/ja/
Seleniumの昔と今
Seleniumの昔と今 - Selenium RC 初期(10年以上前)のSelenium 1は、Selenium RC(Remote Control)とい う仕組みを使っていた •
プロキシのような形で、テスト対象のサイトにJavaScriptを埋め込 んで操作するような仕組み • ブラウザのセキュリティに起因する制約あり • アーキテクチャ的に複雑→安定しない要因に ※ Selenium Core、Selenium RCといったキーワードが出てきたら、昔の情報なので要注意
Seleniumの昔と今 - Selenium WebDriver Selenium 2からWebDriverを使うように • WebDriverを使うことで、直接ブラウザを操作できるようになっ た •
Selenium RCの時のようなセキュリティ制限を受けなくなった • シンプルな構成となった→安定するように • 現在ではW3Cで標準化されており、各ブラウザ毎にWebDriverの 実装が用意されている • 主にブラウザベンダが提供している
Seleniumを構成する要素 • Selenium WebDriver • Selenium IDE • Selenium Grid
Selenium WebDriver https://www.selenium.dev/documentation/ja/webdriver/
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として要求を受け付けて、 ブラウザを操作する。
Selenium WebDriver - 利用方法 • 実行する際には、各ブラウザ用のDriverを入手しパス等に設定する • ブラウザ毎の入手元の情報は下記にて • https://www.selenium.dev/documentation/en/webdriver/driver_requirements/#quick-
reference
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でのコード
Selenium WebDriver - ダウンロードの手間 • 各ブラウザのDriverをダウンロードしてきて、パス等に設定するの は結構手間 • ブラウザのバージョンが上がる毎にDriverをダウンロードしてこなければな らない
• 動かないと思ったら、インストールされているブラウザのバージョンと Driverがアンマッチになっているといったことがよくある
Selenium WebDriver - WebDriverManager • WebDriverManagerを使うと、インストールされているブラウザの バージョンに応じたDriverをダウンロードして、システムプロパ ティに設定してくれる • https://github.com/bonigarcia/webdrivermanager
• 下記1行で終わり WebDriverManager.chromedriver().setup();
Selenium WebDriverでのデモ https://github.com/onozaty/selenium-sandbox/tree/main/selenium-junit
WebDriverを使いやすくしたもの • Selenium WebDriver自体は、テスト用というより、ブラウザ操作の ためのもの • コードが冗長になりがち • テストランナーやアサーションは別途用意する必要がある
WebDriverを使いやすくしたもの • WebDriverを内部で使いながら、テストを書きやすくするためのラ イブラリがいくつもある • Selenide https://selenide.org/ • Java •
Geb https://gebish.org/ • Groovy • WebdriverIO https://webdriver.io/ • Node.js
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で書くと、下記のように簡潔になる
Selenium IDE https://www.selenium.dev/selenium-ide/
Selenium IDE • Selenium IDEはブラウザ操作の記録、実行が行えるブラウザの拡張 機能 • ChromeとFirefox版がある
Selenium IDE • 昔のSelenium IDEはFirefox版のみで、FirefoxがXUL/XPCOMベースの 拡張機能を廃止したことで、一度死んだ • 今のものは、まったく新しいものとして作られたもの • 当初は旧IDEからかなり機能が落ちるものだったが、コマンドも揃ってきて、
今現在では十分使えるものとなった • コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/
Selenium IDE - 操作方法 • Selenium IDEを起動し、ブラウザ操作をレコーディング • Assertもブラウザ上で右クリックから追加することができる •
for each や if文などの制御構文も書くことができる • コマンドとして直接入力することで複雑な動きも実現 • コマンド一覧 https://docs.seleniumhq.org/selenium-ide/docs/en/api/commands/ • 一連の操作を繰り返し実行できる • ファイル(*.side)としても保存できるので、再度開いて実行ということも可 能
Selenium IDEでのデモ
Selenium IDE - selenium-side-runner • 保存したファイル(*.side)は、selenium-side-runner というコマンド ラインツールでも実行可能 • Node.js
で書かれたツールになっている • https://www.selenium.dev/selenium-ide/docs/en/introduction/command- line-runner
Selenium IDE と WebDriver • Selenium IDEとSelenium WebDriverは全く異なる仕組みとなるが、 Selenium IDEの内容を、WebDriverでのコードとしてエクスポート
することができる • 最初のうちは、IDEからエクスポートした コードを元にすると、WebDriverのコードが 書きやすいかも
Selenium Grid https://www.selenium.dev/documentation/ja/grid/
Selenium Grid • Selenium Gridを使うことで、複数のリモートマシン上でSeleniumを 実行することができる • 異なるブラウザ、異なるOS上でのテストを一元管理しながら、複数のリ モートマシン上で実行できる •
並列で実行することで、テストの時間短縮を行える
Selenium Grid 画像引用元: https://www.selenium.dev/documentation/ja/grid/grid_4/components_of_a_grid/
Selenium以外のもの
Selenium以外のブラウザ自動化ツール • Puppeteer https://github.com/puppeteer/puppeteer • ChromeのDevTools Protocolを使って操作するNode.jsのライブラリ • DevTools Protocolを使うので、WebDriverより高機能なことができる
• ChromeDriverも内部的にはDevTools Protocolを使っているが、WebDriverとして定義さ れている部分しか現状は触れない • 次のSelenium 4でDevToolsをネイティブサポートする予定
Selenium以外のブラウザ自動化ツール • Cypress https://www.cypress.io/ • TestCafe https://devexpress.github.io/testcafe/ • どっちもテストに特化したフレームワーク •
オールインワン、準備が楽、学習コストが低い • プロキシやブラウザの拡張機能使って、ページ上でJavaScriptを実行するよ うな仕組み
おわり ご清聴ありがとうございました