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

Posted 2023-04-15

【中文标题】如何在 Detox 中控制 React-Native webview？

【英文标题】：How can I controle React-Native webview in Detox?

【发布时间】：2019-01-17 16:26:38

【问题描述】：

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

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

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

【参考方案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）的地方网络视图。