Detox - Tap a button when it becomes enabled

Question

I have a problem performing a tap() on a button when testing with Detox.

<Button style={this._loginButtonDisabled() ? {} : styles.loginButtonActive}
        disabled={this._loginButtonDisabled()}
        onPress={this.logInClick}
        testID='logInButton'>
    <Text style={styles.loginButtonText}>Log In</Text>
</Button>   

Our test looks like this:

const emailInput = element(by.id('emailInput'));
await emailInput.replaceText('idontexist@myeatclub.com');

const passwordInput = element(by.id('passwordInput'));
await passwordInput.replaceText('password');

await element(by.id('logInButton')).tap();

The button is visible all the time, but becomes enabled ('tappable') only after typing in the text in the form fields. So the code above taps the button before it's enabled, resulting in no real action. What I'd like to do is wait until button is enabled, and then perform the tap.

What's the suggested way of handling this type of scenario? I couldn't find any good examples in the docs.

Answer 1

I think it's because you are using replaceText

Instead try using typeText

Like this:

const emailInput = element(by.id('emailInput'));
await emailInput.replaceText('idontexist@myeatclub.com');

const passwordInput = element(by.id('passwordInput'));
// \n is used to press the return key on keyboard
await passwordInput.typeText('password\n');

await element(by.id('logInButton')).tap();