angular testing multiple files in sequence - Error while waiting for Protractor to sync with the page

Question

Started with Angular E2E, and tried to test multiple files (divided the test cases module wise).

Changes made in protractor.conf.js

specs: [
     "./src/login/login.component.e2e-spec.ts",
     "./src/customs-portal/home.component.e2e-spec.ts",
],

this runs the test cases of both files in the same sequence.

In the home test case file I have written

beforeAll(() => {
     homePage= new HomePage();
     helperService = new HelperService();

     CSS = homePage.CSS;
     helperService.navigate("/home");

     helperService.skipIntro();
});

i navigate to /home, on home page there is skip button that i clicks to avoid intro phase about the page. Here is how skipIntro function looks like

async skipIntro(): Promise<any> {
    const _skipBtn = await element(by.css(this.CSS.SKIP_INTRO));
    console.log("HelperService -> _skipBtn", _skipBtn);
    if (_skipBtn) {
        _skipBtn.click();
    }
}

but it shows error and fails the test case

it("dummy test always paas", async () => {
        expect(true).toEqual(true);
});

here is the error

- Error: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined.  This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping.  See http://git.io/v4gXM for details"

here is helperService.navigate

navigate(path: string): promise.Promise<any> {
        return browser.get(path);
}

any help on this, not much experience on Angular E2E.

Ganesh H Ganesh H · Accepted Answer · 2020-08-14T14:33:13

Try this it should work

     beforeAll(async () => {
     homePage= new HomePage();
     helperService = new HelperService();
     CSS = homePage.CSS;

    await helperService.navigate("/home");
    await  helperService.skipIntro();
});

async skipIntro(): Promise<any> {
 const _skipBtn =await element(by.css(this.CSS.SKIP_INTRO));
    console.log("HelperService -> _skipBtn", _skipBtn);
    if (_skipBtn) {
        await _skipBtn.click();
    }
}

async navigate(path: string): promise.Promise<any> {
        await return browser.get(path);
}

async skipIntro(): Promise<any> {
    const _skipBtn = await element(by.css(this.CSS.SKIP_INTRO));
    console.log("HelperService -> _skipBtn", _skipBtn);
    if (_skipBtn) {
        await _skipBtn.click();
    }
}

async navigate(path: string): promise.Promise<any> {
        await return browser.get(path);
}

angular testing multiple files in sequence - Error while waiting for Protractor to sync with the page

3 Answers