How goBack screen in test with detox

Question

I make automatization react native test with detox, It has the next screen sequence A -> B -> C and i wish to go back to the screen B <- C. Is there a solution for this?

Answer 1

There's a testId on the back button, so you can do this:

  await element(by.id("header-back")).tap();

Answer 2

sometimes

await element(by.id("header-back")).tap();

does not work and

await element(by.traits(['button']))
  .atIndex(0)
  .tap();

selects another button. In that case, you can try to use swipe right on ios assuming that it is a stack navigator. Use the outer container view

await element(by.id('containerView')).swipe('right', 'fast', 0.1);

Answer 3

You could go ahead and create a utility

export const pressBack = async () => {
  if (device.getPlatform() === 'android') {
    await device.pressBack(); // Android only
  } else {
    await element(by.traits(['button']))
      .atIndex(0)
      .tap();
  }
};

• Android: device.pressBack()
• iOS: go back last screen #828

Answer 4

If you are using react-native-navigation you can use:

const backButton = () => {
  if (device.getPlatform() === 'ios') {
    return element(by.type('_UIBackButtonContainerView'));
  } else {
    return element(by.label('Navigate Up'));
  }
};
...
await backButton().tap();

For iOS in detox@17.3.6 & react-native-navigation@6.10.1 you can use:

return element(by.id('pop'));

Answer 5

Another way that works is

await element(by.id('header-back')).atIndex(0).tap()

This uses the built in testID that the default back button that comes with react-navigation v5. You may need to mess with the atIndex() number since for me it seems to match 2 back buttons but the first one was the one I was looking for.

Answer 6

the solution was to use traits button as follows:

await element(by.traits(['button'])).atIndex(0).tap();