CODEWITHSUNDEEP
javascriptasp.netangularjstestingprotractor
Abdelkrim
Abdelkrim

Reputation: 2158

how to use Protractor on non angularjs website?

I have found Protractor framework which is made for AngularJS web applications.

How can I use Protractor on a website which is not using AngularJS?

I wrote my first test and Protractor triggers this message:

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded

Upvotes: 82

Views: 58148

Answers (13)

Sergey Pleshakov
Sergey Pleshakov

Reputation: 8968

Forget about ignoreSynchronization!!! It no longer exists in protractor starting from protractor 5.3.0

browser.waitForAngularEnabled(false) should be used instead

Step by step instructions how to use it

Protractor has builtin handling of waiting for angular and this is what makes it different. However, if the page is not angular protractor will hang until it hits timeout error, so you need to disable that feature in order to test non-angular page. There is also an edge case, when the page is angular, but this feature will STILL make protractor error out. Perform the steps below, to find out when to disable protractor's waiting for angular

  1. Find out if your page is Angular: open dev console in the browser and inside of 'console' tab run command
getAllAngularTestabilities()

If the output is getAllAngularTestabilities is not defined, then your page is not angular, go to the last step to disable built-in waiting

  1. Run these commands in the console
getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks
getAllAngularTestabilities()[0]._ngZone.hasPendingMicrotasks

If any of these return true (if there are micro or macro tasks pending), then go to the last step. If all are false, congrats, you can use the builtin protractor's waiting for angular. But if you don't like it as I don't, then read the last step to find out how to disable it

  1. Run the above mentioned command. BUT! It returns a promise, which needs to be handled, preferably using await keyword
await browser.waitForAngularEnabled(false)

This command can be ran anywhere: in the it block, in beforeAll, or in onPrepare of your configuration. Just make sure, if you use await to make the respective block async

beforeAll(async () => await browser.waitForAngularEnabled(false))

Upvotes: 4

Khyati Sehgal
Khyati Sehgal

Reputation: 385

I am working on aurelia web-app which is a FE framework similar to Angular , React. In this I am using Protractor for automation.

Tech Stack which of my project:-

  • Protractor
  • Typescript
  • Page Object Modal
  • Cucumber
  • Chai
  • node
  • npm
  • VS Code (IDE)

The main change happens only in the configuration file, I can add code in github if that would help, here is the config file I am using in my project which works perfect for me. Posted some blogs as well in my wordpress , hope that can be of help.

const reporter = require('cucumber-html-reporter');
exports.config = {
    SELENIUM_PROMISE_MANAGER: false,
    directConnect: true,
    specs: ["./e2e/features/*/EndToEnd.feature"],
    format: 'json:cucumberReport.json',
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    cucumberOpts: {
        strict: true,
        format: 'json:cucumberReport.json',
        keepAlive: false,
        require: [
            './e2e/hooks/*.ts',
            './e2e/stepDefinition/*/*.ts',
        ],
       tags: '@Regression'
    },
    beforeLaunch: function () {
        require('ts-node/register')
    },
    onPrepare: async () => {
        await browser.waitForAngularEnabled(false);
        await browser.ignoreSynchronization == true;
        await browser.manage().window().maximize();
        await browser.manage().timeouts().implicitlyWait(10000);
     },
    onComplete: async () => {
         var options = {
            theme: 'bootstrap',
            jsonFile: './reports/cucumberReport.json',
            output: './reports/cucumberReport.html',
            reportSuiteAsScenarios: true,
            launchReport: false,
            screenshotsDirectory: './reports/screenshots',
            storeScreenshots: true,
            metadata: {
                "Test Environment": "SAND-DEV-1",
                "Platform": "Windows 10",
            }
        };
        reporter.generate(options);
    },
};

Upvotes: 0

Muhammad Irfan
Muhammad Irfan

Reputation: 119

Use below snippet in your config.js file for non-angular applications- 

browser.ignoreSynchronization = true;

and for angular application -

browser.ignoreSynchronization = false;

