WebViewでもちゃんとしてる？ViewTeとvtxを使って楽々チェック

WebViewでもちゃんとしてる？ ViewTeとvtxを使って楽々チェック UIT#1 フロントエンドふりかえり 2017

Joshua Zhang 張臻（チョウシン） https://twitter.com/toruta39

2017年一番の変化

WebViewからアクセスの場面は増えている • SNSにシェアされた場合 ◦ LINEやFacebookのアプリ内ブラウザ • メッセンジャーの中で動くWebアプリ ◦ Instant Games
(Facebook Messenger) ◦ Mini Programs (Wechat) • iOSのサードパーティブラウザからの場合 ◦ Google Chrome for iOSなど • WebView向けに開発された場合 ◦ スマホゲーム内のお知らせ機能 ◦ WebViewを利用したサードパーティ認証機能

WebViewの中の挙動が違う • JavaScriptランタイム • Cookie • Audio/Video • window.open() •
getUserMedia() • requestPermission() • ...

WebViewテストが必要

WebViewテストが大変 • テスト環境の用意 ◦ エミュレーターのセットアップ ◦ 実機端末の購入 • テストアプリのセットアップ ◦
アプリストアのセットアップ・ ID管理 ◦ アプリのダウンロード ◦ テストアプリのセットアップ・ ID管理 • iOSの3種類WebView問題 • キャッシュクリア ◦ テスト専用プロキシを利用するか ◦ アプリを入れ直す

WebViewテストを楽にしたい

ViewTeを作った

ViewTeのできること • 略称はvt • ダウンロード完了したら、すぐにテストが始められる • iOSの3種類のWebViewを呼び出せる • Chrome DevTool
Remote Debuggingと連動可能 • エミュレター用の.apkと.appをGithubで公開 • App Store: https://tinyurl.com/vt-ios • Google Play Store: https://tinyurl.com/vt-play

自動テストでもっと楽したい

自動E2Eテストが昔よりだいぶよくなった • Objective-C/Swift/Java/XCUITest/UIAutomatorを勉強しなくても大丈夫 • AppiumのおかげでSeleniumに似てるインターフェイスで E2EテストがNode.jsで書ける

自動E2Eテストも大変 • サーバーセットアップでの前提知識が多く、学習コストがまだ高い ◦ Selenium Server ◦ Selenium Grid ◦
Appium Server ◦ WebDriver Server ◦ Xcode ◦ Android Studio • 初期設定のステップが多い • WebViewをターゲットにしたE2Eテストツールはまだない

自動E2Eテストも大変 • クライアントは以下の知識が必要 ◦ WebDriverのJSONWireProtocol ◦ Protocolを抽象化するライブラリ • テストフレームワークの導入 •
クロスプラットフォーム対応 ◦ テストコードをブラウザごとに書く必要がある

vtxを作った

vtxのできること • vtxはViewTeCrossの略 • サーバーセットアップのマニュアルと CLIを提供 • テストスーツを1つ書いたら、WebViewを含めてあらゆるブラウザでテストできる • Jestを利用して、トランスコンパイラーとテストランナーはゼロコンフィグ

デモ

サンプルコード

サーバー

クライアント

package.json

vtx.conf.js

search.spec.js

最後に

ViewTeとvtxを使って WebViewもちゃんとしましょう！ ViewTe: https://github.com/toruta39/ViewTe vtx: https://github.com/toruta39/ViewTe/tree/develop/packages/vtx Code Example: https://github.com/toruta39/ViewTe/tree/develop/packages/vtx-code-example

ご清聴ありがとうございました ViewTeとvtxの最新ニュースをメールリストから購読： https://tinyurl.com/vt-news-letters

WebViewでもちゃんとしてる？ViewTeとvtxを使って楽々チェック

WebViewでもちゃんとしてる？ViewTeとvtxを使って楽々チェック

Joshua Zhang

More Decks by Joshua Zhang

Other Decks in Technology

Featured

Transcript