Element Locating and Timeout

[heuism]

Some tests took longer time for it to find the element. And i tried on one screen that when the app navigated to the screen. Detox couldn't locate the element and kept looking for the element with the testID i gave it until timeout. I am unsure what is the issue of that.

Thanks

[mfrachet]

Can you provide some code please ? :D

[heuism]

oh i would love to

 <SideMenu openMenuOffset={width * 0.8} isOpen={this.state.drawer} menu={<ControlPanel/>} testID={`test_ID_side_menu_`}> //<----- testID of the main one
        <View testID={`test_ID_screen_`}>
          <Image source={require('../assets/IMG_1.png')} style={{height: height, width: width}} testID={`start_diary_bg_`}> //<----- testID of the background one
            <View style={{height: 20 / designHeight * height}}/>
            <MenuBar />
            <View style={{height: 130 / designHeight * height}}/>
            <View style={largeButtonContainerStyle}>
              <ButtonRoundAnim
                onPress={() => ...}
                text=""
                radiusSize={308 / 2 / designHeight * height}
                activeOpacity={0.5}
                imageSource={require('../assets/Group.png')}
                testID={`test_ID_btn_`} //<----- testID of the butto
              />
            </View>
          </Image>
        </View>
      </SideMenu>

Yeah i looked for each of the testID one by one but can't locate those. I am unaware of this. And maybe because i got the RoundButton that can animated or not? Thanks

[mfrachet]

It's possible to add a test snippet for comparison ? :)

[heuism]

            await singleTap(`${components.best_time_next_btn}`, 'id');
});

it('Then I should be shown the DIARY SCREEN', async () => {
        await waitForAppear(`${components.test_ID_side_menu}`);
})```

This is the way i test it, just simple wait for the click -> wait for the screen to appear. I tried waiting for the button to loaded as well

[mfrachet]

test_ID_side_menu_ in your component is not interpolated using ${test_ID_side_menu_ }. Is this wanted ?

[heuism]

Can you tell me what do you mean by interpolating? i am new so i am unsure. Can you explain a bit more? I put those information there to test different kind of testID

[mfrachet]

When you write <View testID={test_ID_screen_}>..., test_ID_screen is a string equals to "test_ID_screen"

When you write

const testID = '123;
return (<View testID={`${test_ID_screen_}`}>...);

the View testID is now 123.

Let's take a look at https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

I'm not sure this question is relevant to the detox internals. You may ask these kind of questions on https://stackoverflow.com/

[heuism]

oh yeah yeah i understand you now. The testID for the Sidemenu is test_ID_side_menu_. The reason i put the ${component.test_ID_side_menu} cause i got the component object, with test_ID_side_menu: test_ID_side_menu_. So i guess this would be the same as what you are saying i guess.

[LeoNatan]

Please provide the view hierarchy from Xcode.

[rotemmiz]

There are a few things which need clarification here:

1. what does waitForAppear do ? is it wrapping waitFor or expect ? Try to avoid using waitFor, most chances you don't need manual synchronization.
2. If you use automatic synchronization Detox will never "keep looking" for something, it will wait until the app is idle and then either it's there or its not. If it waits too much probably your app is not idle. Read the troubleshooting sync guide for more information.

[heuism]

@rotemmiz, sorry for not keeping update on this one. But can I ask what is being idle mean. Yeah Being honest, I thought the waitForAppear (in this case is wait for the new screen to appear). Seems like it doesn't do anything. And if the 'being IDLE' means that it would be unable to locate any element that have have animation? Because there is an animating button on the screen.

Thanks for helping me

[heuism]

This is what I meant about the animating button. I let it have an ID, but it can't be located by the Detox somehow

Any input @rotemmiz and @LeoNatan that would be great.

Thanks

[heuism]

Detox eliminates flakiness by automatically synchronizing your tests with the app. A test cannot continue to the next line if the app is busy. The test will only resume when the app becomes idle. Detox monitors your app very closely in order to know when it's idle. It tracks several asynchronous operations and waits until they complete. This includes:

Keeping track of all network requests that are currently in-flight and waiting until they complete
Keeping track of pending animations and waiting until they complete
Keeping track of timers (like setTimeout) and waiting until they expire
Keeping track of the React Native bridge which carries asynchronous messages
Keeping track of asynchronous React Native layout and the shadow queue
Keeping track of the JavaScript event loop which may contain pending asynchronous actions

So apparently there is a line saying that keeping track of pending animation, so if the button keeps animating like this. Then It will keep waiting?

[brunolemos]

I have this timeout issue as well.
The app crashes when trying to locate the element and times out.

Here is the crash log:

2017-11-20 03:40:07.716 react_native_css_in_js_benchmarks[45731:1413227] -[GREYAppStateTrackerObject copyWithZone:]: unrecognized selector sent to instance 0x604000058bd0
2017-11-20 03:40:07.746 react_native_css_in_js_benchmarks[45731:1413227] Uncaught exception: -[GREYAppStateTrackerObject copyWithZone:]: unrecognized selector sent to instance 0x604000058bd0; Stack trace:
0   CoreFoundation                      0x000000010e31703b __exceptionPreprocess + 171
1   libobjc.A.dylib                     0x000000010cc7cf41 objc_exception_throw + 48
2   CoreFoundation                      0x000000010e3978c4 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132

EDIT: Seems that my case is the same as #418 so I'll go there.

Here is the full code on branch detox:
https://github.com/brunolemos/react-native-css-in-js-benchmarks/tree/detox
Run: npm run detox

[LeoNatan]

@heuism That line is about native animations. If you are using JS animations in RN, you need to take care of those.