Verifying text content in an input field using Protractor

I am currently working on a basic protractor test to verify if a specific input tag contains text after a button is clicked. After trying various methods, I am now attempting to utilize protractor.ExpectedConditions to validate the presence of text. Below is the code snippet:

it("should click submit", function() {
    var EC = protractor.ExpectedConditions;
    var status = element(by.id('status'));
    $("#btnSubmitQuery").click();
    var condition = EC.textToBePresentInElement(status, 'C');
    browser.wait(condition, 8000, "Text is still not present");
    status.getText().then(function (text) {
        console.log(text);
    });
});

Upon clicking btnSubmitQuery, a REST call is sent to the server. However, the issue I am facing is that I cannot retrieve any value for 'status'. When the code is executed, the browser halts for 8 seconds and then closes, despite the text being visible in the element. No data is displayed on the console. Any suggestions?

EDIT: The HTML element I am inspecting appears as follows:

<td><input id="status" type="text" class="form-control" placeholder="PaxStatus ..." value="{{paxInformation.status}}"ng-readonly="true"></td>

Answer №1

To enhance @maurycy's response, there is a specific Expected Condition already available for this scenario:

var EC = protractor.ExpectedConditions;
browser.wait(EC.textToBePresentInElementValue(status, 'C'), 5000)

Answer №2

Do you think it should look more like this?

checkCondition = function () {
  return status.getAttribute('value').then(function (value) {
    return value.length > 0
  })
};
browser.wait(checkCondition, 8000, "Text is still not visible").then(function () {
  status.getAttribute('value').then(function (text) {
    console.log(text);
  })
});

Answer №3

This is the code snippet that I currently have in place:

var EC = protractor.ExpectedConditions;
var textCheck = browser.wait(EC.textToBePresentInElementValue(status, 'C'), 5000)

return browser.wait(textCheck, 5000).catch(() => { 
throw new Error('The expected text is not yet visible');});

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

Asynchronous Middleware in ExpressJS Routing

I'm having trouble implementing a middleware in Express. Whenever I make a request, I end up with infinite loading times. I've searched on various platforms but couldn't find any examples that utilize an async await middleware stored in a se ...

The Jquery tooltip feature consistently displays the title of the header as the tooltip

Currently, I am utilizing the default Jquery tooltip library, and it functions wonderfully with one exception. In Firefox, the tooltip always displays the title of the page (within <head>). For example: <title>My Title</title></head> ...

The Element Ui component fails to update when the prop of the Vue component changes

In my project, I have a parent component and several child components which all make use of the same prop. This prop is an array of keys that are used for a dropdown menu in element.js. Initially, when the children render for the first time, they do not co ...

What is the best way to incorporate a rectangle or arrow into my canvas design?

Looking for a way to enhance my html canvas wind direction code, here is how it currently looks: var x, y, r, ctx, radians; ctx = window.compass.getContext("2d"); radians = 0.0174533 * (10 - 90); x = ctx.canvas.width / 2; y = ctx.canvas.height / ...

Is it possible to simultaneously use two $scoped variables within an Angular controller?

Currently, I am developing an angular application that connects to a Rails backend and interacts with the database through API calls to receive JSON objects. My challenge lies in defining multiple scoped variables within a controller. At the moment, I have ...

Utilizing a custom filter for object manipulation within Vuetify's v-autocomplete

When using vuetify v-autocomplete with an object where the object consists of Key-Value pairs, the search functionality is based on the item-text. In my example, I am displaying the object as {1200-Chloride Systems}. Is it possible to make the search funct ...

Issue with retrieving POST body from Ajax call in Play Framework

I am currently attempting to send a POST request to my backend using JSON data. The frontend call appears like this: function register() { var user = $("#form_reg_username").val(); var pass = $("#form_reg_password").val(); var referal = $("#form_reg ...

Transferring a zipped file from the backend of SailsJS to the frontend of React Redux via

My SailsJS Backend is responsible for generating a zip File when requested by my React App with Redux on the Frontend. I am utilizing Sagas for asynchronous calls and fetch to make the request. In the backend, I have attempted various methods such as: //z ...

Exploring ways to replicate the functionality of Gmail's Contact manager

Looking to develop a contact manager similar to Gmail's interface. While I have a basic understanding of AJAX and some experience with jQuery, my JavaScript skills are limited. Any suggestions for books or blogs to improve them would be welcome. Tha ...

Learning to transform EST time data into local time within JavaScript utilizing moment.js and Date objects

The recorded date and time is "03/19/2020 13:15:00" in Eastern Standard Time (EST). When attempting to convert it to the local timezone, I have tried various methods, such as using moment.js to change the format from 'MM/DD/YYYY HH:mm:ss' to UT ...

Prevent automatic scrolling by clicking when you reach the bottom

In order to replicate the issue I am experiencing, please click on the down button four times, and then click on the up button. You will observe that you need to click the up button one extra time for it to function properly. How can I detect when it has r ...

When executed on the node REPL, lodash.sortBy will update the lodash value

When I access the node REPL, the following happens: > _ = require('lodash'); > // it displays the whole lodash object > _.sortBy(['1234', '123'], function (element) { return element.length; }); > [ '123&apos ...

Guide to sending a POST request from within my application

I'm facing an issue with using $resource for making a post request in my app. Here is the code snippet from my Angular module: angular.module('myApp').factory('Product', ['$resource', function ($resource) { ...

Issue for Codepen/JS beginners: Uncaught ReferenceError - 'exports' variable is undefined

After getting a Pen directly from the tutorial, I noticed it included some external scripts: https://unpkg.com/react/umd/react.development.js https://unpkg.com/react-dom/umd/react-dom.development.js The initial code snippet I tried worked smoothly: const ...

"Create a function that allows for the dynamic addition of elements to a

I want to dynamically add more li elements, similar to the first one, by simply clicking a button. Unfortunately, the example provided on jsfiddle is not functioning as intended. document.onload = init; function init(){ document.getElementById('a ...

Challenges with loading content and async JavaScript within websites

I decided to replace the content on index.htm with the content from project.htm. By clicking on a#front, it redirects to project.htm and dynamically updates the content. However, I am facing an issue regarding how to run the javascript that accompanies thi ...

Can a valid HTML structure be reconstructed from a fragment?

Imagine you have just <td>text<td></tr>. Clearly, by itself, it is not considered valid HTML (and neither is just <td>...</td>). Is there a simple method to reconstruct a valid HTML structure from this fragment? It should lo ...

Passing JSON information from a website to a Node.js server

<script type="text/javascript" src="data.json"></script> var mydata = JSON.parse(data); data = '[{"yer" : "Besiktas", "lat" : "41.044161", "lng" : "29.001056"},{"yer" : "Eminönü", "lat" : "41.017513", "lng" : "28.970939"},{"yer" : "Zeyt ...

Utilizing Font Awesome icons within a JSON structure

I'm running into a bit of trouble trying to display font awesome icons. The text is written in json using a rakefile, and I'm attempting to insert a font awesome icon within the text. However, I'm facing difficulties because the text is in j ...

The function `Object.entries().map()` in TypeScript does not retain the original data types. What changes can I make to my interface to ensure it works correctly, or is there a workaround

Working with this interface: export interface NPMPackage { name: string; description: string; 'dist-tags': { [tag: string]: string; }; versions: { [version: string]: { name: string; version: string; dependencie ...