Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tsuemura
October 29, 2019

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

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

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

tsuemura

October 29, 2019
Tweet

More Decks by tsuemura

Other Decks in Programming

Transcript

  1. クロスブラウザテストの闇と闇と闇と闇
    末村 拓也 @ Autify Inc.

    View full-size slide

  2. 簡単に⾃⼰紹介
    末村 拓也 (すえむら たくや)
    ⽊村拓也ではない
    QAエンジニア
    CodeceptJSのコミッタ
    Qiitaに書いた 我が名は神⿓……どんなテストもひとつだけ⾃動化してやろう とい
    う記事が好評でした
    現在は Autify というテスト⾃動化プラットフォームを作る会社で働いています

    View full-size slide

  3. 簡単にAutifyの説明
    https://autify.com
    AIによるセルフヒーリングと、わかりやすいUIが特徴のテスト⾃動化プラットフ
    ォームです
    WebアプリケーションのE2Eテストを簡単に⾃動化することができます
    コーディングの知識は不要で、ブラウザ操作を⾃動記録してシナリオを作れます
    Selenium IDEの超強い版みたいなイメージです
    モバイルも含めた様々なOS・ブラウザの組み合わせでテストを実⾏することがで
    きます

    View full-size slide

  4. クロスブラウザテストとは
    同じテストシナリオを複数のブラウザで実⾏し、互換性を確認すること
    Chromeでは動いたけどIEでは動かなかった、みたいな悲劇を防げる
    シナリオを使い回せるため、⾃動テストの実装コストが相対的に少ない(と
    期待されている)
    表⽰されている⽂字列の検証や、Javascriptのエラーが出ていないかどうか、ある
    いは表⽰崩れなどを検証することもある
    今⽇は表⽰崩れの検証とかの話は しません
    どのE2Eテストフレームワークでも出来るとは限らない
    今⽇はSelenium(WebDriver)についての話をします

    View full-size slide

  5. SeleniumとWebDriverについておさらい
    Seleniumは様々なブラウザの操作を⾃動化するためのフレームワークです
    WebDriverという、「あるブラウザの⾃動操作に特化したドライバ」を各ブラウザ
    のベンダが作ってくれています
    例えばChromeならChromeDriver、FirefoxならGeckoDriverというように
    WebDriverの仕様は標準化されているので、どのブラウザに対しても同じように⾃
    動操作の命令を出す事が出来ます

    View full-size slide

  6. ここで質問です
    クロスブラウザテストが必要な⼈︖
    クロスブラウザテストにしっかり取り組んで、成果を出せているという⼈︖
    クロスブラウザテストあきらめちゃった⼈︖

    View full-size slide

  7. この発表で話すこと
    Selenium(WebDriver)でのクロスブラウザテストは「可能」だが「簡単」ではない
    実際にクロスブラウザテストに取り組む中で得た知⾒(というか苦労話)をご紹
    介します
    Seleniumがイケてないとかそういう話ではありませんのでご留意ください
    OSSだし、みんなで良くしていけばいいよね

    View full-size slide

  8. 闇その1 - インストール
    肌感ですがSeleniumはじめた⼈の半分ぐらいここでつまづいてる

    View full-size slide

  9. WebDriverのインストールはブラウザごとに必要です
    各ブラウザのバージョンに合わせたWebDriverのインストールが必要です
    間違ったバージョンをインストールすると動きません
    ChromeとFirefoxはブラウザとWebDriverがセットになったDockerコンテナが公式
    から提供されています
    が、当然Linux上で動いているので、ファイルアップロードなどOS組み込みの
    コンポーネントはLinuxになってしまいます
    WebDriverのインストールを⾃動化出来る selenium-standalone というNodeJSの
    ライブラリがあります
    しかし、後述の理由でEdge 18から動かなくなりました
    参考:
    https://hub.docker.com/u/selenium/

    View full-size slide

  10. おまえはIEDriverのセットアップにかかった時間を数えたことがあるのか︖
    IEDriverのインストールはものすごく⼯程が多い
    IEDriverServerにPATHを通す
    「全てのゾーンで」保護モードを無効にする
    ズームレベルを100%にする
    OSのズームレベルも100%にしないといけないので⾼DPI端末では事実上使え
    ないです
    ⼀応無視するためのCapabilityがあるらしい(未検証)
    レジストリの設定が必要です
    参考:
    https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver#required-
    configuration

    View full-size slide

  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 はこの⽅式に対応してないので
    ⾃前でインストールする必要があります

    View full-size slide

  12. BrowserStackとか使えばいいじゃないですか
    BrowserStackなどのデバイスファームを利⽤すればインストール周りの苦労は激
    減する
    複数のOS・ブラウザのバージョンを選択できるため互換性テストに最適
    ただしクッソ遅い
    サーバが海外にあるため
    たまにBrowserStackそのもののバグを踏むことがある
    特定のCapabilityが無視されるなど
    サポートはしっかりしてるのでなんかおかしかったらすぐ聞くといいです
    英語だけどな︕
    参考: デバイスファームの有名どころ
    https://browserstack.com/
    https://saucelabs.com
    https://crossbrowsertesting.com/

    View full-size slide

  13. ほう、インストールを倒したのか︖ではこのCapabilitesが相⼿をしてやろう
    Capabilities = 実⾏対象のブラウザに期待する要件
    どのOS、どのブラウザで実⾏するのかなどを指定する
    ブラウザの挙動(想定外のアラートが表⽰されたときにどうするか)などもここ
    で決める
    ブラウザの起動オプションもここで設定する
    普段Chromeを起動するときには意識していないような起動オプション群を突
    然意識させられる
    初⼼者はここで躓くことが多い
    歴史的経緯で同じ役割のCapabilityが複数存在することがあり、どのブラウザにど
    のCapabilityが使えるかが未整理
    例えば unhandledPromptBehavior と unexpectedAlertBehaviour とか
    よく⾒ると Behavior のスペルも違うぞ︕

    View full-size slide

  14. 闇その2 - Basic認証

    View full-size slide

  15. Basic認証とは
    サイトにアクセスした際に表⽰される簡易的な認証⽅法
    QA、ステージング環境でよく使われる

    View full-size slide

  16. URLに埋め込めばいいだけじゃないんですか︖
    https://username:[email protected] のように認証情報を埋め込むと認証プロン
    プトをスキップできる
    ……はずですが、念の為各ブラウザで確認してみましょう

    View full-size slide

  17. URLにBasic認証情報を埋め込む
    driver.get('https://admin:[email protected]/basic_auth')
    element = driver.find_element_by_css_selector('h3')
    print(element.text)
    Chrome: スキップできる
    Firefox: スキップできる
    Edge: スキップできる
    IE: スキップできる
    Safari: スキップ できない
    Safariは過去のバージョンではスキップできたようですが、少なくとも現在の最新バー
    ジョン(12)ではスキップできませんでした

    View full-size slide

  18. 「Safariはサポート外なので⼤丈夫です」
    そもそもURL埋め込みにはいろいろ問題がある
    javascriptの fetch() が動作しなくなる
    webDriverの /session/{session_id}/url の戻り値にも認証情報が含まれているの
    で、アサーションの期待値にも同様に認証情報を含まないといけない
    今後もどのブラウザでも同じようにURLに埋め込めるかどうかはわからない
    URLへの認証情報埋め込みはセキュリティ上の懸念からどのブラウザでも無
    効にされている
    試しに⼿元のブラウザのアドレスバーにBasic認証の認証情報を埋め込ん
    でみてください
    ⾃動操作時だけ例外的に使える状態

    View full-size slide

  19. ならばHTTP Headerを追加しよう
    認証情報をBase64にエンコードし、リクエストごとに Authorization:
    dXNlcm5hbWU6cGFzc3dvcmQ= のようなHTTPヘッダを付け加えることで認証プロンプトを
    スキップできる
    しかし、Seleniumには setHeader() みたいなメソッドはない
    どうしてもやりたい場合はプロキシサーバを⽴てる必要がある
    プロキシを経由し、HTTPヘッダを偽装するとSSLの証明書検証に失敗する
    いわゆるMan In The Middle Attackと同じ状態になる
    回避するための acceptInsecureCerts というCapabilityがある
    AppiumではCapabilityではなくAppium Desktopの設定を変更する必要がある
    iOS13のSafariは正しく設定してもなお動きません(未解決)
    知ってる⽅こっそり教えて下さい

    View full-size slide

  20. 闇その3 - 各ブラウザの実装の違い

    View full-size slide

  21. ここで問題です、この2つは何が違うでしょうか︖
    Automate testing for everyone!
    Automate testing for everyone!

    View full-size slide

  22. 答え: SpaceかNBSPかの違い
    (NBSP=Non-Braking SPace: 「この位置では改⾏させない」という特殊な空⽩⽂字)

    View full-size slide

  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 は要素のテキストを「レンダリングされた通りに」返します

    View full-size slide

  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で「半⾓スペースになる」に修正されました

    View full-size slide

  25. WebDriverの仕様は標準化されているが……︖
    各ブラウザベンダが「仕様通りに」実装できているとは限らない
    ブラウザの仕様が異なる以上、どのブラウザでも「同じように」動くとは限らな

    「⼀つのシナリオでどのブラウザでも同じように動く」 は意外とむずかしい

    View full-size slide

  26. まとめ
    Seleniumのインストールは思ってるよりずっと⼤変
    Basic認証など「当然できるだろ」と思われてることが意外と⼤掛かりになる
    同じテストシナリオがそのまま使えるとは限らない
    そして⾔うまでもなく、テストコードの記述や保守も普段のソフトウェア開発とは全
    然違う⾟さがある……
    いったいおれたちはなにと戦っているんだ

    View full-size slide

  27. ここからポジショントークの時間です
    クロスブラウザテストを⾃前で実装する前に、⼀度⽴ち⽌まって「⾃分たちはそ
    の技術を⾝につけるべきなのか」を考えてみてください
    クロスブラウザテストの環境を構築し、実装し、安定して動かすには、ブラウザ
    の知識、Web開発の知識、インフラの知識、テストの知識……などを持った優秀な
    ⾃動化エンジニアの斎藤が必須になります
    ⼀⽅、有償のサービスやプラットフォームは、彼らが独⾃にワークアラウンドを
    実装し、これまでに挙げたような⾟さをユーザーが意識せずとも使えるようにな
    っています
    有償のサービスは⼀⾒⾼く⾒えますが、⼈を⼀⼈雇うよりは圧倒的に安く上がり
    ますし、サポートも受けることが出来ます

    View full-size slide

  28. それでも⾃前でやってみたいあなたへ
    あなたは技術⼒と情熱と探究⼼を持った素晴らしいエンジニアです
    テストの⾃動化に情熱を燃やせる⼈は貴重です、同僚や知⼈にもテストの⾯⽩さ
    を伝えてあげて、仲間を増やしてください
    できればOSSへのコントリビュートやブログ・勉強会などでのアウトプットを通
    じて、あなたが踏んだ地雷を他の⼈が踏まないようにしてあげてください
    この世界は闇ばかりです、あなたこそが光です
    ⼀緒に⾃動テストの闇を照らしていきましょう

    View full-size slide

  29. Enjoy Testing!

    View full-size slide