自分だけの小さなSelenium「Olenium」を作って始める、ブラウザ自動化技術の理論と実践

by ikuma-t

Slide 1

Slide 1 text

Olenium じぶんだけの小さなSelenium を作って始めるブラウザ自動化技術のと理論実践 Olenium @ikuma-t

Slide 2

Slide 2 text

ikuma-t ・で勤務。いわゆるです。株式会社エンペイ newbie ・最近と名乗り始めましたフロントエンドエンジニア・未経験からで学んでプログラマーへ FJORD BOOT CAMP kaigi on rails 2022 アニメ好き / ツール好き / パン好きな人

Slide 3

Slide 3 text

kaigi on rails 2022 ブラウザ自動化テーマ

Slide 4

Slide 4 text

わたしとブラウザ自動化 kaigi on rails 2022 ・SIerでのExcelペタペタ → 自動テストに感動・サンプルデータ「学校法人SQLインジェクション」の作成・Cypressで自作サービスのフロントエンドのテスト

Slide 5

Slide 5 text

kaigi on rails 2022 なんとなく動いているけど、どうやってブラウザを操作しているの？

Slide 6

Slide 6 text

kaigi on rails 2022 capybaraのfill_in!!

Slide 7

Slide 7 text

kaigi on rails 2022 capybaraのfill_in!! 途中になんかある

Slide 8

Slide 8 text

kaigi on rails 2022 capybaraのfill_in!! 途中になんかあるここを知りたい

Slide 9

Slide 9 text

ブラウザ自動化のやとそのを理解し、  ブラウザ自動化を用いる際のを高める登場人物用語関係性解像度 kaigi on rails 2022 「発表のゴール」

Slide 10

Slide 10 text

Olenium 2. Olenium ・WebDriverベース・HTTP ・Seleniumに名前が似てる Olaywright 3. Olaywright ・CDPベース・WebSocket ・Playwrightに名前が似てる kaigi on rails 2022 xv ざっくりとした全体像仕様を参考に自分でブラウザを自動操作してみよう

Slide 11

Slide 11 text

kaigi on rails 2022 ブラウザ自動化の全体図 Chapter 1

Slide 12

Slide 12 text

わりとよく聞くブラウザ自動化/E2Eテストツール kaigi on rails 2022 Selenium Playwright Puppeteer Cypress （Microsoft） Puppeteer作ってた人が移動（Google）

Slide 13

Slide 13 text

ブラウザとの距離が近くなるほど、大きな力を手に入れるが... Devtools Protocol WebDriver 遠い △ △ ○ ◎ ◎ ◎ ○ ○ ○ 近いもはやブラウザブラウザとの対話方法ツール例ブラウザとの距離テストの安定性クロスブラウザ使用可能言語 JavaScript in Browser

Slide 14

Slide 14 text

ブラウザとの距離が近くなるほど、大きな力を手に入れるが... Devtools Protocol WebDriver 遠い △ △ ○ ◎ ◎ ◎ ○ ○ ○ 近いもはやブラウザブラウザとの対話方法ツール例ブラウザとの距離テストの安定性クロスブラウザ使用可能言語 JavaScript in Browser JSしか使えない馬力は低いけど多様な環境で動く馬力は低いけど多様な環境で動く環境に依存するけどその分高馬力環境に依存するけどその分高馬力

Slide 15

Slide 15 text

WebDriver kaigi on rails 2022 使用例：Selenium ローカルエンドリモートエンド UserAgent HTTPリクエスト HTTPレスポンス WebDriver ChromeDriver geckodriverなど各プログラミング言語のためのインターフェース Google Chrome Firefoxなど Command ・W3C勧告で最低限実装すべきコマンド（エンドポイント）が定義されている。・リモートエンドが仲介に立つことで、幅広い環境に対応している。規定のエンドポイントを叩くと Command実行

Slide 16

Slide 16 text

Devtools Protocol kaigi on rails 2022 使用例：Playwright、Puppeteer クライアントターゲットターゲット UserAgent WebSocket 実行できるMethodはProtocolで定義各プログラミング言語のためのインターフェース操作対象のブラウザ、タブ、サービスワーカーなど Google Chrome Firefoxなど・各ブラウザごとにDevtools Protocolが提供されている。Chrome版がCDP。・SeleniumやCypressでも本流ではないが部分的に使用されている。

