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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

  12. View Slide

  13. あります

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 何が違うの?

    View Slide

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

    View Slide

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

    View Slide

  23. View Slide

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

    View Slide

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

    View Slide

  26. 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 Slide

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

    View Slide

  28. 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 Slide

  29. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  42. Enjoy Testing!

    View Slide