Protractor struggles to locate Angular framework

I am experiencing issues with Protractor recognizing that Angular is loaded and operational. Upon opening Chrome, my application fully loads in the browser, confirming that Angular is indeed loaded and running correctly.

Here is the configuration file:

exports.config = {
    seleniumServerJar: 'C:/Dev/PrismWeb/selenium/selenium-server-standalone-2.35.0.jar',

    seleniumPort: null,

    chromeDriver: 'C:/Dev/PrismWeb/selenium/chromedriver.exe',

    seleniumArgs: [],

    seleniumAddress: null,

    allScriptsTimeout: 110000,

    specs: ['c:/dev/prismweb/test/e2e/*.js'],

    capabilities: {'browserName': 'chrome'},

    baseUrl: 'http://localhost:8080',

    rootElement: 'html',

    jasmineNodeOpts: {
        onComplete: null,
        isVerbose: true,
        showColors: true,
        includeStackTrace: true,
        defaultTimeoutInterval: 30000
    }
};

I am attempting to run a single test which fails due to Protractor being unable to locate Angular.

The Test:

describe('homepage loads: ', function(){
    var ptor;

    ptor = protractor.getInstance();

    beforeEach(function(){
        ptor.get('/');
    });

    it('should load the prism homepage: ', function(){
        var usernameField = ptor.findElement(protractor.By.id("username"));
        //expect(usernameField).toBeDefined();
    });
});

This error message is displayed:

UnknownError: javascript error: angular is not defined (Session info: chrome=30.0.1599.69) (Driver info: chromedriver=2.2,platform=Windows NT 6.1 SP1 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 19 milliseconds Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01' System info: os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.7.0_21' Session ID: 1ef7dcd7c5fc9c4e9e1dede050002adf Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{platform=XP, acceptSslCerts=true, javascriptEnabled=true, browserName=chrome, chrome={chromedriverVersion=2.2}, rotatable=false, locationContextEnabled=true, version=30.0.1599.69, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=false, webStorageEnabled=true, nativeEvents=true, applicationCacheEnabled=false, takesScreenshot=true}]

I have attempted moving the ng-app attribute to the body tag, but the error persists. Additionally, we have an ng-controller attribute on the html tag which I also experimented with moving to the body tag while leaving the ng-app attribute intact on the html tag. Unfortunately, this did not resolve the issue. Any insights into why this failure occurs would be greatly appreciated.

EDIT: I made some updates to the test above to incorporate manual bootstrapping efforts. The script tags for Angular and its modules are placed at the end of the page right before the closing BODY tag. The HTML tag still contains the ng-app="myApp" attribute and the ng-controller="baseController" attribute. When attempting to manually bootstrap the app in the test, I encounter the following error:

ReferenceError: angular is not defined

One concern is that one of the modules we utilize requires "$" to be linked to jQuery, so we map it as follows:

<script type="text/javascript">
    var $jq=jQuery.noConflict();
    var $=jQuery.noConflict();
</script>

Where the ng-app is included:

<!DOCTYPE html>
<html ng-app="prismApp" ng-controller="baseController">
<head>

Answer №1

Have you explored the possibility of incorporating a beforeEach() within an it() block? On a related note, have you considered implementing a delay tactic like ptor.waitForAngular() or ptor.wait()?

Perhaps inserting a ptor.sleep(10000) following your ptor.get() function could shed light on any potential timing issues.

Additionally, I recommend referring to the Protractor API documentation to gain insights into how the wait() method operates:

ptor.wait(function () {
  // Define a condition for code execution upon fulfillment    
}, 10000); // Limit execution to 10 seconds

You might also want to consider utilizing ptor.driver.get('my-page'); instead of ptor.get('my-page');.

Another update worth noting is that Protractor now provides access to browser as a global variable, simplifying commands such as browser.get('index.html#/foo') or browser.wait().

Answer №2

For better performance, consider adding the following line to your test script:

browser.ignoreSynchronization = true;

This will disable synchronization with Angular in your tests and improve efficiency.

Answer №3

Do you bootstrap your Angular application using ng-app or do you manually start it up?

I noticed that in the configuration file, the rootElement is set to 'html'.

Protractor typically assumes that the app roots from the body tag. If the angular bootstrapping doesn't happen at the <html> tag in your application, consider changing the root element in the configuration file to match where angular first starts (whether it's manual or via ng-app). This adjustment can enhance performance and speed up Protractor's execution.

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 creating a TypeScript-compatible redux state tree with static typing and immutability:

One remarkable feature of TypeScript + Redux is the ability to define a statically typed immutable state tree in the following manner: interface StateTree { readonly subState1: SubState1; readonly subState2: SubState2; ...

Capturing Videos During Concurrent Selenium Testing

I have scoured every resource possible, but cannot find a solution. Does anyone know of a method to capture a video of each Selenium test running simultaneously? I have looked into an open source project linked below, however, it seems that it does not sup ...

Toggle the visibility of a div that is being looped through with ng-repeat

When the image or text is clicked, I want to hide the current div and display another div that also uses ng-repeat. This HTML code shows the primary image with text: <div class="img-container" ng-repeat="sign in signs.List"> <img class="anima ...

Tips for exchanging divs in a mobile view using CSS

Illustrated below are three separate images depicting the status of my divs in desktop view, mobile view, and what I am aiming for in mobile view. 1. Current Status of Divs in Desktop View: HTML <div id="wrapper"> <div id="left-nav">rece ...

The issue of "TypeError: e.fixers is undefined error for prefixfree on dynamically loaded iframes" is arising

My iframe is loaded dynamically with code to run inside it - it's a code playground with a codemirror instance below. One of the pieces of code that runs in the iframe is the prefixfree.min.js from Lea Verou. When the iframe loads or unloads, I encou ...

Incorporate the key as a prop within a Child Component in a React application

I am trying to display a list of elements in React, where the key of each element is used as an index in front of the item. However, when I try to access props.key, it just returns undefined. Does anyone have any suggestions on how to access the key proper ...

Exploring JavaScript and the Power of Manipulating the DOM (Adding and Removing Elements)

Currently, I am attempting to dynamically generate li elements inside an array and include a 'delete' button within each li. The goal is that clicking on the delete button will remove that specific li from the array. Although this may appear str ...

Guide on accessing a YouTube link within a comment on YouTube using an user agent with Selenium and Python

Looking to automate clicking on a YouTube link in the comments using Python Selenium. Can someone assist me with this? Example: URL HTML snippet: <a class="yt-simple-endpoint style-scope yt-formatted-string" spellcheck="false" href="/watch?v=PbLtyV ...

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

What method is the most effective for preloading images and stylesheets?

One of the main concerns I have is optimizing the load time of my website. I would like to preload images, style sheets, and scripts to ensure a faster loading speed and to prevent users from seeing images loading right before them. Can someone suggest the ...

Transforming JSON/XML into a hierarchical display

I've come across the following XML file: <Person attribute1="value1" attribute2="value2"> value3 <Address street="value4" city="value5">value6</Address> <Phone number="value7" type="value8">value9</Phone> </Pers ...

Having trouble setting Camera.rotation in three.js version 73?

After placing the camera in position during initialization, I noticed that there were no visible changes. I also implemented Orbital controls within the same function. Camera.rotation.x = 90*Math.PI/180; ...

Prevent ModalPopupExtender from displaying using JavaScript actions

In my ASP.net project, I am using Ajax with .Net 2.0. One of the challenges I am facing is related to a ModalPopupExtender that is linked to an image button: <asp:ImageButton ID="ibStartNow" runat="server" ImageUrl="images/StartNow.gif" ToolTip="S ...

JavaScript preload with webpack ES6 import for customizable prefetching

Within a large-scale React SPA, my goal is to have certain code chunks loaded only when a user opens or utilizes specific screens or features. Many of our React components are lazily loaded using const Component=React.lazy(() => import('./lazyCode& ...

Use $parse to extract the field names that include the dot character

Suppose I have an object with a field that contains a dot character, and I want to parse it using $parse. For instance, the following code currently logs undefined - var getter = $parse('IhaveDot.here'); var context = {"IhaveDot.here": 'Th ...

Is there a method in Node.js Express/Connect to manipulate the session to have an indefinite duration?

This is my current approach: app.use(express.session({ cookie:{domain:"."+settings.c.SITE_DOMAIN}, secret:'abc', store: redis_store, })); Upon checking my redis and running TTL se ...

Express.js and Node version 0.10.29: The Mystery Post

Having trouble with sending JSON data to an express server and receiving 'undefined' for req.body.name. This is how the configuration is set up: const express = require('express'); const app = express(); app.configure(function(){ ...

Unable to modify the `scope` value within the directive function

Essentially, I am utilizing a service to manage the popup-modal. At some point, I may have made a mistake or misunderstood the way of using the service because I am unable to update the scope value here. This is my service.js: "use strict"; angular.modul ...

React's setState is not reflecting the changes made to the reduced array

I am currently working on a custom component that consists of two select lists with buttons to move options from the available list to the selected list. The issue I am facing is that even though the elements are successfully added to the target list, they ...