如何在 Detox 中控制 React-Native webview？答案

【问题标题】：How can I controle React-Native webview in Detox?如何在 Detox 中控制 React-Native webview？
【发布时间】：2019-01-17 16:26:38
【问题描述】：

我在https://github.com/wix/detox 找不到控制 React-Native Webview 的方法。

还有一个问题，你知道如何在 React-Navigatoin 中按下返回按钮吗？

如果你给出正确的答案，你就是一个好人。

【问题讨论】：

标签： react-native detox

【解决方案1】：

您无法将 RN webView 与 detox、iOS、Android 的平台限制进行交互。参考这些。 https://github.com/wix/detox/issues/136#issuecomment-306591554 https://github.com/wix/detox/issues/334#issuecomment-335802212

在 iOS 中按下返回按钮：

element(by.type('_UINavigationBarBackIndicatorView')).tap();

在 Android 中按返回按钮：

device.pressBack()

我正在努力成为一个好人?

【讨论】：

我们在 Detox 18.7.0 中添加了对 Android 网页视图的支持。对 iOS 的支持在我们的路线图中。

【解决方案2】：

我们团队实施的一个骇人听闻的解决方案是添加一个Test 组件以及我们的WebView。

import React, { Component } from 'react'
import { View, TouchableOpacity, TextInput, Alert } from 'react-native';


export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      val:"",
    };
  }
  onPress() {
    const { webView } = this.props;
    if (webView && webView.executeJavascript) {
      webView.executeJavascript(this.state.val);
    }
  }
  render() {
    return (
      <View style={{flex:0.1, flexDirection:'row'}}>
        <TextInput
          testID={"test_input"}
          onChangeText={val => this.setState({ val })}
          style={{flex:1,color:'white',backgroundColor:'#720000'}}
         />
         <TouchableOpacity
          testID={"submit_test_input"}
          onPress={this.onPress.bind(this)}
          style={{flex:0.1,backgroundColor:'red'}}
          />
      </View>
    );
  }
}

然后从 detox 你可以像这样运行任意 javascript：

await element(by.id('test_input')).replaceText(`
  $('#input-email').val('${USERNAME}');
  $('#input-password').val('${PASSWORD}');
  $('#login-form').submit();
`);

我们有一个我们使用的自定义 webView，因此您的解决方案还需要在您的 WebView 上实现某种 executeJavascript。

不是最好的解决方案，但仍然有效。

【讨论】：

嘿，我正在尝试实现类似的目标...您能提供更多详细信息吗？你在哪里使用了这个测试组件？谢谢
@ddacrs 已经有一段时间没有看到这个了，但是在测试期间测试组件将与 webview 一起呈现，它所做的只是添加一个注入 JS（在本例中为 JQuery）的地方网络视图。