Protractor: How to properly wait after a click?

Question

I am using Protractor for e2e testing. The tests should first enter too short username and passwords and because of Angular validators when clicked on a submit button (which is disabled) get rejected and stay put (this works!), then it should enter an username of correct length with also a password of a correct length, click on the submit button and NOT get redirected, because it's a false login. This fails... The last test requires to input correct login details and click on submit and should get redirected to the dashboard. According to this answer https://stackoverflow.com/a/21785088/12360035 is all it would take to solve my problem that seems to throw the

- Failed: script timeout
    (Session info: chrome=79.0.3945.130)
    (Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.18362 x86_64)```

error for both of my tests. How do I fix this? My tests are written this way:

it('should enter too short username and password and NOT get redirected => stay put', () => {
   element(by.css('#inputUser')).sendKeys('bah');
   element(by.css('#inputPassword')).sendKeys('bah');
   const btn = element(by.css('#loginSubmit'));
   btn.click();
   const curUrl = browser.getCurrentUrl();
   expect(curUrl).toBe('http://localhost:4200/avior/login');
 });

  it('should enter incorrect username and password and NOT get redirected => stay put', () => {
    const ele1 = element(by.css('#inputUser'));
    const ele2 = element(by.css('#inputPassword'));
    const btn = element(by.css('#loginSubmit'));
    ele1.clear();
    ele2.clear();
    ele1.sendKeys('bah');
    ele2.sendKeys('bahbahbah');
    btn.click();
    browser.waitForAngular();
    const curUrl = browser.getCurrentUrl();
    expect(curUrl).toBe('http://localhost:4200/avior/login');
  });

  it('should enter correct username and password and get redirected to /avior/dashboard', () => {
    const ele1 = element(by.css('#inputUser'));
    const ele2 = element(by.css('#inputPassword'));
    const btn = element(by.css('#loginSubmit'));
    ele1.clear();
    ele2.clear();
    ele1.sendKeys('Chad');
    ele2.sendKeys('chadchad');
    btn.click();
    browser.waitForAngular();
    const curUrl = browser.getCurrentUrl();
    expect(curUrl).toBe('http://localhost:4200/avior/dashboard');
  });

UPDATE A jwt token is sent as a cookie in response, that might be part of the problem. I can't seem to find info online on how to handle cookies with Protractor..

Have you disabled the angular wait at any stage using `browser.waitForAngularEnabled(false)` or `browser.ignoreSynchronization`? — DublinDev, Jan 20 '20 at 17:09
@DublinDev just searched over my whole codebase, no I haven't disabled it with either of those — Munchkin, Jan 20 '20 at 17:23
Is it clearing the fields or entering the values for the second test case? — DublinDev, Jan 20 '20 at 21:34
@DublinDev Clearing the fields so that new input can be entered. — Munchkin, Jan 21 '20 at 10:46
And is the clearing action and the new text entry for those fields working successfully in the second test case? — DublinDev, Jan 21 '20 at 10:56
@DublinDev It seems (according to the view during carrying out of an e2e test) that the clearing and typing works for the first and second test, but fails for the third.. — Munchkin, Jan 21 '20 at 11:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Waits in Protractor

Wait for the element to Present

this.waitForElementPresent = function (element) {
    return browser.wait(() => (element.isPresent()), 30000);
}

Wait for the element to Display

 this.waitForElementDisplayed = function (element) {
    return browser.wait(() => (element.isDisplayed()), 30000);
}

Sleep Condition

this.sleep = function (sec) {
    browser.sleep(sec * 1000);
}

Expected Conditions

this.waitForElementVisibility = function () {
    let EC = ExpectedConditions;
    return browser.wait(EC.visibilityOf(), 30000);
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 21 '20 at 11:26

Debasish Patra

71
5

Thank you for your answer. Which one should I use in my code? – Munchkin Jan 21 '20 at 11:29
The Sleep Condition did not work. Maybe there's something else wrong with my code and only the wait part? Could you look into it please? – Munchkin Jan 21 '20 at 11:46
Simple, write " browser.sleep(5000); ". it will wait for 5 seconds. Put it after the click button. – Debasish Patra Jan 21 '20 at 11:48
it does not work :/ throws out the same `- Failed: script timeout` – Munchkin Jan 21 '20 at 12:02
@Debasish It is a bad idea to include your phone number on posts in this way. You should remove it and request OP includes the screenshot another way. – DublinDev Jan 21 '20 at 13:08
@DebasishPatra https://send.firefox.com/download/991407a8a00a0835/#nEe02G_IC2-cjFt0OJD7dA – Munchkin Jan 21 '20 at 13:29

score 0 · Answer 2 · answered Jan 21 '20 at 14:59

According to this question Failed: script timeout: result was not received in 11 seconds From: Task: Protractor.waitForAngular() - Locator: By(css selector, #my-btn) adding browser.waitForAngularEnabled(false); before the button clicks seems to have solved the errors..

Protractor: How to properly wait after a click?

2 Answers2

Waits in Protractor