Detoxを使用してReact-NativeWebViewをテストする方法

Detoxを使用して、最終的にWebViewのエンドツーエンドのテストを作成できます。

…まあ、とにかくAndroidでは。

現時点では、iOSはサポートされていません。ただし、それは将来変更される可能性があります。さらに、Androidでテストするための機能は存在しますが、DetoxのドキュメントはWebビューテストを含むように公式に更新されていません。これは、作業が進行中であり、かなり静まり返っている可能性があることを示しています。

とにかく、AndroidでWebビューをテストできることは、開発者にとって大きな飛躍です。

アプリにWebViewを追加する方法

WebViewを含めるには、react-native-webviewパッケージを依存関係としてに追加しますpackage.json。WebViewコンポーネントをインポートし、以下に示すようにソースを渡します。

testIDテストの実行時にデトックスで検出できるように、必ずWebViewにを含めてください。

Webビューのテストを作成する方法

この例では、Twitterのログインページを使用しています。ユーザーに次のことを許可したいと思います。

• ユーザー名を入力してください
• パスワードを入力してください
• そして、ログインボタンをクリックします

Webビューの読み込みに時間がかかる場合があるため、テストを実行する前に読み込みが完了するように遅延を追加すると便利な場合があります。

以下に示すように、DetoxのWebオブジェクトを使用して、ビューと対話し、配置された要素に対してアサーションを作成できます。

DOM要素の検索：

DetoxのWebはAndroidのExpresso-Web上に構築されており、DOM要素を選択するための関数のリストを提供します。

• id —IDによってDOMツリー上の要素を検索します
• text -CSSクラスによってDOMツリー上の要素を検索します
• cssSelector -指定されたCSSセレクターに一致するDOMツリー上の要素を検索します
• name -「name」属性によってDOMツリー上の要素を検索します
• xpath -XPathによってDOMツリー上の要素を検索します
• href-<a>リンクテキストによってDOMツリー上の要素を検索します
• hrefContent-<a>部分的なリンクテキストによってDOMツリー上の要素を検索します
• tag -タグ名でDOMツリー上の要素を検索します

要素を見つけたら、次の自明の方法でユーザーの操作をシミュレートできます。

• tap
• typeText
• getText
• clearText
• replaceText
• scrollToView
• getCurrentUrl
• getTitle
• runScript
• runScriptWithArgs

デトックスウェブには、楽しいマッチャーのセットも付属しています。

• toExist()
• toNotExist()
• toHaveText()
• toNotHaveText()

可能性は無限大！