使用 react-navigation 和 react-native-fluid-transitions 进行排毒 e2e 测试 - 期望 .toBeVisible 失败

Posted 2023-04-15

技术标签:

【中文标题】使用 react-navigation 和 react-native-fluid-transitions 进行排毒 e2e 测试 - 期望 .toBeVisible 失败【英文标题】：Detox e2e testing with react-navigation and react-native-fluid-transitions - expect .toBeVisible failing 【发布时间】：2019-04-27 21:14:48 【问题描述】：

我有一个 detox e2e 测试来测试从我的应用程序启动到登录的流程。

我的应用以启动画面开始。然后它会加载我的 StackNavigator，其第一个元素是来自 react-native-fluid-transitions 库的 FluidNavigator。

测试失败并出现无法通过我的元素断言的错误：

    Failed: [Error: Error: An assertion failed.

    Exception with Assertion: 
      "Assertion Criteria":  "assertWithMatcher:matcherForSufficientlyVisible(>=0.750000)",
      "Element Matcher":  "((!(kindOfClass('RCTScrollView')) && (respondsToSelector(accessibilityIdentifier) && accessibilityID('signInOrRegisterPage'))) || (((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches(kindOfClass('RCTScrollView'))) && ((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches((respondsToSelector(accessibilityIdentifier) && accessibilityID('signInOrRegisterPage'))))))"
    


    Error Trace: [
      
        "Description":  "Assertion with matcher [M] failed: UI element [E] failed to match the following matcher(s): [S]",
        "Description Glossary":    
          "M":  "matcherForSufficientlyVisible(>=0.750000)",
          "E":  "<RCTView:0x7fb63252a270; AX=N; AX.id='signInOrRegisterPage'; AX.label='Welcome to the CompCare Member App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>",
          "S":  "matcherForSufficientlyVisible(>=0.750000)"
        ,
        "Error Domain":  "com.google.earlgrey.ElementInteractionErrorDomain",
        "Error Code":  "3",
        "File Name":  "GREYAssertions.m",
        "Function Name":  "+[GREYAssertions grey_createAssertionWithMatcher:]_block_invoke",
        "Line":  "75"
      
    ]

这是我的 e2e 测试：

describe('Login with Pin', () => 
  beforeEach(async () => 
    await device.reloadReactNative();
  );

  it('should show the Sign In Or Register page', async () => 
    await expect(element(by.id('signInOrRegisterPage'))).toBeVisible();
  );

  it('should show the register button and the sign in button', async () => 
    await expect(element(by.id('btnRegisterForApp'))).toBeVisible();
    await expect(element(by.id('btnSignIn'))).toBeVisible();
  );

  it('should navigate to the sign in page', async () => 
    await element(by.id('btnSignIn')).tap();
    await expect(element(by.id('signInPage'))).toBeVisible();
  );

  it('should show the pin input keypad', async () => 
    await expect(element(by.id('pinInputKeypad'))).toBeVisible();
  );

  it('should show the dashboard after entering a series of digits', async () => 
    await element(by.id('testInput1')).tap();
    await element(by.id('testInput9')).tap();
    await element(by.id('testInput6')).tap();
    await element(by.id('testInput0')).tap();
    //await expect(element(by.id('dashboard'))).toBeVisible();
  );
)

我尝试使用 detox 的 await device.disableSynchronization();，然后使用 await waitFor(element(by.id('signInOrRegisterPage'))).toBeVisible().withTimeout(2000);。那也没用。

这是我的更多代码，以防有帮助：

App.js

import React,  Component  from 'react';
import SplashScreen from 'react-native-splash-screen';
import  View  from 'react-native';

import StackNavigator from './components/StackNavigator';

export default class App extends Component 

  componentDidMount() 
    SplashScreen.hide();
  

  render() 
    return (
        <StackNavigator />
    );

我的 StackNavigator.js

的基础知识

const StackNavigator = createStackNavigator(
  
    FluidTransitionNavigator: 
      screen: FluidTransitionNavigator
    ,
    Dashboard: 
      screen: Dashboard
    
  ,
  
    initialRouteName: 'FluidTransitionNavigator',
    headerMode: 'float',
    navigationOptions: (props) => (
      header: renderHeader(props)
    ),
    // transitionConfig: transitionConfig
  
);

我的 FluidTransitionNavigator 的基础知识：

const FluidTransitionNavigator = FluidNavigator(
  SignInOrRegister: 
    screen: SignInOrRegister
  ,
  Login: 
    screen: Login
  
);

我的 SignInOrRegister 页面：

class SignInOrRegister extends Component 
  onRegisterPress() 
  

  onSignInPress() 
    this.props.navigation.push('Login');
  

  render() 
    return (
      <View style=styles.mainViewStyle testID='signInOrRegisterPage'>

        <Transition appear="horizontal">
          <View style= flex: 1, zIndex: 2>
            <Text style=styles.welcomeTextStyle>Welcome to the App</Text>
            <View style=styles.logoViewStyle>
              <Image
                source=require('./images/Logo.png')
                style=styles.logoStyle
              />
            </View>
            <Text style=styles.instructionTextStyle>
              I just installed the app.
            </Text>
            <UniButton testID='btnRegisterForApp' style= marginTop: 10  type='primary' label='Register for App' onPress=this.onRegisterPress.bind(this) />
            <UniButton testID='btnSignIn' style= marginTop: 30, zIndex: 10  type='secondary' label='I just want to Sign In' onPress=this.onSignInPress.bind(this) />
          </View>
        </Transition>

        <Transition shared="brand_btm">
          <View style=styles.brandingImageViewStyle>
            <BrandingBottom />
          </View>
        </Transition>
      </View>
    );

我还尝试从我的 SignInOrRegister 组件中删除 Transition 元素：

render() 
    return (
      <View style=styles.mainViewStyle testID='signInOrRegisterPage'>

        /* <Transition appear="horizontal"> */
          <View style= flex: 1, zIndex: 2>
            <Text style=styles.welcomeTextStyle>Welcome to the CompCare Member App</Text>
            <View style=styles.logoViewStyle>
              <Image
                source=require('./images/Logo.png')
                style=styles.logoStyle
              />
            </View>
            <Text style=styles.instructionTextStyle>
              I just installed the app.
            </Text>
            <UniButton testID='btnRegisterForApp' style= marginTop: 10  type='primary' label='Register for App' onPress=this.onRegisterPress.bind(this) />
            <UniButton testID='btnSignIn' style= marginTop: 30, zIndex: 10  type='secondary' label='I just want to Sign In' onPress=this.onSignInPress.bind(this) />
          </View>
        /* </Transition> */

        /* <Transition shared="brand_btm"> */
          <View style=styles.brandingImageViewStyle>
            <BrandingBottom />
          </View>
        /* </Transition> */
      </View>
    );

但我的测试仍然失败。

这是整个视图层次结构：

Hierarchy: <UIWindow:0x7fb6326273e0; AX=N; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |--<RCTRootView:0x7fb632519780; AX=N; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |--<RCTRootContentView:0x7fb634a00450; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |--<RCTView:0x7fb632530950; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |--<RCTView:0x7fb63252ef50; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |--<RCTView:0x7fb63252e960; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |--<RCTView:0x7fb63252e390; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |--<RCTView:0x7fb63252d340; AX=N; AX.frame=0, 0, 375, 64; AX.activationPoint=187.5, 32; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 64; opaque; alpha=1>
      |  |  |  |  |  |  |  |--<RCTView:0x7fb63252ced0; AX=N; AX.frame=-375, 0, 375, 64; AX.activationPoint=-187.5, 32; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=-375, 0, 375, 64; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252ca60; AX=N; AX.frame=-375, 0, 375, 64; AX.activationPoint=-187.5, 32; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 64; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252b8f0; AX=N; AX.frame=-375, 20, 375, 43.5; AX.activationPoint=-187.5, 41.75; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 20, 375, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |--<RCTView:0x7fb634b02770; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |  |--<RCTView:0x7fb634a02910; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |--<RCTView:0x7fb634a02610; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb634a01240; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632536870; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=0; UIE=N>
      |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632536260; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 50, 375, 617; AX.activationPoint=187.5, 358.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 50, 375, 617; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632533f30; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 50, 375, 617; AX.activationPoint=187.5, 358.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 617; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632532ed0; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 50, 375, 617; AX.activationPoint=187.5, 358.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 617; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632532900; AX=Y; AX.label='I just want to Sign In'; AX.frame=0, 384.5, 375, 43.5; AX.activationPoint=187.5, 406.25; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 334.5, 375, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6325322e0; AX=N; AX.label='I just want to Sign In'; AX.frame=85.5, 384.5, 204, 43.5; AX.activationPoint=187.5, 406.25; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=85.5, 0, 204, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632531e70; AX=Y; AX.label='I just want to Sign In'; AX.frame=106.5, 395.5, 163, 22; AX.activationPoint=188, 406.5; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=21, 11, 163, 22; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632531860; AX=Y; AX.label='Register for App'; AX.frame=0, 311, 375, 43.5; AX.activationPoint=187.5, 332.75; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 261, 375, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632524d20; AX=N; AX.label='Register for App'; AX.frame=100.5, 311, 174, 43.5; AX.activationPoint=187.5, 332.75; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=100.5, 0, 174, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb63251b750; AX=Y; AX.label='Register for App'; AX.frame=121.5, 322, 132, 22; AX.activationPoint=187.5, 333; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=21, 11, 132, 22; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632523100; AX=Y; AX.label='I just installed the app.'; AX.frame=0, 279.5, 375, 22; AX.activationPoint=187.5, 290.5; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=0, 229.5, 375, 22; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63251bd20; AX=N; AX.frame=0, 150.5, 375, 114; AX.activationPoint=187.5, 207.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 100.5, 375, 114; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTImageView:0x7fb63251c190; AX=N; AX.frame=49.5, 165.5, 276, 99; AX.activationPoint=187.5, 215; AX.traits='UIAccessibilityTraitImage'; AX.focused='N'; frame=49.5, 15, 276, 99; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632526d30; AX=Y; AX.label='Welcome to the App'; AX.frame=0, 80, 375, 71; AX.activationPoint=187.5, 115.5; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=0, 30, 375, 71; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252ad20; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb63252a890; AX=N; AX.label='Welcome to the CompCare Member App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      +  +  +  +  +  +  +  +  +  +  +  +  +--<RCTView:0x7fb63252a270; AX=N; AX.id='signInOrRegisterPage'; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 0, 375, 667; AX.activationPoint=187.5, 333.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 667; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6348012c0; AX=N; AX.frame=0, 395, 375, 272; AX.activationPoint=187.5, 531; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 395, 375, 272; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6349019d0; AX=N; AX.frame=0, 395, 375, 272; AX.activationPoint=187.5, 531; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 272; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632720000; AX=N; AX.frame=0, 395, 375, 272; AX.activationPoint=187.5, 531; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 272; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb634800d30; AX=N; AX.frame=0, 395, 375, 272; AX.activationPoint=187.5, 531; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 272; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTImageView:0x7fb63271fd20; AX=N; AX.frame=0, 395, 375, 272; AX.activationPoint=187.5, 531; AX.traits='UIAccessibilityTraitImage'; AX.focused='N'; frame=0, 0, 375, 272; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632717e80; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 50, 375, 617; AX.activationPoint=187.5, 358.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 50, 375, 617; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632718cf0; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 50, 375, 617; AX.activationPoint=187.5, 358.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 617; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6327189f0; AX=N; AX.label='Welcome to the App I just installed the app. Register for App I just want to Sign In'; AX.frame=0, 50, 375, 617; AX.activationPoint=187.5, 358.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 0, 375, 617; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb6327186f0; AX=Y; AX.label='I just want to Sign In'; AX.frame=0, 384.5, 375, 43.5; AX.activationPoint=187.5, 406.25; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 334.5, 375, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632529b40; AX=N; AX.label='I just want to Sign In'; AX.frame=85.5, 384.5, 204, 43.5; AX.activationPoint=187.5, 406.25; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=85.5, 0, 204, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb63250ce50; AX=Y; AX.label='I just want to Sign In'; AX.frame=106.5, 395.5, 163, 22; AX.activationPoint=188, 406.5; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=21, 11, 163, 22; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632719c90; AX=Y; AX.label='Register for App'; AX.frame=0, 311, 375, 43.5; AX.activationPoint=187.5, 332.75; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 261, 375, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632719990; AX=N; AX.label='Register for App'; AX.frame=100.5, 311, 174, 43.5; AX.activationPoint=187.5, 332.75; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=100.5, 0, 174, 43.5; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632715c30; AX=Y; AX.label='Register for App'; AX.frame=121.5, 322, 132, 22; AX.activationPoint=187.5, 333; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=21, 11, 132, 22; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb632716a40; AX=Y; AX.label='I just installed the app.'; AX.frame=0, 279.5, 375, 22; AX.activationPoint=187.5, 290.5; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=0, 229.5, 375, 22; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTView:0x7fb632719270; AX=N; AX.frame=0, 150.5, 375, 114; AX.activationPoint=187.5, 207.5; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame=0, 100.5, 375, 114; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTImageView:0x7fb632702a20; AX=N; AX.frame=49.5, 165.5, 276, 99; AX.activationPoint=187.5, 215; AX.traits='UIAccessibilityTraitImage'; AX.focused='N'; frame=49.5, 15, 276, 99; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<RCTTextView:0x7fb6348007e0; AX=Y; AX.label='Welcome to the App'; AX.frame=0, 80, 375, 71; AX.activationPoint=187.5, 115.5; AX.traits='UIAccessibilityTraitStaticText'; AX.focused='N'; frame=0, 30, 375, 71; alpha=1>]

你可以看到我在哪里放置了一排加号来指示它在这个层次结构中找到元素的位置。

【问题讨论】：

我在这里发现了一个类似的问题：***.com/questions/52665147/… 我真的认为我的问题与 react-native-fluid-transitions 有关，但尝试从这个问题的解决方案对我不起作用。 【参考方案1】：

我很确定（但不是 100% 确定）这个问题是由 react-native-fluid-transitions 库引入的。

该库似乎添加了许多包装器来制作动画功能，它还重复视图。这会导致分配了 testID 的元素在层次结构内部很远地呈现并被重复。我通过使用 atIndex(1) 解决了这个问题。

我最终使用了 atIndex(1) 而不是 atIndex(0)，因为它是在尝试执行 tap 时出现的，索引 0 处的元素不是可交互的，但索引 1 处的元素是。

当使用 toBeVisible 期望时，ios 上似乎存在不透明度问题（与 react-native-fluid-transitions 相关），它也可能具有与动画有关。我通过使用 waitFor 和 withTimeout 解决了这个问题。

我在这里打开了一个问题：https://github.com/fram-x/FluidTransitions/issues/138

it('should show the Sign In Or Register page', async () => 

  await waitFor(element(by.id('signInOrRegisterPage')).atIndex(1)).toBeVisible().withTimeout(2000);
);

it('should show the register button and the sign in button', async () => 

  await waitFor(element(by.id('btnRegisterForApp')).atIndex(1)).toBeVisible().withTimeout(2000);
  await waitFor(element(by.id('btnSignIn')).atIndex(1)).toBeVisible().withTimeout(2000);

  await element(by.id('btnSignIn')).atIndex(1).tap();
);

我真的希望这对 react-native-fluid-transitions 库的开发人员以及其他任何使用 detox 的人都有用。

【讨论】：

我收到了来自贡献者关于 react-native-fluid-transitions 对我的问题单的答复：FluidTransitions 创建所有过渡元素的副本并运行在单独的叠加层中转换，这可能是它失败的原因。

以上是关于使用 react-navigation 和 react-native-fluid-transitions 进行排毒 e2e 测试 - 期望 .toBeVisible 失败的主要内容，如果未能解决你的问题，请参考以下文章

React Native - 使用 react-navigation 和 react-redux 在屏幕之间切换时数据丢失

使用 react-navigation 时不发送 redux 状态

使用带有 Redux 和 Firebase 身份验证的 React-Navigation v5

使用 React-Navigation 的类型安全的 navigationHandler

react-navigate 中动态选择初始路由名称

我需要下载 react-navigation 并使用命令 npm i @react-navigation/native 并显示错误