How to use Protractor for non angular page in a application

Question

I am new to Protractor. I have written a small script for testing an application via Protractor and in between i came across a non angular page. So by googling i came up to use browser.ignoreSynchronization = true; while writing for non angular page. But it is not working. Please help. Script is working fine till dept click but throwing error after adding browser.ignoreSynchronization = true ; for non angular page.

Below is my config.js and spec.js

conf.js

    exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js']
};

spec.js

describe('Open the browser', function ()
    {

    it('should open the browser', function () {

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

        browser.get('url');
        var userlogin = element(by.xpath('//*[@id="main-navbar"]/ul[2]/li[2]/a')).click();
        var mobnumber = element(by.xpath('//*[@id="mnoz"]')).sendKeys('id');
        var pw = element(by.xpath('//*[@id="mpinz"]')).sendKeys('pw');
        var loginbtnclick = element(by.xpath('//*[@id="mobileLogin"]/form/div[4]/button')).click();
        browser.sleep(5000);

        var dialogbox = element(by.xpath('/html/body/div[11]/md-dialog/md-content/div[8]/button')).click();
        var allservicestab = element(by.xpath('//*[@id="homeTabs"]/md-tabs-wrapper/md-tabs-canvas/md-pagination-wrapper/md-tab-item[4]')).click();
        var deptclick = element(by.xpath('//*[@id="tab-content-17"]/div/md-content/div/div/md-card[2]/div[2]')).click();

        browser.ignoreSynchronization = true;

        browser.driver.findElement(By.className('department-click')).click();

    })

});

Below is the code where i need to click further

<div class="department-click" onclick="GLOBAL_SERVICE_ID=405;changeLocation('#/aicte');_routeFrom='home'">
<!-- <div class="department-click" onclick="changeLocation('#/aaaa')"> -->

Thanks in advance.

Answer 1

When the angular sync is disabled (as it must be for testing non-angular apps) you need to ensure you are waiting for elements correctly yourself. You can do this with the help of Protractors ExpectedConditions .

browser.wait(protractor.ExpectedConditions.visibilityOf($('.department-click')), 15*1000, 'ele with class department-click did not appear within 10 seconds');

Written another way as

const requiredEle = element(by.css('.department-click');
const EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(requiredEle), 10*1000, 'ele with class department-click did not appear within 10 seconds');