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

Modify the value of a variable inside another {{variable}} (not sure what it's called)

I am looking to update the variable "prefs" to reflect either "easy, medium, or hard" options based on user interaction. For instance: THIS {{choice.prefs.title}} NEEDS TO BE UPDATED TO {{choice.easy.price}} or {{choice.medium.price}} or {{choice.hard. ...

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

What could be causing "Unknown property" errors when using unicode property escapes?

The MDN website provides examples of matching patterns with unicode support, such as: const sentence = 'A ticket to 大阪 costs ¥2000 ...

Retrieve information from both the client and server sides within NextJS

Looking to integrate a third-party API for data fetching in certain components within my NextJS project. The goal is to have the server pre-render these components with the API for optimal SEO benefits, but also enable client-side fetching of component pro ...

Creating a paginated table with Nextjs, Prisma, and SWR: A step-by-step guide

I am attempting to set up a paginated table utilizing Nextjs, Prisma, and SWR. The table will display a list of invoices sorted by their ID. Here is an example of what it would look like: https://i.sstatic.net/WymoH.png To fetch all the data to the api r ...

continuously press secret button with selenium

I am encountering an issue with the display of listings on a web page, specifically regarding the functionality of the “Apply Now” button. The problem arises when I try to click on the button for the first listing and then proceed to fill out a dialog ...

Assigning specific class names to elements within an array using JavaScript

Currently, I'm attempting to assign a unique className to option elements within a select element by utilizing a conditional if statement. The goal is to apply one class name to the first half of the array and a different class name to the second half ...

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

I am looking to optimize my WordPress posts to load in increments as the user scrolls down the page, similar to how Facebook does

I am looking to implement a feature on my WordPress post where the content loads a few at a time as the user scrolls, similar to Facebook. Specifically, I would like my webpage to automatically load 10 posts and then continue loading 10 more as the user re ...

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

Navigate to a particular section in the webpage

There are a few div elements with the class .posts that each have an attribute data-id which corresponds to the ID in a MySQL database. <div class="posts" data-id="1"></div> <div class="posts" data-id="2"></div> If I want to scrol ...

Methods for resolving a ViewStyle typescript issue in react native

Trying to pass a width parameter into StyleSheet is causing an error like this: <View style={styles.children(width)}>{children}</View> Here's how I'm trying to use it: const styles = StyleSheet.create({ modalContent: { flex: ...

Executing JavaScript when a specific portion of a webpage loads in the presence of AJAX: A guide

As I tackle a project that involves loading elements via AJAX within a CMS-type software, I find myself restricted in accessing the AJAX code and its callbacks. One specific challenge I face is running my function only when a certain part of the page is l ...

Working with node.js to set up an ordering function

I am working with node.js and express3. To use mongodb, I decided to install the mongo-lazy package. This is the simple GET router I have set up: var db = require('mongo-lazy').open({ db: 'somedb', host: '127.0.0.1' ...

Having trouble getting ngAnimate to work properly?

I am facing an issue with ngAnimate dependency injection. For some reason, whenever I add ngAnimate as a dependency in my JavaScript code, it does not seem to work. It's definitely not the script... Here is the HTML code snippet: <!doctype html& ...

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

Implementing V-model within an iteration

I am encountering an issue while trying to utilize v-model within a v-for loop, resulting in an error message. Is there a solution to make this functionality work properly? <ul class=""> <li class="" v-model="category.data" v-for="category in ...

Bundling and minifying Angular2 assets

In the world of ASP.NET (or gulp), bundling and minification are taken care of. However, a different issue arises when following Angular2 tutorials: the view HTML is typically embedded within the component itself. Fortunately, there is a way to separate th ...

Using AngularJS to dynamically update the DOM with the response from a service method

Here's the HTML code: <div ng-controller="AutoDeployController as autoDeploy"> <input type="text" ng-model="autoDeploy.message"> <p>Message: {{ autoDeploy.message }}</p> </div> <button ng-click="autoDeploy.chan ...