Input field visibility issue with Protractor element

Hello, I am facing an issue where I keep receiving the message "element not visible" in protractor. All I want is for it to locate the input field and sendKeys to it, but it is not functioning as expected. The entire project site is built using AngularJS and I have already set browser.ignoreSynchronization = true; Any suggestions on how to resolve this?

HTML Code

input parse-search-query="" type="text" tabindex="1" name="search_query" autocomplete="off" placeholder="Search by City ST, Zip, or Address" data-ng-model="searchQueryFieldCtrl.searchFormController.searchParams.search_query" data-ng-change="searchQueryFieldCtrl.searchFormController.clearErrors()" data-focus-on="focusQuery || form.search_query.$error" data-uib-typeahead="suggestion as suggestion.label for suggestion in searchQueryFieldCtrl.getSuggestions($viewValue)" data-typeahead-focus-first="false" data-typeahead-min-length="0" data-typeahead-wait-ms="300" data-typeahead-on-select="searchQueryFieldCtrl.setSearch($item)" class="ng-pristine ng-untouched ng-valid ng-scope" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-69-869">

spec.js

describe('New stack homepage test', function() {
  it('should test search form', function() {

    browser.ignoreSynchronization = true;


  var flow = protractor.promise.controlFlow();
  function waitOne() {
    return protractor.promise.delayed(3000);
  }

  function sleep() {
    flow.execute(waitOne);

  }
        browser.get('http://localhost:3000/');
        sleep() 

        expect(browser.getTitle()).toEqual('Find Homes for Sale, Rent & Real Estate Listings Nationwide at Homes.com');
        sleep() 

        var search = element.all(by.css("input[name='search_query']"));
        sleep()
        search.sendKeys('anything'); // this is not working
  });
});

Answer №1

If you want to ensure that an element is visible before sending any input to it, you can utilize protractor.ExpectedConditions. Check out the code snippet below for guidance:

var EC=protractor.ExpectedConditions;

 describe('Testing on the new stack homepage', function() {
    beforeEach(function(){
       browser.get('http://localhost:3000/');
     });
    it('should validate the search form', function() {
      var search =  
              element.all(by.css("input[name='search_query']")).first();
      expect(browser.getTitle()).toEqual('Find Homes for Sale, Rent & Real 
                                Estate Listings Nationwide at Homes.com');
      browser.wait(EC.visibilityOf(search).call(),8000,'Search field not 
                                                          visible');
      search.sendKeys('anything');
    });
});

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

Change the URL structure from ex.com/forum?id=1 to ex.com/#/forum?id=1 in AngularJS

Hey there! I'm in the process of creating a Forum using AngularJS and need some guidance. First things first! I've successfully established a connection to my database with: <?php session_start(); $db = new mysqli("localhost","root",""," ...

modify the b-form-checkbox component in a Vue application

I have inserted the <b-form-checkbox> element into a <b-table>: https://jsfiddle.net/fmattioni/L269rd7s/ This is my current objective: 1 - Initially, all checkboxes in the table are checked using checked="true". 2 - Try unchecking ...

Is it possible to access an image's width and height in Jekyll Liquid syntax while iterating through a for loop, and then convert it to a JavaScript variable?

Is there a way to define a variable in Liquid logic that captures an image's width and height, which can then be passed to a JavaScript variable later on? Below are the steps my website takes before reaching the point where I need to use the image si ...

Executing a RESTful API request with Mocha in a Node.js environment

I've been attempting to make a REST call using Mocha. I tried using the "request" framework to log in at auth0. The REST call is correct; I tested the same data in Postman and received the correct response. However, when trying to implement the call ...

Update the navigation logo while scrolling

My website has a scrolling navigation menu using Wordpress. The default logo color is green, but when the user scrolls, a white background appears. However, on specific screens, I need the initial logo to be white. I have managed to create an alternate na ...

Tips for confirming that one of three checkboxes has been selected in AngularJS

Here is the code snippet for checkboxes: <input name="chkbx1" type="checkbox" ng-model="LoanReferData.Prop1" ng-class="Submitted?'ng-dirty':''" required>Prop 1</input> <input name="chkbx2" type="checkbox" ng ...

The ng-repeat directive adds an additional line after each iteration of the list item

Whenever the angular directive ng-repeat is utilized with an <li> element, I notice an additional line appearing after each <li>. To demonstrate this issue, see the simple example below along with corresponding images. Here is a basic example ...

Would you like to learn how to set an auto-play video as the background in a webpage section, similar to the one found on http://www8.hp.com/in/en/home.html?

I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this? ...

Is there a way to transmit the ENTER key press to the page setup dialog within Internet Explorer 7?

My code is designed to change the page orientation. It functions correctly in IE6, but encounters issues in IE7. Specifically, it stops at %a and fails to input the enter or tab keys needed to press 'OK'. var shell; function SetPrintProperties() ...

What steps can I take to decrease the padding of this footer?

Is there a way to reduce the height of the footer so it doesn't dominate the screen on both large and small devices? https://i.sstatic.net/nIQz6.png import { Container, Box, Grid } from "@material-ui/core"; const Footer = (props) => { ...

What could be the reason why document.getElementsByClassName does not seem to be functioning properly within

I've come across this code snippet const desc_object = document.getElementsByClassName("singlePostDesc"); console.log(desc_object[0]); This is how it appears in JSX {updateMode ? ( <> ...

Having trouble formatting an AJAX POST request properly

Despite my best efforts, I continue to encounter the dreaded 500 (Internal Server Errors) every time I try to execute a POST request to https://rates.tradelanes.us/bankaccount/record/create. I suspect it has something to do with the format of my data. Howe ...

What is the best way to position two programmatically created divs next to each other on a webpage

Is there a way to place two divs next to each other? And how can I do the same for multiple divs at once? Unlike canvas elements, divs don't automatically align side by side. Also, why isn't the button's value changing the text displayed on ...

Comparing Exporting WebDriver Code: Selenium IDE vs Selenium Builder

I am looking to extract Selenium 2 WebDriver Tests using either the IDE or Builder and convert them into C# code for my MSTest project. Currently, I have to manually convert the NUnit code to MSTest, but I am interested in creating a plugin or rewriting t ...

Tips for isolating html and js code?

After following a tutorial to write the program, I attempted to separate the HTML code from JS but encountered issues. Some lines of JS code are connected to the database as parameters, and when I split the HTML and JS codes, it no longer functions. Does ...

Blank Response from AJAX Chrome and Safari

I've implemented a jQuery function that auto fills an input field using the Google autocomplete API. The process involves making an AJAX request to a PHP file, which then uses file_get_contents() to return JSON data back to the application. Everything ...

Loop through the array and eliminate the identification solely

{ "productGroupVariantss": [ { "id": 1378, "name": "No oF Poles", "variantsAttributeses": [ { "id": 391, "variantsId": null, "variantsValue": "1p" }, { "id": 392, ...

Attempting to loop through a list and create a retrieval function for each item

My goal is to loop through the style tags and create a GET function for each one. The issue I'm facing is that the GET function is being written with a direct reference to 'styleTags[i]' instead of converting it to the appropriate tag. var ...

Steer clear of using the array push method repeatedly

I have recently developed an object that contains an array. Within this array, I am pushing objects from JSON data. $scope.pagenumArr = {"attribute":[],"_name":"pagenum","__prefix":"xsl"}; if ($scope.pagenumArr.attribute.indexOf($scope.content ...

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

Introduction to Promises. Encountering challenges in NodeJS due to the utilization of multiple if-statements and return-statements. Considering leveraging Promise as a potential solution. This snippet showcases an example: const express = require(' ...