Waiting with Protractor's browser.wait can lead to Angular timeouts

I've been working on this code snippet:

    browser.sleep(5000).then(function() {console.log('rotel:' + browser.rootEl)});
    browser.ignoreSynchronization = true;
    browser.rootEl = 'div#overview';
    browser.driver.switchTo().defaultContent().then(function() {console.log('Switch default')});
    browser.sleep(500);
    browser.wait(function() { return browser.isElementPresent(by.css('[class="box-header"]'))}, 10000);
    element(by.model("ssn")).sendKeys(pat + "\n").then(function() {console.log('sendkeys')});
    browser.rootEl = 'body';

Whenever I remove the line with the browser wait, the testing proceeds smoothly. However, if I keep it in, I encounter this error message:

'Error while waiting for Protractor to sync with the page: "root element (body) has no injector. this may mean it is not inside ng-app."'

I'm confused as to why the wait function, which doesn't involve any Angular elements, fails while the "by.model" line works perfectly fine?

Also, it's puzzling because I distinctly remember it was functioning correctly earlier today before I stepped out for some errands.

javascriptangularjsseleniumselenium-webdriverprotractor

Answer №1

If you are testing a page with angular, remember to set the ignoreSynchronization parameter to false in your code by adding 

browser.ignoreSynchronization = false;
.

Ensure that the ng-app attribute is present on the body tag of your HTML document. This is crucial for Protractor to recognize whether the page is angular or non-angular. If the ng-app tag is nested within a descendant element of the body tag, specify the rootElement property in your conf.js file to denote where Protractor should start checking for angular elements. Example:

rootElement: 'body/div', //if ng-app tag is within a div under body

Keep in mind that the promise returned by isElementPresent() is not automatically resolved within your browser.wait() function. The wait() function expects a boolean value to be returned within the specified timeout period. If no value is returned, an error will be thrown. Use isElementPresent() to determine the presence of an element as shown below:

browser.wait(function() { 
    return browser.isElementPresent(by.css('[class="box-header"]')).then(function(present){
        return present;
    });
}, 10000);

Alternatively, you can utilize Protractor's ExpectedConditions object to check if an element is present in the DOM. Here are some examples of how to use it:

var EC = protractor.ExpectedConditions;
var element = element(by.css('[class="box-header"]'));

browser.wait(EC.visibilityOf(element), 10000); //Checks if element is visible and enabled on the DOM
browser.wait(EC.presenceOf(element), 10000); //Checks if element is present in the DOM
browser.wait(EC.elementToBeClickable(element), 10000); //Waits for element to be clickable before proceeding

I hope this information proves helpful.

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

Identifying Element Clickability in Selenium WebDriver (Ensuring it is not blocked by a dojo modal lightbox)

My expertise lies in creating automated scripts designed for testing web applications that heavily rely on ajax functionality. One common scenario involves a modal dialog popping up with the message "Saving..." during settings saving, while simultaneously ...

ajaxseleniumdojowebdriver

"When using `app.use(express.static`, it appears that the functionality is not working properly when the app is a sub

