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.

ignoreSynchronization is deprecated. Use browser.waitForAngularEnabled(false) and you should put it before your browser.get() not after — DublinDev
Does this answer your question? how to use Protractor on non angularjs website? — DublinDev
Thanks Dublin for your suggestions. Thanks Dublin for your suggestions. I tried to run after adding wait for angular as false, but it is not working for me. Throwing error as below- Failed: no such element: Unable to locate element: {"method":"css selector","selector":".department-click"}Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53' System info: host: 'DESKTOP-EF4ELPJ', ip: '10.22.119.193', os.name: 'Windows 10',os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_231'Driver info: driver.version: unknown — Priya
I have added ignoreSynchronization there as my non angular page starts form there only. The code i have added is for a click after var deptclick. I have added the code just to check if i have written it in correct way. Please help. — Priya

DublinDev DublinDev · Accepted Answer · 2020-01-27T09:14:13

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

How to use Protractor for non angular page in a application

1 Answers