クロスブラウザテストの闇と闇と闇

https://d-cube.connpass.com/event/149831/

スライド中「エンジニアの斎藤」という謎の人物が出てきますが、「エンジニアの採用」の誤記でございました。お詫び申し上げます。

Transcript

1. クロスブラウザテストの闇と闇と闇と闇 末村 拓也 @ Autify Inc.
2. 簡単に⾃⼰紹介 末村 拓也 (すえむら たくや) ⽊村拓也ではない QAエンジニア CodeceptJSのコミッタ Qiitaに書いた 我が名は神⿓……どんなテストもひとつだけ⾃動化してやろう とい う記事が好評でした 現在は Autify というテスト⾃動化プラットフォームを作る会社で働いています
3. 簡単にAutifyの説明 https://autify.com AIによるセルフヒーリングと、わかりやすいUIが特徴のテスト⾃動化プラットフ ォームです WebアプリケーションのE2Eテストを簡単に⾃動化することができます コーディングの知識は不要で、ブラウザ操作を⾃動記録してシナリオを作れます Selenium IDEの超強い版みたいなイメージです モバイルも含めた様々なOS・ブラウザの組み合わせでテストを実⾏することがで きます
4. クロスブラウザテストとは 同じテストシナリオを複数のブラウザで実⾏し、互換性を確認すること Chromeでは動いたけどIEでは動かなかった、みたいな悲劇を防げる シナリオを使い回せるため、⾃動テストの実装コストが相対的に少ない（と 期待されている） 表⽰されている⽂字列の検証や、Javascriptのエラーが出ていないかどうか、ある いは表⽰崩れなどを検証することもある 今⽇は表⽰崩れの検証とかの話は しません どのE2Eテストフレームワークでも出来るとは限らない 今⽇はSelenium(WebDriver)についての話をします
5. SeleniumとWebDriverについておさらい Seleniumは様々なブラウザの操作を⾃動化するためのフレームワークです WebDriverという、「あるブラウザの⾃動操作に特化したドライバ」を各ブラウザ のベンダが作ってくれています 例えばChromeならChromeDriver、FirefoxならGeckoDriverというように WebDriverの仕様は標準化されているので、どのブラウザに対しても同じように⾃ 動操作の命令を出す事が出来ます
6. ここで質問です クロスブラウザテストが必要な⼈︖ クロスブラウザテストにしっかり取り組んで、成果を出せているという⼈︖ クロスブラウザテストあきらめちゃった⼈︖
7. この発表で話すこと Selenium(WebDriver)でのクロスブラウザテストは「可能」だが「簡単」ではない 実際にクロスブラウザテストに取り組む中で得た知⾒（というか苦労話）をご紹 介します Seleniumがイケてないとかそういう話ではありませんのでご留意ください OSSだし、みんなで良くしていけばいいよね
8. 闇その1 - インストール 肌感ですがSeleniumはじめた⼈の半分ぐらいここでつまづいてる
9. WebDriverのインストールはブラウザごとに必要です 各ブラウザのバージョンに合わせたWebDriverのインストールが必要です 間違ったバージョンをインストールすると動きません ChromeとFirefoxはブラウザとWebDriverがセットになったDockerコンテナが公式 から提供されています が、当然Linux上で動いているので、ファイルアップロードなどOS組み込みの コンポーネントはLinuxになってしまいます WebDriverのインストールを⾃動化出来る selenium-standalone というNodeJSの ライブラリがあります しかし、後述の理由でEdge 18から動かなくなりました 参考: https://hub.docker.com/u/selenium/
10. おまえはIEDriverのセットアップにかかった時間を数えたことがあるのか︖ IEDriverのインストールはものすごく⼯程が多い IEDriverServerにPATHを通す 「全てのゾーンで」保護モードを無効にする ズームレベルを100%にする OSのズームレベルも100%にしないといけないので⾼DPI端末では事実上使え ないです ⼀応無視するためのCapabilityがあるらしい（未検証） レジストリの設定が必要です 参考: https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver#required- configuration
11. 「IEはもうオワコンなのでEdgeが使えれば⼤丈夫です」 Edge(EdgeHTML)18からインストール⽅法が変更になりました Windowsの設定で「開発者モード」を有効にする必要があります 管理者権限でコマンドプロンプトを実⾏して DISM.exe /Online /Add-Capability /CapabilityName:Microsoft.WebDriver~~~~0.0.1.0 を実⾏するとインストールされ ます インストール先が公式のどこにも書いてありません（︕） ので書いておきますが C:\Windows\System32\MicrosoftWebDriver.exe です 先述のNodeJSのライブラリ selenium-standalone はこの⽅式に対応してないので ⾃前でインストールする必要があります
12. BrowserStackとか使えばいいじゃないですか BrowserStackなどのデバイスファームを利⽤すればインストール周りの苦労は激 減する 複数のOS・ブラウザのバージョンを選択できるため互換性テストに最適 ただしクッソ遅い サーバが海外にあるため たまにBrowserStackそのもののバグを踏むことがある 特定のCapabilityが無視されるなど サポートはしっかりしてるのでなんかおかしかったらすぐ聞くといいです 英語だけどな︕ 参考: デバイスファームの有名どころ https://browserstack.com/ https://saucelabs.com https://crossbrowsertesting.com/
13. ほう、インストールを倒したのか︖ではこのCapabilitesが相⼿をしてやろう Capabilities = 実⾏対象のブラウザに期待する要件 どのOS、どのブラウザで実⾏するのかなどを指定する ブラウザの挙動（想定外のアラートが表⽰されたときにどうするか）などもここ で決める ブラウザの起動オプションもここで設定する 普段Chromeを起動するときには意識していないような起動オプション群を突 然意識させられる 初⼼者はここで躓くことが多い 歴史的経緯で同じ役割のCapabilityが複数存在することがあり、どのブラウザにど のCapabilityが使えるかが未整理 例えば unhandledPromptBehavior と unexpectedAlertBehaviour とか よく⾒ると Behavior のスペルも違うぞ︕
14. 闇その2 - Basic認証
15. Basic認証とは サイトにアクセスした際に表⽰される簡易的な認証⽅法 QA、ステージング環境でよく使われる
16. URLに埋め込めばいいだけじゃないんですか︖ https://username:password@example.com のように認証情報を埋め込むと認証プロン プトをスキップできる ……はずですが、念の為各ブラウザで確認してみましょう
17. URLにBasic認証情報を埋め込む driver.get('https://admin:admin@the-internet.herokuapp.com/basic_auth') element = driver.find_element_by_css_selector('h3') print(element.text) Chrome: スキップできる Firefox: スキップできる Edge: スキップできる IE: スキップできる Safari: スキップ できない Safariは過去のバージョンではスキップできたようですが、少なくとも現在の最新バー ジョン(12)ではスキップできませんでした
18. 「Safariはサポート外なので⼤丈夫です」 そもそもURL埋め込みにはいろいろ問題がある javascriptの fetch() が動作しなくなる webDriverの /session/{session_id}/url の戻り値にも認証情報が含まれているの で、アサーションの期待値にも同様に認証情報を含まないといけない 今後もどのブラウザでも同じようにURLに埋め込めるかどうかはわからない URLへの認証情報埋め込みはセキュリティ上の懸念からどのブラウザでも無 効にされている 試しに⼿元のブラウザのアドレスバーにBasic認証の認証情報を埋め込ん でみてください ⾃動操作時だけ例外的に使える状態
19. ならばHTTP Headerを追加しよう 認証情報をBase64にエンコードし、リクエストごとに Authorization: dXNlcm5hbWU6cGFzc3dvcmQ= のようなHTTPヘッダを付け加えることで認証プロンプトを スキップできる しかし、Seleniumには setHeader() みたいなメソッドはない どうしてもやりたい場合はプロキシサーバを⽴てる必要がある プロキシを経由し、HTTPヘッダを偽装するとSSLの証明書検証に失敗する いわゆるMan In The Middle Attackと同じ状態になる 回避するための acceptInsecureCerts というCapabilityがある AppiumではCapabilityではなくAppium Desktopの設定を変更する必要がある iOS13のSafariは正しく設定してもなお動きません（未解決） 知ってる⽅こっそり教えて下さい
20. 闇その3 - 各ブラウザの実装の違い
21. ここで問題です、この2つは何が違うでしょうか︖ Automate testing for everyone! Automate testing for everyone!
22. 答え: SpaceかNBSPかの違い (NBSP=Non-Braking SPace: 「この位置では改⾏させない」という特殊な空⽩⽂字)
23. WebDriver的にはどうなんだっけ https://w3c.github.io/webdriver/#get-element-text The Get Element Text command intends to return an element’s text “as rendered”. Get Element Text は要素のテキストを「レンダリングされた通りに」返します
24. というわけで、NBSPがどのように扱われるか各ブラウザで検証してみましょ う driver.get('https://tsuemura.github.io/webdriver-is-muzukashii/gettext.html') text1 = driver.find_element_by_id("text1").text # 半⾓スペースを使ったテキスト text2 = driver.find_element_by_id("text2").text # NBSPを使ったテキスト print(text1 == text2) Chrome: 半⾓スペースになる Firefox: 半⾓スペースになる Internet Explorer︓ 半⾓スペースになる Edge: NBSPのまま Safari: NBSPのまま ※Edgeはバージョン18で「半⾓スペースになる」に修正されました
25. WebDriverの仕様は標準化されているが……︖ 各ブラウザベンダが「仕様通りに」実装できているとは限らない ブラウザの仕様が異なる以上、どのブラウザでも「同じように」動くとは限らな い 「⼀つのシナリオでどのブラウザでも同じように動く」 は意外とむずかしい
26. まとめ Seleniumのインストールは思ってるよりずっと⼤変 Basic認証など「当然できるだろ」と思われてることが意外と⼤掛かりになる 同じテストシナリオがそのまま使えるとは限らない そして⾔うまでもなく、テストコードの記述や保守も普段のソフトウェア開発とは全 然違う⾟さがある…… いったいおれたちはなにと戦っているんだ
27. ここからポジショントークの時間です クロスブラウザテストを⾃前で実装する前に、⼀度⽴ち⽌まって「⾃分たちはそ の技術を⾝につけるべきなのか」を考えてみてください クロスブラウザテストの環境を構築し、実装し、安定して動かすには、ブラウザ の知識、Web開発の知識、インフラの知識、テストの知識……などを持った優秀な ⾃動化エンジニアの斎藤が必須になります ⼀⽅、有償のサービスやプラットフォームは、彼らが独⾃にワークアラウンドを 実装し、これまでに挙げたような⾟さをユーザーが意識せずとも使えるようにな っています 有償のサービスは⼀⾒⾼く⾒えますが、⼈を⼀⼈雇うよりは圧倒的に安く上がり ますし、サポートも受けることが出来ます
28. それでも⾃前でやってみたいあなたへ あなたは技術⼒と情熱と探究⼼を持った素晴らしいエンジニアです テストの⾃動化に情熱を燃やせる⼈は貴重です、同僚や知⼈にもテストの⾯⽩さ を伝えてあげて、仲間を増やしてください できればOSSへのコントリビュートやブログ・勉強会などでのアウトプットを通 じて、あなたが踏んだ地雷を他の⼈が踏まないようにしてあげてください この世界は闇ばかりです、あなたこそが光です ⼀緒に⾃動テストの闇を照らしていきましょう
29. Enjoy Testing!