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
23
チームで開発するための環境を整える
onozaty
1
240
Selenium入門(2023年版)
onozaty
1
180
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
0
64
Java8から17へ
onozaty
0
19
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
0
210
Redmine issue assign notice plugin の紹介
onozaty
0
180
最近作ったもの
onozaty
0
30
Other Decks in Programming
See All in Programming
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
Testing Trophyは叫ばない
toms74209200
0
860
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
旅行プランAIエージェント開発の裏側
ippo012
2
900
Cache Me If You Can
ryunen344
2
680
print("Hello, World")
eddie
2
530
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
430
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
310
為你自己學 Python - 冷知識篇
eddie
1
350
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
Featured
See All Featured
Scaling GitHub
holman
463
140k
Rails Girls Zürich Keynote
gr2m
95
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Statistics for Hackers
jakevdp
799
220k
Bash Introduction
62gerente
615
210k
Unsuck your backbone
ammeep
671
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
GitHub's CSS Performance
jonrohan
1032
460k
Faster Mobile Websites
deanohume
309
31k
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を実行するよ うな仕組み
おわり ご清聴ありがとうございました