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

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

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

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

No content

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

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

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

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

No content

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

No content

あります

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

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

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

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

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

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

何が違うの？

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

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

No content

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

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

そうはいっても学習コストがさ 異なるブラウザオートメーションツール/プロトコルへのハイレベルなAPIを提供するフレームワークがあ る WebDriverIO CodeceptJS やりたいことに合わせたプロトコルを最⼩限の学習コストで実現できる

参考: CodeceptJSのサポート範囲がおかしい（褒め⾔葉）

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

Enjoy Testing!