how to use Protractor on non angularjs website?

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

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

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

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

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

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

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

add the below snippet in your .js spec file

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

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

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

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

Add below snippet for non angular applications:

app- browser.ignoreSynchronization = true;

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

browser.ignoreSynchronization = true;

and for angular application -

browser.ignoreSynchronization = false;

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

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

2. 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

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