Upvotes: 0

Muhammad Irfan
Muhammad Irfan

Reputation: 119

Add below snippet for non angular applications:

app- browser.ignoreSynchronization = true;

Upvotes: 1

Sameera De Silva
Sameera De Silva

Reputation: 1980

In some occasions, to avoid errors need to add both values .

 browser.driver.ignoreSynchronization = true;
 browser.waitForAngularEnabled(false);

You can add them in spec.js file .

describe('My first non angular class', function() {
    it ('My function', function() {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);

Or as @Mridul Suggested ,add them in config.js file .

exports.config = { directConnect: true, framework: 'jasmine',

  onPrepare: function () {
         browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false 
         browser.waitForAngularEnabled(false);   // for non-angular set false. default value is true  
       },

Upvotes: 2

Mridul
Mridul

Reputation: 266

Add the following piece of code in the conf.js file

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }

Upvotes: 1

Anil Kumar
Anil Kumar

Reputation: 61

add the below snippet in your .js spec file

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});

Upvotes: 1

MatthewThomas.dev
MatthewThomas.dev

Reputation: 1045

waitForAngular should now be used instead of the deprecated ignoreSynchronization property.

The following waitForAngular guidance is taken from the Protractor docs for timeouts:

How to disable waiting for Angular

If you need to navigate to a page which does not use Angular, you can turn off waiting for Angular by setting `browser.waitForAngularEnabled(false). For example:

browser.waitForAngularEnabled(false);
browser.get('/non-angular-login-page.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();

browser.waitForAngularEnabled(true);
browser.get('/page-containing-angular.html');

Upvotes: 17

Matthieu Dsprz
Matthieu Dsprz

Reputation: 477

Personally, I didn't get any success with proposed solutions as the DOM elements weren't properly loaded in time.

I tried many ways of handling that asynchronous behavior, including browser.wait with browser.isElementPresent, but none of them were satisfying.

What did the trick is using Protractor returned Promises from its methods in onPrepare :

onPrepare: () => {

    browser.manage().window().maximize();

    browser.waitForAngularEnabled(true).then(function () {
        return browser.driver.get(baseUrl + '/auth/');
    }).then(function () {
        return browser.driver.findElement(by.name('login')).sendKeys('login');
    }).then(function () {
        return browser.driver.findElement(by.name('password')).sendKeys('password');
    }).then(function () {
        return browser.driver.findElement(by.name('submit')).click();
    }).then(function () {
        return true;
    });

    return browser.driver.wait(function () {
        return browser.driver.getCurrentUrl().then(function (url) {
            return /application/.test(url);
        });
    }, 10000);
},

I was inspired by https://github.com/angular/protractor/blob/master/spec/withLoginConf.js

Upvotes: 1

randomguy
randomguy

Reputation: 387

To test on non angular site, you should remove the synchronisation. for that use the following:

browser.ignoreSynchronisation = true;
browser.get('url');

Upvotes: 3

mlosev
mlosev

Reputation: 5227

Instead of Protractor, you can use for e2e testing the Testcafe.
Pros:

  • ES2016 syntax
  • no need an additional dependencies, configs and browser plugins
  • flexible selectors
  • easy setup

Upvotes: -5

Andrei Beziazychnyi
Andrei Beziazychnyi

Reputation: 2917

Another approach is to set browser.ignoreSynchronization = true before browser.get(...). Protractor wouldn't wait for Angular loaded and you could use usual element(...) syntax.

browser.ignoreSynchronization = true;
browser.get('http://localhost:8000/login.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();

Upvotes: 129

Eitan Peer
Eitan Peer

Reputation: 4345

If your test needs to interact with a non-angular page, access the webdriver instance directly with browser.driver.

Example from Protractor docs

browser.driver.get('http://localhost:8000/login.html');

browser.driver.findElement(by.id('username')).sendKeys('Jane');
browser.driver.findElement(by.id('password')).sendKeys('1234');
browser.driver.findElement(by.id('clickme')).click();

Upvotes: 76

Related Questions