E2E - How to test login with fake data - username and password?

Question

I do have an angular login page build as a SPA: http://localhost:port/login which works fine. And I wrote an E2E integration test for that. It runs fine regarding checking the input-text for username and password and also the submit-button enabled/disabled based on if the input fields are empty or not.

Now I'am at the stage where I want to test a failed login process when the credentials (username and password) are not correct. But the test failed and I keep getting the following error:

1) user-app App should not login with wrong username and wrong password - Failed: Error while waiting for Protractor to sync with the page: true.

Here is the code for this specific login case:

it("should not login with wrong username and wrong password", () => {

     const userNameInput = element(by.name('username'));
     const userPassInput = element(by.name('password'));
     const submitButton = element( by.css(".login-btn") );

     userNameInput.sendKeys('johnfoo');
     userPassInput.sendKeys('3edF!4rfv');

     expect(submitButton.isEnabled()).toBe(true);

     submitButton
         .click()
         .then(() => {
             browser.waitForAngular();
             browser.sleep(1000);
             expect(page.validationMessage().isDisplayed()).toBe(true);
             expect(page.validationMessage().isDisplayed())
                                            .toMatch('Please check your username and/or password and try again!');
         });
});

Any idea or hint how to fix this? Habe been searching and found some old postings also in Stack Overflow, but they seem to be in a way different than the one I'am facing.

Answer 1

Protractor waits for the Angular zone to stabilise in case of Angular apps. If the stabilisation is taking long time, then your tests will timeout since the async operations around Angular's zone.js are probably taking more time to complete and would block your tests from continuing.

The best workaround is to have your tests not wait for this synchronisation to complete.

So you can set browser.ignoreSynchronisation = true or browser.waitForAngularEnabled(false [I prefer the earlier one].

Edit : You can also try using useAllAngular2AppRoots: true in your config.js file , and see it that resolves the error.