The sendKeys() method in Protractor is failing due to the element being hidden/not

Hi there! I am currently new to automated testing with protractorJS for an angularJS homepage. While the code I've written so far has been successful, I'm facing an issue where I'm unable to input keys into the search field. After running the code, I consistently receive the error message "Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds."

I believe the problem lies in my element by syntax:

element(by.css("input[name='search_query']")).sendKeys('Virginia Beach VA');
    


--- HTML code block ----
<div ng-transclude>
<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-6255">
</div>


---homeshptest.js file ----

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

    browser.ignoreSynchronization = true;

    browser.get('http://localhost:3000/');
    browser.sleep(5000); 
    element(by.css("input[name='search_query']")).sendKeys('Virginia Beach VA');
    browser.sleep(5000);



     VA');

}); }); ---------------

Answer №1

To solve the issue of your webpage not having Angular, add

browser.ignoreSynchronization = true
after the browser.get() command.

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

Struggling to retrieve the header in Angular 6

When setting headers from an Express server written in NodeJS, I use the following code: app.use('/routes', function(req, res, next) { res.setHeader('test', 'test'); next(); ); The headers are successfully sent to th ...

Choosing and Duplicating Text in Angular

I'm attempting to give the user the ability to select a paragraph and copy it by clicking a button. However, my current code is not working as expected. I initially tried importing directives but encountered errors, prompting me to try a different met ...

What are some ways to enhance Redux's performance when handling rapid updates in the user interface?

I have been facing a challenge with integrating a D3 force graph with my redux state. During each 'tick' update, an action is dispatched to update a collection of positions in the redux state. These positions are then combined with node data to u ...

Encountering a compilation error when implementing ActionReducerMap in combination with StoreModule.forFeature

In my Angular project, the structure is organized as follows: /(root or repo folder) |_ projects |_ mylib (main library to be exported from the repo) |_ sample-app (created for testing 'mylib' project in other projects) To manage appli ...

Tips for avoiding simultaneous state transitions in Angular UI Router

My situation in my Angular application involves a frustrating issue. Whenever a user double-clicks quickly on a link to a specific state (ui-sref link), the target state starts loading twice. This would be manageable if the state window didn't freeze ...

What could be causing the directive to not trigger the controller method of mine?

Having trouble with my directive not calling the controller method. Here's the code I'm using: Controller: exports.controller = ['$scope', function($scope) { $scope.addParamter = function () { console.log("here ...

Toggle the image and update the corresponding value in the MySQL database upon clicking

Looking to implement a feature that allows users to bookmark pages in my PHP application using JavaScript. The concept involves having a list of items, each accompanied by an image (potentially an empty star). When a user clicks on the image, it will upda ...

Dealing with non-array responses from Restangular's .getList() method

Dealing with an API that I'm currently using can be tricky. When the client isn't authenticated, it returns a 200 status code along with a string error message. For example: var restSvc = Restangular.service('message'); var deferred = ...

What is the best way to upload two files using separate file input fields in AngularJs?

Currently, I am using AngularJS to check the file extension in my HTML code: <input type="file" name="file" onchange=" angular.element(this).scope().selectFileforUpload(this.files) " required/> <input type="button" value="Click" ng-click="clic ...

The test may detect a variable that was not initialized

I'm trying to understand why I get the error message "variable may not have been initialized" when testing (variable === "some text"), but I don't receive the same error when using (typeof passwordHashOrg !== 'undefined') The code that ...

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

Leverage JavaScript to retrieve content and generate an iframe

Can you use JavaScript to extract and insert <div> content from another website into the current site? For example: If Website 1 has a portal and wants to include content from Website 2. Website 2 contains the required content within the <div i ...

Incompatibility issues arise when trying to implement Dojo toolkit widgets in an AngularJS application

I'm currently working on integrating Dojo gauges into my AngularJS application. I know that Dojo is also a framework that follows the MVC pattern like AngularJS, but right now, I have an AngularJS app and I want to utilize existing widgets from other ...

Troubleshooting AngularUI's UI-sortable Index Update Problem

I've encountered a strange bug while using AngularUI's ui-sortable directive. Most of the time, dragging elements works smoothly and the index is updated when an element is moved to a new position. However, there are instances where the index doe ...

Connecting a Vue js model data to a Select2 select box

Utilizing select2 to improve an html select element, I am facing challenges in binding the value of the select element to a Vue variable because Select2 appears to be causing interference. Is there an optimal approach to achieve this data binding and even ...

Is it possible to log out a user in JavaScript by simply removing cookies?

Hey there, I currently have a node.js server running in the background which handles user login processes (I didn't create the backend code). app.use(function (req, res, next) { var nodeSSPI = require('node-sspi'); var nodeSSPIObj = n ...

Passing Values in AngularJS Services

Service: app.factory("MessageService", ["$timeout", function($timeout) { return function(message) { $timeout(function() { // $scope.fadeMessageSuccess = true; console.log("Test"); }, 2000); return message; } }]); Code ...

Endless loop in XMLHttpRequest()

I am trying to use Ajax in the code snippet below to continuously retrieve a PHP query result until it reaches "6". The code seems to be functioning correctly, but once the result is "6", the script does not stop running. Instead, my CPU fan starts making ...

Sending a JSON object with scheduled task cron job

I have a PHP cron job that is quite complex. It retrieves data from an external webpage and consolidates all the information into one variable, encoding it in JSON. Unfortunately, this entire process is slow and consumes a significant amount of time. My d ...

Issue encountered during app creation using the command line interface

After successfully installing nodejs and checking the versions of nodejs, npm, and npx, I proceeded to run the command npm install -g create-react-app which executed without any issues. However, when I attempted to create a new React app using create-react ...