Slide 17

Slide 17 text

JavaScript in Browser kaigi on rails 2022 使用例：Cypress Proxy OS WEB Node.js WebSocket HTTP 外部とのやりとりはここを通すこれ自体は Vue.jsアプリ（DesktopAppもある）【iframe1】テスト対象のアプリ【iframe2】テストコード document.domainをいじることでSOPを回避

Slide 18

Slide 18 text

Slide 19

Slide 19 text

kaigi on rails 2022 Chapter 2 WebDriver Olenium

Slide 20

Slide 20 text

WebDriverという仕様 kaigi on rails 2022 もともとSeleniumの機能の1つ 2018年6月にW3C勧告として発表 Seleniumが元であると明記

Slide 21

Slide 21 text

WebDriver kaigi on rails 2022 ローカルエンドリモートエンド UserAgent HTTPリクエスト HTTPレスポンス WebDriver ChromeDriver geckodriverなど各プログラミング言語のためのインターフェース Google Chrome Firefoxなど Command 規定のエンドポイントを叩くと Command実行いまから作っていくところ

Slide 22

Slide 22 text

エンドポイント kaigi on rails 2022 3) リモートエンドのエンドポイントを叩くと 2. 対応するコマンドが実行され、ブラウザが動く

Slide 23

Slide 23 text

kaigi on rails 2022 ・テストの実行環境を指定する　ブラウザ名やタイムアウトを指定できる・JSONオブジェクト形式で渡す・空でもいいが、指定しないとエラー　リクエストになる https://www.w3.org/TR/webdriver2/#capabilities Capabilities

Slide 24

Slide 24 text

curlコマンドでエンドポイントを叩いてみる kaigi on rails 2022 ChromeDriverを実行（localhost:9515で通知を待ち受ける） POST /session

Slide 25

Slide 25 text

kaigi on rails 2022 ・ChromeDriverが localhost:9515 で起動している・/session にPOSTする Capabilitiesの指定・sessionIdがかえってきている

Slide 26

Slide 26 text

Session kaigi on rails 2022 ほとんどのエンドポイントは「session_id」が必要

Slide 27

Slide 27 text

Session kaigi on rails 2022 ・セッションにはブラウジング・コンテキストが　あり、これを操作していく・現在操作対象となっているのが「カレント・　ブラウジング・コンテキスト」・操作対象を切り替えるには、ブラウジング・　コンテキストを切り替えるエンドポイントを叩く文書が表示されるタブやウィンドウのこと。HTML Living Standardで定義

Slide 28

Slide 28 text

8章以降はセクションごとにエンドポイントの説明 kaigi on rails 2022 今話してたのが 8. Sessions

Slide 29

Slide 29 text

kaigi on rails 2022 Rubyで実装

Slide 30

Slide 30 text

Olenium kaigi on rails 2022 ・Rubyで作るWebDriverの　ローカルエンド・俺のSelenium（名前だけ）

Slide 31

Slide 31 text

Olenium::Client kaigi on rails 2022 ・接続のための初期設定を行う・sessionが不要なエンドポイントも　ここに実装・Olenium::Connectionは　Net::HTTPの簡易ラッパー session_idが必要なエンドポイント用次ページ参照

Slide 32

Slide 32 text

Olenium::Session kaigi on rails 2022 資料の掲載スペースが足りないだけでエンドレスメソッドである意味はまったくない・session_idが必要なエンドポイント群・一部スクショを取るエンドポイントだけ　分割するほどでもないのでそのまま・WebDriverのセクション単位で　別クラスとして抽出している。　中身としては愚直にHTTPリクエストを　しているだけです

Slide 33

Slide 33 text

Oleniumで遊ぶ kaigi on rails 2022

Slide 34

Slide 34 text

kaigi on rails 2022 お分かりいただけただろうか... Olenium 引用元：https://www.oreocookie.jp/

Slide 35

Slide 35 text

Slide 36

Slide 36 text

