How to tap backbutton arrow created by react navigation ?

[lisa-gogo]

Description

There are two buttons on this page.
One is on the top-left, which was created by react-navigation.
One is just 'confirmation' button.
I trying tapping the first top back button.

I use the code

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

not working, no match element for 'header-back;

I then use the code

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

not working too, it clicks 'confirmation button ' on the button page. not the top back button I want.

Your environment

Detox version:
React Native version:
Node version:
Device model:
OS:
Test-runner (select one): jest-circus / jest+jasmine / mocha / other

[d4vidi]

@lisa-gogo please share your solution, if you have one 🙏🏻

[lisa-gogo]

@d4vidi sorry
you can use

 await element(by.id('gobackbutton')).atIndex(X).tap();

'gobackbutton' is the testid of the go back arrow.

[lisa-gogo]

Another solution I use is that I use multiple describe in one single e2e.js file.
if will restart the whole app when one test finish, so I don't need to click go back.

/*eslint-disable*/
describe('Example', () => {
  beforeEach(async () => {
    // await device.reloadReactNative();
  });

  beforeAll(async () => {
    //await device.launchApp();
    await device.launchApp({permissions: {notifications: 'YES'}, newInstance: true});
  });
 
  it('delete account',async()=>{
    await element(by.text('testButton')).tap();
    await element(by.text('Settings')).tap();
  
    }

})

}) 

/*eslint-disable*/
describe('Example', () => {
  beforeEach(async () => {
    // await device.reloadReactNative();
  });

  beforeAll(async () => {
    //await device.launchApp();
    await device.launchApp({permissions: {notifications: 'YES'}, newInstance: true});
  });
 
  it('delete account',async()=>{
    await element(by.text('testButton')).tap();
    await element(by.text('Settings')).tap();
  
    }

})

}) 

[d4vidi]

Thanks, that's a good reference to have. In any case, there's always device.pressBack().

[nero2009]

device.pressBack() only works on android. Please is there a solution for ios

[d4vidi]

device.pressBack() only works on android. Please is there a solution for ios

It's written in this very issue. Have a look.

[nero2009]

device.pressBack() only works on android. Please is there a solution for ios

It's written in this very issue. Have a look.

@d4vidi
await element(by.id('gobackbutton')).atIndex(X).tap(); doesn't work

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

works but it is very brittle because I might have multiple buttons and the back button is not the first button on the screen.

Or is there any other solution that I missed

[jogyfelix]

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

This works for me as right swipe does the job of a back button in iOS.

[tranquanghuy0801]

I tried all of the above and it did not work.

Just in case anyone came across this, you can set custom testID by setting headerBackTestID in StackNavigatorOptions. I found when I dig into the source code to set this element react-navigation/react-navigation@d818f3d

[johanndeswardt]

I tried all of the above and it did not work.

Just in case anyone came across this, you can set custom testID by setting headerBackTestID in StackNavigatorOptions. I found when I dig into the source code to set this element react-navigation/react-navigation@d818f3d

THANK YOU @tranquanghuy0801 - You are a ⭐

[bnchdrff]

In case anyone is using Maestro, I've also found that the headerBackTitle is accessible to the test driver even if headerBackTitleVisible is set to false. This means you can set the title to a string ("Back" or whatever) and you can tapOn: 'Back' in your test.

[lelukas]

I tried all of the above and it did not work.

Just in case anyone came across this, you can set custom testID by setting headerBackTestID in StackNavigatorOptions. I found when I dig into the source code to set this element react-navigation/react-navigation@d818f3d

Hey, could you give me an example of this? Where should I add this property exactly?

[tranquanghuy0801]

I tried all of the above and it did not work.
Just in case anyone came across this, you can set custom testID by setting headerBackTestID in StackNavigatorOptions. I found when I dig into the source code to set this element react-navigation/react-navigation@d818f3d

Hey, could you give me an example of this? Where should I add this property exactly?

You can set the value for headerBackTestID for the stack navigation options. Example is given below, this will be passed to screenOptions props of Stack.Navigator component

export const customStackNavigationOptions: StackNavigationOptions = {
    headerBackTestID: 'header-back',
    ....
};