I attempted to implement something similar to this: var main = express(); main.use(express.static(path.resolve('./asset'))); main.route('someroute', someHandle); var app = express(); app.use(express.static(path.resolve('./asset&ap ...

javascriptnode.jsexpresssubapplication

I'd like to know what sets next/router apart from next/navigation

Within Next.js, I've noticed that both next/router and next/navigation offer a useRouter() hook, each returning distinct objects. What is the reasoning behind having the same hook available in two separate routing packages within Next.js? ...

javascriptreactjsnext.js

When a button is clicked, the event is not triggered within a FirefoxOS application

Despite functioning perfectly on Firefox for desktop, my application encounters issues when tested on my ZTE Open C (Firefox OS 1.3). Pressing the button does not trigger any action, while onmouseup and onclick events work flawlessly. Even attempts to bin ...

javascriptjqueryhtmlfirefox-os

Creating a custom preloader for your ngRepeat in AngularJS

When utilizing the infinite scroll technique along with ng-repeat, my goal is to show a preloader while the directive completes adding items to the DOM. Can you suggest the most straightforward approach to achieve this? ...

angularjsangularjs-directiveangularjs-ng-repeat

Differences between using ng-pattern and scripting for validation

My goal is to validate a date in the format YYYY/MM/DD using a regular expression ng-pattern. When I use the code below in the UI, it works perfectly fine. <input type="text" class="k-fill" ng-pattern="/((^[1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d ...

javascriptregexangularjs

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Imagine I am using app.js or a Bootstrap CDN link for all of my HTML pages, but I don't want to include it in every single page individually. Is there a way to create an index.html file that includes this so that all other HTML pages load the head fro ...

javascripthtmlcss

What is the best way to incorporate an array of elements into Firebase?

How can I store data from an array to Firebase in a simple manner? Let's say I have an array of elements. function Something() { var elements=new Array() elements[0]=10; elements[1]=20; elements[2]=30; database = firebase.databas ...

javascriptarraysfirebase

Scanning a barcode on the Google search page activates a specific event

I am looking to replicate the functionality seen on Google's search page where any user input, whether through keyboard or barcode scanner, automatically populates the search box. The input should be captured no matter where on the page it happens, wi ...

javascriptgwtwebbarcode-scanner

What are some ways to adjust the page being served in node.js?

I have set up my server.js file with necessary dependencies and routing for handling POST requests. However, I am looking to dynamically update the webpage served by this server when a POST request is received on /message endpoint. These requests are trigg ...

javascriptangularjsnode.jsexpresshighcharts

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

htmlangularjs

Troubleshooting Problems with Angular Directive Parameters

I'm currently working on a directive that will receive arguments from the HTML and use them to fill in the template fields. Here's the code for the directive: (function(){ angular.module("MyApp",{}) .directive("myDirective",function(){ ...

javascriptangularjsangularjs-directive

Troubleshooting "Module Not Found" issue with Vue.js single page component integrating Google Maps

I'm facing an issue while trying to integrate a Google Map from the Google Maps API into my Vue.js application. I have obtained my API key and made an attempt to display the map. However, upon running the app, Atom throws a "Module not found" error me ...

javascriptgoogle-mapsgoogle-maps-api-3vue.jsvuejs2

Encountering issues with parsing JSON data following its transmission through an Ajax request

Client Side Once an object has been processed with JSON.stringy, it is sent in this format to a node-server via a POST request: {"id":"topFolder","parentPath":null,"name":"newProject","is":"root","children":[]} The request is sent from the client side u ...

javascriptjsonajaxnode.jskoa

Issue with clearTimeout function not functioning properly on keyup event in iFrame

While there may be many similar questions out there, I have yet to find a solution that works for me. Currently, I am developing a WYSIWYG editor and I want it to save when the user performs a keyup action. However, I do not want it to update after every ...

javascriptjqueryhtmliframe

To achieve this, my goal is to have the reels start playing on a separate page when a user clicks on the designated image. I am currently working on a project that involves this

When a user clicks on the designated image, I want the reels to start playing on a separate page. In my main project, I have a reels project within it, with the reels project built in ReactJS and the main project in React TypeScript. For example, if a user ...

javascriptreactjstypescriptreact-typescript

inject custom styles into a Material-UI styled component

Although I have come across similar questions, none seem to directly address my current situation. I am in the process of transitioning from MUI v4 to MUI v5 and have encountered various scenarios where a specific style is applied externally. For instance ...

javascriptreactjsmaterial-ui

struggling with beginner-level JavaScript issues

Hey there, I've been running into a bit of an issue with my basic javascript skills: function tank(){ this.width = 50; this.length = 70; } function Person(job) { this.job = job; this.married = true; } var tank1 = tank(); console.log( ...

javascript

Revamping ng-model in AngularJS

Here is my scenario: cols = [{field="product.productId"},{field="product.productPrice"}]; data = {products:[{product:{productId:1,productPrice:10}, {product:{productId:2, productPrice:15}}]} This is what I want to achieve: <div ng-repeat="product in ...

javascriptangularjs

Utilizing jQuery or JavaScript to transfer information within a Bootstrap modal

I am working with a table that is generated from an SQL Table using PHP for data looping. HTML <tbody> <?php $no = 1; foreach($data_request as $data) { ?> <tr> <td class="center"><?php echo $no++.". ";?> ...

javascriptjquerytwitter-bootstrap