Protractor e2e testing for non angular sites

So far we have seen how to write protractor scripts for angular application / site, in this post we will see how we can run protractor scripts for non angular sites.

Problem

Let’s say if it has been told you to use your protractor framework to automate non angular sites, and if you use your existing protractor framework, then protractor will wait for angular controls in non angular sites and will throw error, see below

import { browser, element, by } from "protractor";

describe("Non Angular test", function(){
    it("invoke non angular app",function(){
        browser.get("http://qavalidation.com/demo/");
        browser.sleep(1000);
    })

});

Output –
[14:12:14] I/launcher - Running 1 instances of WebDriver
[14:12:14] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
[14:12:30] E/protractor - Could not find Angular on page http://qavalidation.com/demo/ : retries looking for angular exceeded
[14:12:30] I/launcher - 0 instance(s) of WebDriver still running
[14:12:30] I/launcher - chrome #01 failed 1 test(s)
[14:12:30] I/launcher - overall: 1 failed spec(s)
[14:12:30] E/launcher - Process exited with error code 1
npm ERR! Test failed. See above for more details.

The script will run and perform the automation, but result shows fail, because protractor is looking for angular control but din’t find.

Solution

Protractor provides a way to test non angular sites, you just need to add this line of code before launching the browser

browser.ignoreSynchronization = true;

Like this below

import { browser, element, by } from "protractor";

describe("Non Angular test", function(){    
    it("invoke non angular app",function(){
        browser.ignoreSynchronization = true;
        browser.get("http://qavalidation.com/demo/");
        browser.sleep(1000);
    })
});

Now your script will run and test will also pass

Extending this approach

We can create a global method in conf.ts file under the onPrepare method section, and call the method with a flag from any test file

conf.ts

(global as any).isAngularSite = function(flag: boolean){
browser.ignoreSynchronization=!flag;
}

Now call this isAngularSite() from any test with the flag as parameter before launching the site

If angular site, flag = true

if non angular site, flag = false

SampleTest.ts

describe("Non Angular test", function(){
  
    it("invoke non angular app",function(){
        (global as any).isAngularSite(false);
        browser.get("http://qavalidation.com/demo/");
        browser.sleep(1000);
    })
});

Watch the details below