Mocha struggles to locate the ID within an input field - react-native

I am attempting to retrieve the text of an input using the .text() method in Selenium. However, every time I try to locate the element, it says that the specified ID was not found.

(I am working with the Input component from NativeBase, but I have also tested it with the TextInput native component)


<Form>
    <Item testID='input_nomePaciente_formPacientes' stackedLabel>
        <Label style={styles.label}>Nome</Label>
        <Input 
            value={this.state.paciente.nome.toUpperCase()}
            style={styles.inputForm}
            testID='input_testID'
            autoCorrect={false}
            keyboardType={(Platform.OS === 'android') ? 'visible-password' : ''}
            autoCapitalize='none'
            onChangeText={(text) => this._updateItem('nome', text, 0)} />
    </Item>

While I can use sendKeys() and click() on the Item with the specified testID, I am unable to interact with anything inside the input field. Additionally, I cannot access the value within the field using the Item's testID.

This is how I am trying to retrieve the output:


let testID = await driver.elementByAccessibilityId("input_testID");
let testIDValue = await testID.text();

console.warn(testIDValue);

Answer №1

It turns out that when using mocha/selenium, imported nativebase components cannot be found. I attempted to access the input through a native component and surprisingly, it worked perfectly fine.

The following code snippet works like a charm:

<Label style={{ marginLeft: 10 }}>Login</Label>
      <TextInput // react-native input component
          autoCapitalize='none'
          testID='input_login'
          editable={true}
          autoCorrect={false}
          keyboardType={(Platform.OS === 'android') ? 'visible-password' : ''}
          onChangeText={(item) => this.setState({ login: item })}
          value={this.state.login} 
       />

No matter how hard you try, this code snippet won't work:

<Form>
      <Item
           testID='input_nomePaciente_formPacientes'
           stackedLabel>
           <Label style={styles.label}>Nome</Label>
           <Input // nativebase input component
              value={this.state.paciente.nome.toUpperCase()}
              style={styles.inputForm}
              testID='input_testID'
              autoCorrect={false}
              keyboardType={(Platform.OS === 'android') ? 'visible-password' : ''}
              autoCapitalize='none'
              onChangeText={(text) => this._updateItem('nome', text, 0)} />
      </Item>
</Form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Situation: I want to create a Zingchart graph from a CSV file containing 37 columns. The header in the CSV file will be used as the legend for the graph. Issue: When I define less than 10 elements in the header (including the X-axis name), everything wo ...

Selenium test is interrupted by a Firefox pop-up blocking part of the screen

After running my test on BrowserStack, I noticed an interesting outcome. Is there a way to disable this particular behavior of Firefox within a selenium test using DesiredCapabilities? I prefer being able to control this behavior through settings rather ...

Combining Vue.js for handling both enter key and blur events simultaneously

I have been working on a solution where pressing the enter key or losing focus on an element will hide it and display a message. However, I am facing an issue where when I press the enter key to hide the element, it also triggers the blur event. I only wan ...

Guide on showcasing the values from two text fields with autocomplete suggestions in a third text field

Hey there, I have a search form that takes values from two text fields and combines them to populate a third text field for querying. <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = password.value +''+ passw ...

Attempting to extract data from a JSON object within a multidimensional array

Looking at the JSON structure that I need to work with: [ { "result":"OK", "message":"Display", "value":200, "rows":29 } , [ { "personID":1, "img_path":"/1234/", "img ...

Initiate a react change event using Appium

I'm currently working on automating a hybrid app that has a login screen implemented as a react web view, and unfortunately, I don't have control over it. The challenge I'm facing is that the Sign-in button remains disabled until something i ...

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

Looking to expand my knowledge in web development, I have a solid understanding of HTML, JS, CSS, and server-side programming. However, the concepts of Nodejs, npm, and Bower are still unclear to me. In order to begin a new project, I created a designated ...

Utilizing AngularJS ng-messages feature across various languages

Utilizing ng-messages to show error messages for form validation in my application. I have a multi-language app, how can I implement ng-messages to support multiple languages? HTML Form <div class="messages" ng-messages="myForm.email.$error"> & ...

Using the mapState function in vuex allows for easy access to Vue methods

I have an important task to complete while the data is being computed using vuex mapState. I must ensure that the vue method countAlerts is called every time the data changes; however, the computed property needs to invoke this method and unfortunately, ...

Is Javascript Functioning Properly?

Similar Question: How do I determine if JavaScript is turned off? Can we identify whether javascript has been disabled and then redirect to a different page? I am currently working on a project using JSPs, where I have integrated various advanced java ...

The function canvas.toDataURL() is not recognized - error originating from a node-webGL wrapper

I am currently working on converting client-side volume rendering code in the browser to server-side rendering using pure JavaScript. On the server side, I am utilizing node-webgl. My objective is to send the server's canvas content to the client so ...

Prevent user input in Vue.js until the value has been modified

Need help handling initial input values: <input type="text" v-model="name" ref="input" /> <button type="submit" :disabled="$refs.input.defaultValue == $refs.input.value">Submit</button> Encountering an error with the disabled binding: C ...

Transforming a JSON object property value from an array into a string using JavaScript

I am facing an issue with an API call I am using, as it is sending objects with a single property that contains an array value (seen in the keys property in the response below). However, I need to work with nested arrays in order to utilize the outputted v ...

How can express.js be properly installed using typescript?

Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...

Retrieving ID of an element to be animated with jQuery

I have a sprite image that changes background position when hovered over, and while it's currently working, I'm looking for a more efficient way to achieve this. I need to apply this effect to several images and am exploring ways to avoid duplica ...

Tips for effectively managing asynchronous tasks

I keep getting different numbers every time my code runs. Can you tell me if I'm doing this the right way? Here's the code: export class GetPlanetsService { url='https://swapi.co/api/planets/?page='; planets:Planet[]=[]; headers: ...

Retrieve the Corresponding Content Inside the Div Element

I have a div with text that needs to be matched with comma-separated values: <div class="val"> This is paragraph 1 </div> <div class="val"> This is paragraph 2 </div> Using an Ajax call, I retrieve the ...

How can multiple functions be grouped and exported in a separate file in Node.js?

Is there a way to consolidate and export multiple functions in nodejs? I want to gather all my utility functions in utils.js: async function example1 () { return 'example 1' } async function example2 () { return 'example 2' } ...

Display the preloaded element as the first item using Javascript

Is there a way to prioritize the loaded elements using JavaScript? I have an array of elements that I pass to a function and make an AJAX call. While the data is loading, I display a loader (.gif). I want to ensure that the loaded elements are shown first ...

Using jQuery to load and parse a JSON file stored on a local system

I am a beginner in scripting languages and recently searched for ways to load and parse JSON files using jQuery. I found helpful resources on Stack Overflow. The JSON file I am working with is called new.json. { "a": [ {"name":"avc"}, ...