如何在 Detox 测试中从 RNN 识别导航选项卡按钮

Question

我正在尝试在我的项目中实施一些 Detox 测试，但在从一个屏幕导航到另一个屏幕时遇到了一些问题。基本上，我尝试创建一个脚本来关闭上述启动画面，但我不知道如何识别标签栏按钮“关闭”。

//test.e2e.js
describe('Login', () => {
  it('Should open a splash screen', async () => {
    await device.reloadReactNative();

    await expect(element(by.text('THIS IS A SPLASH SCREEN'))).toBeVisible();
  });

  it('Should close splash screen', async () => {
    await expect(element(by.id('close'))).toBeVisible();
    await element(by.id('close')).tap();

    await expect(element(by.text('Login'))).toBeVisible();
  });
})

关于导航道具，我已经把道具 testID: 'close' 像这样：

static async showModal({ options }) {
  await ReactNativeNavigation.showModal({
  stack: {
      children: [
        {
          component: {
            name: 'Splash Screen',
            },
            options: {
              topBar: {
                leftButtons: [
                  {
                    id: 'close',
                    testID: 'close',
                    icon: dismissIcon, // Its a 'X' image
                    color: 'white',
                  },
                ],
                backButton: { visible: false },
              },
              ...options,
            },
          },
        },
      ],
    },
  });
}

但是当我尝试运行测试时，它显示以下错误：

Test Failed: 'at least 75 percent of the view's area is displayed to the user.' doesn't 
match the selected view.
Expected: at least 75 percent of the view's area is displayed to the user.
     Got: null

   8 | 
   9 |   it('Should close splash screen', async () => {
> 10 |     await expect(element(by.id('close'))).toBeVisible();
     |                                           ^
  11 |     await element(by.id('close')).tap();
  12 | 
  13 |     await expect(element(by.text('Login'))).toBeVisible();

  at _callee2$ (login.test.e2e.js:10:43)
  at tryCatch (../node_modules/regenerator-runtime/runtime.js:63:40)
  at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:293:22)
  at Generator.next (../node_modules/regenerator-runtime/runtime.js:118:21)
  at tryCatch (../node_modules/regenerator-runtime/runtime.js:63:40)
  at invoke (../node_modules/regenerator-runtime/runtime.js:154:20)
  at ../node_modules/regenerator-runtime/runtime.js:189:11
  at callInvokeWithMethodAndArg (../node_modules/regenerator-runtime/runtime.js:188:16)
  at AsyncIterator.enqueue (../node_modules/regenerator-runtime/runtime.js:211:13)
  at AsyncIterator.next (../node_modules/regenerator-runtime/runtime.js:118:21)

这是我的splash screen and the log

Answer 1

我已经使用排毒记录仪解决了这个问题。 https://github.com/wix/DetoxRecorder.

使用记录器，我获取了脚本流程和测试用例中使用的相同脚本。它开始工作正常。

如何在 Detox 测试中从 RNN 识别导航选项卡按钮

How to identify a navigation tab button from RNN in a Detox test

automated-tests

splash-screen

react-native

react-native-navigation

detox