32522

Detox, multiple elements were matched for button in transition

Question:

I am using detox e2e for creating test cases for my react-native application. Long story short, I have a button inside of my component's render function and that button transitions from left to right. I have given a unique test id to that button. Inside my test case i'm expecting that button to appear using its test id. But when I run "detox test", the test fails and error says that the multiple elements were matched against that test id. Code for my test file is :

describe('Login flow', () => { // test case for wallet generation it('should generate new wallet', async () => { await expect(element(by.id('WelcomeScreen'))).toBeVisible() await expect(element(by.id('WelcomeScreenCreateWalletButton'))).toBeVisible() }) })

and code for my button inside render function is:

<Transition appear="horizontal"> <View style={styles.buttonContainer}> <Button text={I18n.t('create-wallet')} onPress={this.createWallet} style={[styles.button, styles.topButton]} testID="WelcomeScreenCreateWalletButton" /> <Button text={I18n.t('restore-wallet')} transparent onPress={this.restoreWallet} style={styles.button} shared={'button'} testID="WelcomeScreenRestoreWalletButton" /> </View> </Transition>

Inisde my test case i'm expecting button with testid "WelcomeScreenCreateWalletButton" to be visible. If I remove transition tags from the render function of my component, then the test runs successfully and passes. So apparently there's some problem with the transition of the button. I've read that detox's idle state synchronization handles the animation problems. I don't know what i am missing :/. P.S. please ask for any more details if something is not clear in my question before downvoting it.

Answer1:

So, apparently this particular issue was introduced by react-native-fluid-navigation which make transitions by duplicating items. I was using it for the transition of buttons from left to right. The simple solution was to use the second item and perform actions on it. The code that works is as follow:

describe('Login flow', () => { // test case for wallet generation it('should generate new wallet', async () => { await expect(element(by.id('WelcomeScreen'))).toBeVisible() await expect(element(by.id('WelcomeScreenCreateWalletButton')).atIndex(1)).toBeVisible() }) })

Adding just <strong>atIndex(1)</strong> solved the problem.

Recommend

  • Global Variables vs. Local Variables
  • How to get message from GCM message body in android?
  • Transaction ID for google play to transfer app to another account
  • How do i create a user without password in oracle 10g?
  • Scala Slick Database Views
  • Get Users in Group from Azure AD via Microsoft Graph
  • G1 Collector not doing full GC
  • overlapping appointments using the entity framework
  • Is an if-let or a normal if condition better?
  • Run EF6 Query in separate Thread on WinForm Button Click Event
  • Creating My Symmetric Key in C#
  • Exception HRESULT: 0x800455BC in speech recognition in Windows phone 8
  • (Play 2.5) How do you define json format for type alias of an Option?
  • matching similar elements in between two lists
  • is there a way to update filter with async data
  • Authentication failed with Azure Active Directory in Windows Phone
  • In loopback documentation what does variable 'cb' stands for?
  • ThreadStatic in asynchronous ASP.NET Web API
  • SetWindowsHookEx does not react on media keys
  • Eloquent paginate function in Slim 3 project using twig
  • Allowing both email and username for authentication
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Transpose CSV data with awk (pivot transformation)
  • Benchmarking RAM performance - UWP and C#
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Acquiring multiple attributes from .xml file in c#
  • Why joiner is not used after Sequence generator or Update statergy
  • coudnt use logback because of log4j
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • Bitwise OR returns boolean when one of operands is nil
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Android Heatmap on canvas or ImageView
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal