Search code examples
javascriptreact-nativee2e-testingdetox

Detox: Using multiple element matchers results in error

I am using Detox for E2E testing on a React Native app using the following specs:

React Native 0.55.4 Node 9.2.0 Detox 7.3.7

When I am on a page within my app I can scroll using the scrollView with the Matcher element(by.id('scrollView')) and I can click a button with the Matcher element(by.text('This Button')) but if I want to select the button element using chaining with the .and() method I get an error Cannot find UI element.

I cannot figure out why I can interact with these two elements independently, but when I link them they no longer work.

Here is a sanitized example of what the React Native code looks like:

Route.js

<ScrollView style={styles.container} testID={"scrollView"}>
 <View style={styles.header} />
   this.body()
</ScrollView>

this.body() does some validation but the render() is nothing special:

<View>
  <CustomButtonComponent />
</View>

The custom button component is another View with some Text and a Button element.

My only guess is that since I am using nested views/custom components maybe the Matcher logic cannot handle that. Any ideas? Maybe I don't understand the Documentation completely.

Solution

  • As @Andrew pointed out in his comment, my question is invalid because I misunderstood the documentation. If you want to Match based on a relationship to other elements use withDescendant() or withAncestor() instead of trying to chain with and().