kaigi on rails 2022 Chrome Devtools Protocol Chapter 3 Olaywright

Slide 37

Slide 37 text

Chrome Devtools Protocolの仕様 kaigi on rails 2022 【各Domainごとの詳細】・赤: Experimental ・黄: Deprecated プロトコルについての説明【バージョンごとの詳細】バージョンによって使用できるDomain や機能が異なる https://chromedevtools.github.io/devtools-protocol/

Slide 38

Slide 38 text

Chrome Devtools Protocol kaigi on rails 2022 使用例：Playwright、Puppeteer クライアントターゲットターゲット UserAgent WebSocket 実行できるMethodはProtocolで定義各プログラミング言語のためのインターフェース操作対象のブラウザ、タブ、サービスワーカーなどいまから作っていくところ

Slide 39

Slide 39 text

kaigi on rails 2022 WebSocket ・URLスキーマとしてws://または暗号化されたwss://を用いる・サーバとクライアントが接続を確立した後は、　そのコネクション上で専用のプロトコルを用いて通信を行う・クライアントとサーバ間で双方向通信するためのプロトコル・RailsだとActionCableで使用 https://www.rfc-editor.org/rfc/rfc6455

Slide 40

Slide 40 text

WebSocketでChromeと接続する kaigi on rails 2022 WebSocketを扱えるツール（例：Postman） Chromeを起動

Slide 41

Slide 41 text

【再掲】Chrome Devtools Protocol kaigi on rails 2022 使用例：Playwright、Puppeteer クライアントターゲットターゲット UserAgent WebSocket 実行できるMethodはProtocolで定義各プログラミング言語のためのインターフェース操作対象のブラウザ、タブ、サービスワーカーなどいまから作っていくところ

Slide 42

Slide 42 text

JSON-RPC kaigi on rails 2022 RPC（Remote Procedure Call）の1つ https://www.jsonrpc.org/specification 同じIDで紐付け同じIDで紐付け

Slide 43

Slide 43 text

kaigi on rails 2022 メッセージを構成する① 各Domainごとに Methodが定義されている紐付けのためのIDを指定の形式で指定定義されているMethodを参照して、methodの値を指定

Slide 44

Slide 44 text

kaigi on rails 2022 メッセージを構成する② 各Methodごとの説明引数の一覧（optionalは任意引数）（少なくとも必須の）引数を設定

Slide 45

Slide 45 text

メッセージを投げてみる① kaigi on rails 2022 PostmanでTarget.createTarget 新規タブで指定したURLが開く（計画通り）

Slide 46

Slide 46 text

メッセージを投げてみる② kaigi on rails 2022 PostmanでPage.navigate 指定したURLに移動してほしいけど変わってないエラー「‘Page.navigate’ wasn’t found 」

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

