End-to-end testing using AngularJS Protractor is conducted to verify the message: 'Application has already been bootstrapped with this element'

Encountering an issue where my Protractor tests consistently fail with the following error message:

UnknownError: Error Message => '[ng:btstrpd] App Already Bootstrapped with this Element '<html lang="en" data-ng-app="pmApp" class="js draganddrop no-video no-audio ng-scope">'

The current AngularJS documentation indicates that the problem arises when the application is manually bootstrapped. In my scenario, we are simply using:

<html lang="en" data-ng-app="pmApp">

The regular site functions without any errors or warnings. However, once I configure my tests with Protractor, the error surfaces. Notably, the test passed with AngularJS 1.08 but failed with version 1.25.

The test structure is as follows:

describe('Campaigns page', function() {
var ptor;

beforeEach(function() {
    // Adjusts window width to prevent login page display issues
    browser.driver.manage().window().setSize(1200, 800);
    ptor = protractor.getInstance();

    browser.driver.get(ptor.baseUrl + '/login');

    browser.driver.findElement(by.id('user_email')).sendKeys('admin@aperture.*************.com');
    browser.driver.findElement(by.id('user_password')).sendKeys('*************');

    browser.driver.findElement(by.css('.button.primary')).click();

    browser.driver.wait(function() {
        return browser.driver.getCurrentUrl().then(function(url) {
            return (/\/#\/$/.test(url));
        });
    });

    // Ensures the angular app is loaded and acknowledged
    browser.get('#/');
});

it('Should list campaigns on the page', function() {
    browser.get('#/campaigns');

    browser.findElements(by.css('.main-campaign')).then(function(results) {
        expect(results.length).toBeGreaterThan(0);
    });

});

*Login details have been removed for security reasons.

Upon calling: browser.get('#/campaigns');

The error occurs.

I also attempted to use the login functionality as an onPrepare in the Protractor configuration file, but encountered the same issue.

Any insights or assistance would be greatly appreciated!

Full stack trace:

Stacktrace:
 UnknownError: Error Message => '[ng:btstrpd] App Already Bootstrapped with this Element '<html lang="en" data-ng-app="pmApp" class="js draganddrop no-video no-audio ng-scope">'

http://errors.angularjs.org/1.2.5/ng/btstrpd?p0=%3Chtml%20lang%3D%22en%22%20data-ng-app%3D%22pmApp%22%20class%3D%22js%20draganddrop%20no-video%20no-audio%20ng-scope%22%3E' caused by Request => {"headers":{"Accept":"application/json, image/png","Connection":"Keep-Alive","Content-Length":"159","Content-Type":"application/json; charset=utf-8","Host":"localhost:29064"},"httpVersion":"1.1","method":"POST","post":"{\"args\":[[]],\"script\":\"return (function () {\n // Continue to bootstrap Angular.\n angular.resumeBootstrap(arguments[0]);\n }).apply(null, arguments);\"}","url":"/execute","urlParsed":{"anchor":"","query":"","file":"execute","directory":"/","path":"/execute","relative":"/execute","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/execute","queryKey":{},"chunks":["execute"]},"urlOriginal":"/session/64b440e0-68b9-11e3-b92a-e1efe36914bc/execute"} Build info: version: '2.37.0', revision: 'a7c61cb', time: '2013-10-18 17:14:00' System info: host: 'peters-mbp', ip: '192.168.0.3', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65'

Answer №1

Yesterday, I encountered a similar situation and managed to fix it by including browser.ignoresynchronisation = true before each test. This issue arose when manually bootstrapping my Angular app with resumeBootstrap. Additionally, I had to introduce a delay for the browser to accurately display the results.

I trust this solution will be beneficial.

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

Tips for displaying NoOptionsText in MaterialUI Autocomplete based on a specific condition

When using a Material UI autocomplete feature, the items are selected based on the first 3 letters typed. For example, if you're searching for all "Pedros" in your database, typing "Ped" will bring up results starting with those letters. The issue ar ...

Organize data in a table using a dropdown selection menu

My data structure looks like this: $scope.friends = [ { name:'John', phone:'555-1212', age:10 }, { name:'Mary', phone:'555-9876', age:19 }, { name:'Mike', phone:'555-4321', age:21 }, { na ...

Issue with chrome.extension.onMessage being undefined in background script in Chrome extension

Currently facing an issue while attempting to develop a Chrome extension. Occasionally, the chrome.runtime object appears to be incomplete, resulting in missing methods (specifically onMessage, which is essential for my project). Interestingly, this incon ...

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

The JSON object array is not empty, but it is unable to be iterated using a foreach loop, displaying a

Exploring a library of books from a Firestore collection in the create() method. The book data is stored in an array called checkout which is initialized in the data() method. export default { name: "checkout-history", data() { return { che ...

Using jQuery to duplicate elements by copying and pasting

I am facing a scenario where I need to dynamically create and manipulate a div element in my web application. The process involves appending the newly created div to another container upon clicking a button, followed by triggering a series of functions on ...

Storing user input in a variable - JavaScript Facebook Messenger bot

I am currently developing a facebook messenger bot using node.js. I am looking for a way to store the user response from a message that the bot sends, so that it can be accessed later by using a variable. // defines that 'text' is any message se ...

React component causing function to fire twice on click

Summary: My toggle function is triggering twice upon clicking the button. Within a React component (using Next.js), I am utilizing the useEffect hook to target the :root <html> element in order to toggle a class. The script is as follows: useEffect( ...

tips for sending the database value to the next page with ajax

Struggling to send the database value retrieved through ajax to the next page. Tried several methods but none seem to work. Could anyone provide guidance on how to achieve this? php Successfully connected to the database $sql = "SELECT * FROM `billin ...

The MEAN app fails to load on server restart in Azure AlwaysOn

I am currently running a MEAN stack application on Azure with the alwaysOn feature enabled. However, I have noticed that the node process doesn't start automatically without a manual http call. While this is not a major issue for front end tasks, it ...

Personalized verification script using bootstrap

I'm struggling with implementing form validation in my bootstrap form. I specifically want to use a regex pattern that only allows alphabets in the name field. However, my validation doesn't seem to be working. Can anyone help me identify the iss ...

The printer is malfunctioning

My webpage has a div that includes various input fields with values assigned using jQuery. I wanted to print the contents of this div, so I found some code online to help me achieve this. However, when I try to print, the values in the input fields end up ...

Tips for manipulating HTML using JavaScript and detecting the updates in ASP.NET after a postback

This is a unique challenge, and despite my efforts to find a solution in various sources, I couldn't overcome this specific scenario. I want the user to input multiple values into a single text field, like this: <div style="margin-left: 5px; disp ...

Communicating between PHP chat client and server

Currently, I am developing a basic PHP web chat application that interacts with a MySQL database. The communication is facilitated through AJAX requests - when a user posts a message, it gets saved in the database. function sendData(){ var textData = $(& ...

Change the timestamp 2017-09-12 00:00:00 to just 2017-09-12 with the help of Angularjs

When pulling data from the database, the date is showing up as 2017-09-12 00:00:00. How can I format it to only display as 2017-09-12? ...

Issue encountered when upgrading from Angular 4 to Angular 5: Module '@angular/router' is not found

I recently made the switch from angular 2 to angular 5. However, after the upgrade, I encountered some errors in my ts file. Should I remove @angular/core and @angular/router in angular 5? Here is a snippet of my package.json post-upgrade. Below are the de ...

Mastering the BFCache management in React for optimal performance

Before redirecting to an external payment provider, I display a loading screen to account for longer load times. If the user decides not to complete the payment and navigates back using gestures or the browser's back button, the page is pulled from t ...

Guidelines for dynamically switching between two buttons (function/text) depending on an external factor (such as the number of items bought)

I'm exploring a previous concept of toggling between two buttons conditionally in a CRA. import ... const ... export const Index = () => { // Setting up boolean state to toggle buttons conditionally const [reachMax] = React.useState(id <= ...

I find myself facing a roadblock in navigating Servlets and HTML

I'm currently immersed in a project aimed at launching an innovative online food ordering platform. To bring this vision to life, I've harnessed the power of HTML, CSS, and JavaScript for frontend development, Java (Servlets) for backend function ...

When validating an array in JavaScript, it is important to note that not all elements may be displayed. Only the last variable of each element will

I am encountering an issue with validating an array of objects, specifically a table with rows where each row represents an object. The problem is that no error message appears if there is an error in the middle row of the table. However, if there's a ...