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
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
20250708_JAWS_opscdk
takuyay0ne
2
130
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
AIともっと楽するE2Eテスト
myohei
8
3k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
11
1.3k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
テスト駆動Kaggle
isax1015
1
620
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building an army of robots
kneath
306
45k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Docker and Python
trallard
45
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A designer walks into a library…
pauljervisheath
207
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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を実行するよ うな仕組み
おわり ご清聴ありがとうございました