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

Question

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

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

如果你答对了，你就是个好人。

Answer 1

您无法与 iOS、Android 的 detox 和平台限制交互 RN webView。参考这些。 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()

我正在努力做一个好人

Answer 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>
    );
  }
}

然后从排毒中你可以运行任意javascript像这样：

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

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

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

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

How can I controle React-Native webview in Detox?

react-native

detox