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

結局おれたちはどのフレームワークを使えばいいのか

 結局おれたちはどのフレームワークを使えばいいのか

第5回 日本Seleniumユーザーコミュニティ勉強会 (リモート)
https://seleniumjp.connpass.com/event/174106/

tsuemura

May 16, 2020
Tweet

More Decks by tsuemura

Other Decks in Technology

Transcript

  1. 結局おれたちはどのフレームワークを使えばいいのか
    Takuya Suemura @ Autify Inc.

    View full-size slide

  2. おねがい
    全⼒で笑いを取りに⾏くスタイルの登壇者なので無⾔が⾟いです
    ぜひお⼿元のTwitterやCommentScreenでコメントをください

    View full-size slide

  3. ⾃⼰紹介
    Twitter: @tsueeemura
    末村 拓也 (すえむら たくや)
    ⽊村 拓也ではない
    Autify のテスト⾃動化スペシャリスト
    Webのテスト技術についておもしろおかしく喋るのが仕事です

    View full-size slide

  4. 書いたもの
    我が名は神⿓……どんなテストもひとつだけ⾃動化してやろう
    クロスブラウザテストの闇と闇と闇
    Software Design 6⽉号 『はじめよう,⾼速E2Eテスト』
    なぜE2Eテストでidを使うべきではないのか
    喋ったもの
    Autify ポッドキャスト

    View full-size slide

  5. OnlineTestConf 2020 で話します
    How do you improve the testability of your application?
    https://www.onlinetestconf.com/program-spring-otc-2020/

    View full-size slide

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

    View full-size slide

  7. AutifyとSelenium
    E2Eテストのバックエンド(ブラウザ⾃動操作)として利⽤
    AWS Fargateを使った⾃前Selenium Grid環境を構築
    詳しくはCTOのスライド FargateとLambdaで作るスケーラブルなE2Eテスト実⾏基盤 を⾒
    てください
    突然10並列とかでChromeが動きます。強い。パラレル is パワー
    クロスブラウザの微妙な動作の違いを吸収するワークアラウンドを実装
    詳しくはブログ記事 クロスブラウザでテキストフィールドの内容をクリアするまでの道のり を⾒
    てください
    テキストフィールドをクリアするだけでこんなに闇が深いんですね(他⼈事
    ⾯⽩そうだと思ったらぜひ懇親会で声掛けてください
    コロナに負けずに採⽤活動中です

    View full-size slide

  8. 今⽇のテーマ: フレームワークの選定

    View full-size slide

  9. ⽇本SeleniumユーザーコミュニティでSelenium以外の話する
    選択肢あ
    る???????????????????????
    ????????????????????????
    ????????????????????????
    ????????????????????????
    ????????????????????????
    ????????????????????????
    ??????

    View full-size slide

  10. あります

    View full-size slide

  11. 盲⽬的にSeleniumを選択していないか
    「ブラウザテスト」でググったらSeleniumが出てきた
    スクレイピングの場合もある
    本屋に⾏ったらSeleniumの本しか置いてなかった
    よくわかんないけどブラウザが動かせるんでしょ?

    View full-size slide

  12. もちろん逆のパターンもある
    知識がアップデートされてないパターンが多い
    Firefoxのエクステンションのやつでしょ?昔使ったけど遅いし
    不安定だし使い物にならなかったよ
    うちはSPAだからSeleniumはダメだね
    時代はHeadlessChromeだから

    View full-size slide

  13. ブラウザオートメーションツールについて
    網羅的に説明したドキュメントが少ない
    どのようなユースケースが存在するのか
    それぞれのフレームワークはどこに当てはまるのか

    View full-size slide

  14. というわけで
    Seleniumも含めた様々な⾃動化技術について解説します
    メリデメ理解して適切な技術を選択するための⼀助になれば
    幸いです
    すでに出来てる⼈は寝てて⼤丈夫です

    View full-size slide

  15. ブラウザオートメーションツール
    いくつ⾔えるかな?
    皆さんお⼿元のTwitterやCommentScreenでご回答ください

    View full-size slide

  16. Selenium
    Puppeteer
    TestCafe
    Cypress
    Playwright
    Taiko
    ...etc
    みんなはいくつ⾔えたかな?

    View full-size slide

  17. 何が違うの?

    View full-size slide

  18. ブラウザオートメーションツール概観

    View full-size slide

  19. https://www.slideshare.net/hnisiji/stac2018-lt-125349647

    View full-size slide

  20. 各フレームワークによる
    「Seleniumとの違い」についての説明を⾒てみる

    View full-size slide

  21. Puppeteerとは
    特徴
    CDP(Chrome DevTools Protocol)でブラウザを操作するためのリッチなAPI
    F12を押すと出てくるやつをプログラマブルに扱うためのプロトコル
    Chromeしか操作できない
    Firefoxも……という話があったが今の所まだベータ
    Chromiumに付属するやつなのでChromium Edgeでも使える

    View full-size slide

  22. Seleniumとの違いについて
    Q: Is Puppeteer replacing Selenium/WebDriver?
    No. Both projects are valuable for very different reasons:
    Selenium/WebDriver focuses on cross-browser automation; its value proposition is
    a single standard API that works across all major browsers.
    Puppeteer focuses on Chromium; its value proposition is richer functionality and
    higher reliability.
    https://github.com/puppeteer/puppeteer/

    View full-size slide

  23. TestCafe
    特徴
    URL Rewrite Proxyという仕組みでサイト内にJSを埋め込んで操作する
    クロスブラウザ対応
    インストール簡単
    npm i -g testcafe

    View full-size slide

  24. Seleniumとの違いについて
    2016年のフォーラムでの回答
    First, we wanted to simplify setting up the test environment. To start with
    Selenium, you need to install the WebDriver client for the desired programming
    language and the appropriate drivers for each browser you're going to test in.
    Finally, as you mentioned, although webdrivers are developed by browser vendors,
    compatibility issues still appear from time to time.
    https://testcafe-discuss.devexpress.com/t/why-not-use-selenium-how-to-use-
    testcafe/47

    View full-size slide

  25. Seleniumとの違いについて
    FAQでの回答
    Unlike most testing solutions, TestCafe is not built on Selenium. This allows us to
    implement features you cannot find in Selenium-based tools (for example, testing
    on mobile devices, user roles, automatic waiting, etc.).
    TestCafe uses a URL-rewriting proxy which allows it to work without the
    WebDriver. This proxy injects the driver script that emulates user actions into the
    tested page.
    https://devexpress.github.io/testcafe/faq/#i-have-heard-that-testcafe-does-not-use-
    selenium-how-does-it-operate

    View full-size slide

  26. 他では出来るがSeleniumでは出来ないこと
    結構 「えっ!?これ出来ひんの!?」 みたいなのが多い
    HTTPヘッダ修正
    BASIC認証
    サイトでのJavaScriptエラーの検知
    ネットワークトラフィックの記録
    ...etc
    このうちのいくつかはMicrosoftのチームから Bidirectional WebDriver Protocol として提案が出
    ている https://github.com/w3c/webdriver/blob/master/webdriver-bidi/webdriver.md
    Puppeteerのような柔軟な機能が提供される⽇も近い……かもしれない

    View full-size slide

  27. Seleniumで出来ないと勘違いされていること
    要素の表⽰待ち
    Selenium⾃体にもImplicit Waitが存在するし、各種テストランナーなどでも同等の機能が
    提供されている
    Cookieのキャッシュ、レストア
    頑張ればTestCafeのUserRoleに相当する操作を実現することもできる
    モバイル
    Appiumがあるじゃん……!

    View full-size slide

  28. Seleniumの特徴について改めて整理
    https://selenium.dev/

    View full-size slide

  29. Selenium WebDriver
    互換性テストのための標準化されたAPI
    ユーザーの操作をエミュレートするために細かく仕様が決められている
    複数のプログラミング⾔語に対応

    View full-size slide

  30. 参考: WebDriverの仕様における「要素が隠れている」判定の説明
    https://www.w3.org/TR/webdriver/#dfn-obscuring

    View full-size slide

  31. Selenium Grid
    ⼤規模・複数並列のためのインフラを構築するための技術
    実機を複数接続して実⾏することを前提にしている
    インフラとテストランナーを分けて構築できる

    View full-size slide

  32. 参考: Zaleniumのコンテナとデバイスファームの連携図
    (アニメGIFなのでPDFに貼れませんでした)
    https://opensource.zalando.com/zalenium/img/how_it_works.gif

    View full-size slide

  33. 結局おれたちは
    どのフレームワークを使えばいいのか?
    皆さんお⼿元のTwitterやCommentScreenでご意⾒をお寄せください

    View full-size slide

  34. おれの答え: ぜんぶ
    Seleniumは「軽量なUIテスト」「軽量なE2Eテスト」をするには重いし機能不⾜
    ヘッダ偽装やバックエンドのモックにはテクニックが必要
    機能が追加されたとしても実⾏速度はそこまで期待できない(多分)
    しかし 「⼤規模なE2E互換性テスト」をするのに必要な全てがある
    標準化された透過的なAPI
    複数のOS・バージョンの実機を接続できる
    異なるユースケースをむりやり⼀つの⽅法で賄うのは悪⼿
    ⼩さな関⼼事はより軽量で柔軟なツールに任せて、SeleniumではIEのより⼤きな視点の
    E2Eテストをしよう

    View full-size slide

  35. そうはいっても学習コストがさ
    異なるブラウザオートメーションツール/プロトコルへのハイレベルなAPIを提供するフレームワークがあ

    WebDriverIO
    CodeceptJS
    やりたいことに合わせたプロトコルを最⼩限の学習コストで実現できる

    View full-size slide

  36. 参考: CodeceptJSのサポート範囲がおかしい(褒め⾔葉)

    View full-size slide

  37. いろんなツールを組み合わせて
    君だけのE2Eテストを作ろう!

    View full-size slide

  38. Enjoy Testing!

    View full-size slide