How can I controle React-Native webview in Detox?

问题

I can't find a way to control the React-Native Webview at https://github.com/wix/detox.

and There is another question, Do you know how to press the Back button in React-Navigatoin?

If you give the correct answer, you are a nice guy.

回答1:

You cannot interact RN webView with detox, platform limitations from iOS, Android. Refer to these. https://github.com/wix/detox/issues/136#issuecomment-306591554 https://github.com/wix/detox/issues/334#issuecomment-335802212

To press Back button in iOS:

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

To press Back button in Android:

device.pressBack()

I'm trying to be a nice guy 😀

回答2:

A hackish solution our team implemented was to add a Test component along with our 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>
    );
  }
}

Then from detox you can run arbitrary javascript like so:

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

We have a custom webView that we use, so your solution would need to implement some sort of executeJavascript on your WebView as well.

Not the best solution, but works nonetheless.

来源：https://stackoverflow.com/questions/51779998/how-can-i-controle-react-native-webview-in-detox

标签

react-native

detox