1

I am testing the angular website. Our application starts with Login page and then vertical application selection frame (On the left corner of the page) which are Non-Angular web-pages and then after selecting the application in the left frame, it opens angular site inside the another frame (Right to the application selection frame).

I have the following code to automate the scenario using Cucumber and Protractor. After Logging in and launching the application from the left frame, I get the error message as:

Uncaught exception: Error while waiting for Protractor to sync with the page: "angular could not be found on the window".

[launcher] Process exited with error code 1

Process finished with exit code 1

Please find the code snippet below:

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
var assert = chai.assert;
var myStepDefinitionsWrapper = function () {

    this.Given(/^I login to the application with valid (.*) and (.*)$/, function (username, password) {

        browser.driver.get(browser.baseUrl);
        browser.driver.wait(function () {
            return browser.driver.isElementPresent(by.id("ContentPlaceHolder1_UsernameTextBox"));
        }, 10000);

        browser.driver.findElement(by.id("ContentPlaceHolder1_UsernameTextBox")).then(function (usernameField) {
            usernameField.sendKeys(username);
        });

        browser.driver.findElement(by.id("ContentPlaceHolder1_PasswordTextBox")).then(function (passwordField) {
            passwordField.sendKeys(password);
        });

        return browser.driver.findElement(by.id("ContentPlaceHolder1_SubmitButton")).click();
    });

    this.Given(/^I launch the application from application selection page$/, function () {
        browser.driver.wait(function () {
            return browser.driver.isElementPresent(by.xpath("//a[starts-with(@class,'cp-icon') and contains(@style,'applaunch_default_26x26')]"));
        }, 10000);
        browser.driver.findElement(by.xpath("//a[starts-with(@class,'cp-icon') and contains(@style,'applaunch_default_26x26')]")).click();
        browser.driver.wait(function () {
            return browser.driver.isElementPresent(by.xpath("//span[contains(@title,'AppName')]"));
        }, 10000);
        return browser.driver.findElement(by.xpath("//span[contains(@title,'AppName')]")).click();
    });

    this.When(/^I open the task for the (.*)$/, function (PersonName) {
  //Anugular Website starts from here
        browser.waitForAngular();
        return element(by.xpath("//td[contains(text(),'" + personName + "')]/following::td[2]/button[text()='Perform']")).click();
    });
Abhishek S N
  • 35
  • 2
  • 9

2 Answers2

1

I've had this issue a few times before, specifically with a login page(with angular) that takes me to a 'success' page(without angular), then redirects me to a landing page(with angular).

This usually works quite nicely:

loginBtn.click();
browser.wait(function () {
    return browser.executeScript('return !!window.angular');
}, 10000, 'Timed out waiting for angular after login page);

See if you can get that to work for you as well!

Edit after your edit: Sweet, this one looks tricky! Let's see what we can find out.

Can you switch to the frame? Check this out:

https://angular.github.io/protractor/#/api?view=webdriver.WebDriver.TargetLocator.prototype.frame https://angular.github.io/protractor/#/api?view=webdriver.WebDriver.prototype.switchTo

Since it is non-angular at the start, you may need:

browser.driver.switchTo().frame(element(by.id('frameWithAngular')));

I don't think you will need a browser.wait until you can switch to the frame, but I'm not sure the behavior when you are in a non-angular area at the start.

Another thing to try is pointing your config to the area where angular will be with rootElement(Line 173): https://github.com/angular/protractor/blob/master/docs/referenceConf.js

This could disrupt the rest of your flow, though, depending on the site layout. A bit more reading about iframes, though all in angular it talks about waiting for the frames properly: Protractor: Testing Angular App in an Iframe

Let me know if you can get any closer with this!

Community
  • 1
  • 1
user2020347
  • 883
  • 7
  • 17
  • Hi Sorry, I have edited my question to give more clarity. My application opens in the right frame of the page which is angular. Left frame is non-angular. – Abhishek S N Jul 11 '15 at 04:22
  • Okay, try checking out my edit now. See if that gets you closer! – user2020347 Jul 11 '15 at 04:45
  • I didn't have Id to the iframe tag so, I modified the html tag to have id and then ran the protractor test with your suggestion, i', still getting the issue:Error: Error while waiting for Protractor to sync with the page: "angular could not be found on the window" at Error (native) ==== async task ==== WebDriver.switchTo().frame([object Object]) at [object Object].webdriver.WebDriver.schedule ==== async task ==== at [object Object].webdriver.promise.ControlFlow.wait – Abhishek S N Jul 13 '15 at 07:02
  • Current Iframe Tag: Protractor Code: browser.driver.wait(function() { return browser.driver.switchTo().frame(element(by.id('ACDSFrame'))); },10000); – Abhishek S N Jul 13 '15 at 07:05
  • Frame Id didn't work for me. Instead I used frame name to switch to iframe containing angular site. browser.driver.switchTo().frame(''); Also, it doesn't work with protractor 2.0 and 2.1. So I had to downgrade the protractor to 1.8.0 – Abhishek S N Jul 22 '15 at 07:25
0

used iframe name to switch to iframe containing angular site. 

browser.driver.switchTo().frame('<Frame Name>');

Also, it doesn't work with protractor 2.0 and 2.1. So I had to downgrade the protractor to 1.8.0

Abhishek S N
  • 35
  • 2
  • 9