Protractor testing for Multiple Angular Application

[rameshrajendran214]

I have two angular application

1- For Login

2- For business Logic

Currently I have tried to start automation testing for these applications by using protractor. But facing problem to get the element details from 2nd application after login(1st application).

FYI, the files are

specs: [
        'login.js',// 1st application 
        'navigatetoRegisterReport.js',// page loaded by menu navigation from 1st application
        'requestCreation.js',// 2nd application page loaded by `browser.get(2nd app Url)`
        'navigateToDcOtherInvoice.js'// navigation to another screen in my 2nd application 
    ],

I have done the logic for login by this below way and it is working very well

async first() {
        await browser.driver.get(browser.baseUrl).then(async () => {
            await browser.wait(ExpectedConditions.elementToBeClickable(element(by.linkText("Other User"))), 30000);
            await element(by.linkText("Other User")).click().then(() => {
                browser.wait(ExpectedConditions.elementToBeClickable(element(by.css('#username'))), 30000);
                element(by.css('#username')).sendKeys('XXXXX').then(() => {
                    browser.wait(ExpectedConditions.elementToBeClickable(element(by.id("password-field"))), 30000);
                    element(by.id("password-field")).sendKeys('XXXXX').then(() => {
                        browser.wait(ExpectedConditions.elementToBeClickable(element(by.id('login-submit'))), 30000);
                        element(by.id('login-submit')).click().then(async () => {
                            const dashboardImage = await element(by.css("app-dashboard .dashboard-image"));
                            browser.wait(ExpectedConditions.elementToBeClickable(dashboardImage), 30000);
                            dashboardImage.isDisplayed().then((value) => {
                                if (value == true) {
                                    console.log('dashborad image is displayed')
                                } else {
                                    console.log('dashborad image is not identified')
                                }
                            }).catch(error => console.error('caught error while login', error));;
                        }).catch(error => console.error('caught error 7', error));;
                    }).catch(error => console.error('caught error on password', error));;
                }).catch(error => console.error('caught error on user name', error));;
            }).catch(error => console.error('caught error tab click', error));;
        }).catch(error => console.error('caught error on load', error));
    }

But while getting the element value from 2nd application I am getting error

async requestCreation(date: string, report: string) {

        await browser.get('https://2ndapplication/xxx/xxxx').then(async () => {
            var selectDate = element(by.xpath("//input[@id='icon-right']"));
            var reportType = element(by.xpath("//input[@placeholder='Report Type']"));
            browser.wait(ExpectedConditions.elementToBeClickable(selectDate), 30000);
            selectDate.clear();
            selectDate.sendKeys(date)
            browser.wait(ExpectedConditions.elementToBeClickable(reportType), 30000);
            reportType.click();
            reportType.clear();
            reportType.sendKeys(report)
        }).catch(error => console.error('caught error on requestCreation', error));
    }

Error:

ScriptTimeoutError: script timeout
(Session info: chrome=88.0.4324.190)
(Driver info: chromedriver=88.0.4324.96 (68dba2d8a0b149a1d3afac56fa74648032bcf46b-refs/branch-heads/4324@{#1784}),platform=Windows NT 10.0.18363 x86_64)
at Object.checkLegacyResponse (E:\updatedCode\backup\node_modules\selenium-webdriver\lib\error.js:546:15)
at parseHttpResponse (E:\updatedCode\backup\node_modules\selenium-webdriver\lib\http.js:509:13)
at doSend.then.response (E:\updatedCode\backup\node_modules\selenium-webdriver\lib\http.js:441:30)
at process._tickCallback (internal/process/next_tick.js:68:7)
From: Task: Protractor.waitForAngular() - Locator: By(xpath, //input[@id='icon-right'])

I can able to see the element in browser and it is visible. But protractor throwing the error as it is not there. I know it will be solved if I providing false for WaitForAngularDisabled(false). But the both applications are implemented by Angular only. So I don't want to loose any protractor features by disable angular. So kindly let me know how to test two angular application by protractor?

Versions:
Protector : 7.0.0
Angular:7.3.9

[StanislavKharchenko]

I've faced with the same issue several times ago and, according your comments, almost sure that issue is on application side.
The problem is that your application using async tasks, which should be run outside Angular zone.
See:
https://github.com/angular/protractor/blob/master/docs/timeouts.md
And more examples https://valor-software.com/articles/testing-with-protractor-how-to-fix-synchronization-issues.html

Our developers fixed this in application and e2e under protractor works fine.
So, any setTimeout, setInterval and similar async tasks should be wrapped to run outside Angular.
If there are no such issue in application, try to increase timeout parameters in protractor config (allScriptTimeout, getpagetimeout etc)

BTW: I also recommend you to modify style of test cases, I can see some mix of control flow and async/await.
Please don't use control flow, since it deprecated and will be cut from protractor in nearest future.

[rameshrajendran214]

@StanislavKharchenko Which means what changes you made in your application? and which one 1st or 2nd? I am getting the problem whenever i navigate to my second application. :(

[StanislavKharchenko]

@rameshrajendran214 this means that application you testing has implementation issue regarding async tasks usage, which should be called outside angular. You need to contact developers to investigate and fix it.
I mean that this problem looks not related to your test, but related to application which you want to test.

If allscriptstimeout and getpagetimeout don't help - this is 100% issue with application.

[rameshrajendran214]

I have found the root cause is Application insight, So I have moved the code outside of angular. Now the protractor is working very well.

this.ngZone.runOutsideAngular(() => { this.appInsightSvc.onPageLoad(); });

And ngb-carousel also throwing the same error For that I have fixed by the same

Add [interval]='0' in carousel control

<ngb-carousel *ngIf="images" [interval]='0' style="position: fixed;" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators"> <ng-template ngbSlide *ngFor="let image of images"> <img [src]="image" class="img-slide" alt="Random slide"> </ng-template> </ngb-carousel>

Add this code in componenet.ts
`import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@ViewChild(NgbCarousel)
private carousel: NgbCarousel;`

Define NgZone in constructor

private ngZone: NgZone

add this below line in ngOninit hook
this.ngZone.runOutsideAngular(() => { setInterval(() => { this.ngZone.run(() => { this.carousel.next(); }); }, 3000); });