Search code examples
iosreact-nativedetox

React Native detox record user interactions for test script

I'm using detox to test a react native app in iOS. (Detox is written on top of EarlGrey).

I prefer to use Detox's by.id matcher which uses React Native's testID (iOS's accessibility ID)

What I am having trouble with is the amount of time it takes to find the proper testIDs on each page in my app to write the test cases. Is there a way to record my user interactions so that I can quickly generate a detox test script? I'm largely in the simulator clicking on various buttons. Alternatively is there a way to quickly view testIDs in the react native app while it is running?

I have tried the following which I find very slow:

  1. When a detox test case fails it prints an error log with the UI hierarchy in the log. While helpful I find this a slow way to find test IDs.
  2. The React Native inspector lets me view various UI elements by clicking them on the page. Unfortunately it does not list testID so I have to scan through the code to see what value is being passed as testID.
Solution

  • Is there a way to record my user interactions so that I can quickly generate a detox test script?

    - Not as far as I know

    You can try react-devtools to find testIDs.

    https://github.com/facebook/react-devtools

    npm i -g react-devtools

    After installing run react-devtools in terminal.

    react-devtools

    You still need to Toggle Inspector, but you will now be able to use React Developer Tools UI to explore React DOM tree like this:

    password input example