how to use Protractor on non angularjs website?

Question

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

score 129 · Answer 1 · answered Apr 21 '14 at 13:54

129

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();

answered Apr 21 '14 at 13:54

Andrei Beziazychnyi

2,897
2
16
11

5

I liked this approach to keep code consistent across the test suit. – joy May 10 '14 at 20:59
4

This is definetly the best approach when dealing with protractor on non-angular. There's a [blog post](http://ng-learn.org/2014/02/Protractor_Testing_With_Angular_And_Non_Angular_Sites/) on this which explains some more stuff. For those searching for E2E, there's also [nightwatch.js](http://nightwatchjs.org/), [intern](http://theintern.io/), [casperjs](http://casperjs.org/), [webdriver](http://webdriver.io/) – Ciro Costa Aug 23 '14 at 18:27
1

@Andrei How about pageObjects. when i declare elements out side the functional block and trying to run it is showing me NoSuchElementError code snippet: this.buttonOnLeftSide= browser.driver.findElement(by.className('leftbutton')); this.iframe='emulatorFrame'; this.clickPlusSignOnTemplateEditor= function() { browser.driver.ignoreSynchronization = true; console.log('hey'); browser.driver.switchTo().frame(this.iframe); console.log('inside iframe'); browser.sleep(3000); buttonOnLeftSide.click(); }; – Nick Oct 16 '15 at 17:24
Just put it here in case someone having same issue like mine. Please aware of this approach, it is good but if you want to have *fast-fail*. You test may run forever in some case/environment although tests are failed. – Linh Pham Feb 02 '16 at 07:40
im having jasmine.DEFAULT_TIMEOUT_INTERVAL after i click the submit button. any idea? – ji-ruh Nov 29 '16 at 11:59

score 76 · Accepted Answer · answered Jan 07 '14 at 15:42

76

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();

answered Jan 07 '14 at 15:42

Eitan Peer

4,335
27
29

2

just a silly question, has `by.id` changed to `By.id`? – Val Sep 26 '14 at 13:36
7

@Val - global.by = global.By = protractor.By; (source - https://github.com/angular/protractor/commit/e7d9e081cdc7fcf100e0346b1dcf0f7fdad7d889) – Eitan Peer Oct 20 '14 at 08:46
How to find element by class and other means of non angular sites? – Easwaramoorthy Kanagaraj Oct 14 '16 at 05:33
@EaswaramoorthyK `by.className` . Refer to [docs](http://www.protractortest.org/#/api?view=ProtractorBy) – Murali KG Feb 28 '18 at 13:36

score 17 · Answer 3 · edited Jun 20 '20 at 09:12

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');

score 4 · Answer 4 · answered Feb 09 '21 at 00:14

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

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

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

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))

score 3 · Answer 5 · edited Mar 06 '17 at 19:00

3

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

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

edited Mar 06 '17 at 19:00

FelixSFD

6,052
10
43
117

answered Mar 06 '17 at 18:36

randomguy

357
2
9

score 2 · Answer 6 · answered Dec 09 '19 at 17:13

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  
       },

In second approach assume that you only have none angular scripts. — Sameera De Silva, Dec 09 '19 at 17:16

score 1 · Answer 7 · answered Aug 23 '17 at 13:16

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

Shouldn't it be browser.waitForAngularEnabled(false) instead of true? — onluiz, Jul 18 '18 at 14:44

score 1 · Answer 8 · answered Oct 25 '18 at 15:48

1

add the below snippet in your .js spec file

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

answered Oct 25 '18 at 15:48

Anil Kumar

61
4

score 1 · Answer 9 · answered Nov 12 '19 at 09:37

1

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

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

answered Nov 12 '19 at 09:37

Mridul

258
3
9

score 1 · Answer 10 · edited Jan 02 '20 at 06:41

1

Add below snippet for non angular applications:

app- browser.ignoreSynchronization = true;

edited Jan 02 '20 at 06:41

Simas Joneliunas

2,890
20
28
35

answered Jan 02 '20 at 05:22

Muhammad Irfan

121
8

score 0 · Answer 11 · answered May 14 '20 at 11:53

0

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

browser.ignoreSynchronization = true;

and for angular application -

browser.ignoreSynchronization = false;

answered May 14 '20 at 11:53

Muhammad Irfan

121
8

score 0 · Answer 12 · answered May 27 '20 at 09:11

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);
    },
};

score -5 · Answer 13 · answered Dec 19 '16 at 12:37

-5

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

answered Dec 19 '16 at 12:37

mlosev

5,130
1
19
31

6

dear @mlosev, this does not answer directly to the question. the question is "how to use protectrator..." and not "which library should I use instead of Protector" :-) – Abdelkrim Dec 23 '16 at 08:29

how to use Protractor on non angularjs website?

13 Answers13

Step by step instructions how to use it

Linked

Related