kaigi on rails 2022 [Contributing to Chrome DevTools Protocol] (https://docs.google.com/document/d/1c-COD2kaK__ 5iMM5SEx-PzNA7HFmgttcYfOHHX0HaOM/edit#) ・デバッグ可能な実体。ページやブラウザ、　サービスワーカー・ターゲットには次の2つがある　・トップレベル（ex: ページ）　・ネストされた（ex: ウェブワーカー）・ターゲット別にWebSocketのURLが　振られているターゲット

Slide 50

Slide 50 text

メッセージを投げてみる② kaigi on rails 2022 PostmanでPage.navigate 指定したURLに移動してほしいけど変わってないエラー「‘Page.navigate’ wasn’t found 」

Slide 51

Slide 51 text

【再掲】メッセージを投げてみる② kaigi on rails 2022 PostmanでPage.navigate 指定したURLに移動してほしいけど変わってないエラー「‘Page.navigate’ wasn’t found 」・ターゲットがbrowserだったので、エラーになっていた　（ページ遷移ができるのはブラウザではなくて、ページ=タブなので）・なので、このWebSocketの接続先（ターゲット）をページにすれば期待通りに動く

Slide 52

Slide 52 text

ターゲットを取得するには kaigi on rails 2022 https://chromedevtools.github.io/devtools-protocol/ remote-debugging-portを指定すると、いくつかのエンドポイント（HTTP）が有効になるこのURLでWebSocket接続をする。URLは`devtools/{target_type}/targetId`の形式

Slide 53

Slide 53 text

メッセージを投げてみる③ kaigi on rails 2022 PostmanでPage.navigate 無事ページ遷移できた！

Slide 54

Slide 54 text

kaigi on rails 2022 Rubyで実装

Slide 55

Slide 55 text

Olaywright kaigi on rails 2022 ・WebSocket接続には【Gem】　websocket-client-simpleを使用・大人の事情でirbで動かす前提　（普通にやっても動きはするけど）・俺のPlaywright（名前だけ）

Slide 56

Slide 56 text

Olaywright：初期設定 kaigi on rails 2022 Wc GET /json/list でターゲット一覧を取3 2c pageを接続対象に指定 3. WebSocket接続

Slide 57

Slide 57 text

公開されているプロトコル定義を使用する kaigi on rails 2022 browser_protocol 2フォーマットで公開されている各Domainの情報がJSONで返ってくる js_protocol PDL or JSON PDLはCDPを記述するために作られたフォーマット (発音：ˈpo͞ odl"） GET /json/protocol

Slide 58

Slide 58 text

例： chromedp（Go言語実装） kaigi on rails 2022 ユーザー browser_protocol js_protocol Renée French PDL or JSON chromedp/pdlgen chromedp/ cdproto chromedp/ chromedp 自動生成【罠】エラーなく動作する最新のブランチ名は、「main」ではなく「old」

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Olaywrightで遊ぶ kaigi on rails 2022

Slide 61

Slide 61 text

Slide 62

Slide 62 text

kaigi on rails 2022 まとめ Chapter 4

Slide 63

Slide 63 text

kaigi on rails 2022 ブラウザブラウザ自動化ツ I ル途中になんかある

Slide 64

Slide 64 text

kaigi on rails 2022 ブラウザブラウザ自動化ツ I ル途中になんかあるリモートエンドロ I カルエンド HTTPリクエスト HTTPレスポンス Command WebDriver 規定のエンドポイントを叩くと Command実行

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

‘‘ ’’ kaigi on rails 2022 r7kamura [個人サイトについて](https://r7kamura.com/articles/2020-09-21-personal-website) 多くの人にとって、ウェブの技術は魔法だ。少し指を動かすだけで、世界中の人に自分の声を届けられる。しかし自分にとって、ウェブの技術はもはや魔法ではない。知ってしまった以上、使いこなしたいと思うのが人の性というもの。

Slide 68

Slide 68 text

kaigi on rails 2022 ブラウザブラウザ自動化ツ I ルリモートエンド HTTPリクエストクライアント HTTPレスポンス Command WebDriver Devtools Protocol 規定のエンドポイントを叩くと Command実行 JSON RPC via WebSocket 実行できるMethodはProtocolで定義ロ I カルエンド iframe RailsのE2Eで馴染みのあるSelenium

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

kaigi on rails 2022 With With Ruby Rails

Slide 74

Slide 74 text

kaigi on rails 2022 PR Extra Chapter

Slide 75

Slide 75 text

kaigi on rails 2022 やさしいフィンテックを。テクノロジーの力で、新しいお金の流れをつくる。

Slide 76

Slide 76 text

kaigi on rails 2022 ぜひお話ししましょう！

Slide 77

Slide 77 text

kaigi on rails 2022 ありがとうございました！

Slide 78

Slide 78 text

参考 kaigi on rails 2022 ・WebDriver - W3C: https://www.w3.org/TR/webdriver/ ・Chrome Devtools Protocol: https://chromedevtools.github.io/devtools-protocol/ ・Cypress: https://www.cypress.io/ ・Contributing to Chrome DevTools Protocol: https://onl.la/JEzM2cp ・getting-started-with-cdp: https://onl.la/kfLHLxE ・pdlgen: https://github.com/chromedp/pdlgen ・chrome-remote-interface: https://github.com/cyrus-and/chrome-remote-interface ・ferrum: https://github.com/rubycdp/ferrum ・Cypress vs Other Test Runners: https://onl.la/cNnSNsc