Protractor does not detect element after login

Question

On login page everything works perfect, I can select the inputs, select the submit button and click the submit button, the url changes like I expect, but after the login I can't select elements anymore from some reason.

   // #1 login test
  it('should send check in desktop', async () => {

    await loginPage.login(environment.e2e.user.phone, environment.e2e.user.password);

    await loginPage.verifySuccessfullLogin();
    console.log('After verifySuccessfullLogin');

    await browser.sleep(3000);
    console.log('After sleep');

    const sendBtn = $('#sendCheckBtnDesktop');
    console.log(sendBtn);
    await sendBtn.click();

    // Not getting here
    await browser.sleep(10000);
  });

Rest of the Code:

  navigateToLoginPage() {
    return browser.get(environment.e2e.baseUrl);
  }
  getPhoneInput() {
    return $('#phoneNumber');
  }
  getPasswordInput() {
    return $('#login-password');
  }
  getSubmitButton() {
    return $('#submitLoginBtn');
  }
  verifySuccessfullLogin() {
    return browser.wait(browser.ExpectedConditions.urlContains('/user/personal'), 10000);
  }

  public async login(phone: string = environment.e2e.user.phone, password: string = environment.e2e.user.password) {
    await this.navigateToLoginPage();

    const phoneInput = this.getPhoneInput();
    await phoneInput.sendKeys(phone);

    const passInput = this.getPasswordInput();
    await passInput.sendKeys(password);

    const submitBtn = this.getSubmitButton();
    await submitBtn.click();
  }

so you fixed the issue, and made the same problem in another place, just as I predicted. I'm still around if you need my help, just ask — Sergey Pleshakov, May 19 '21 at 12:22
Hi @SergeyPleshakov, how are you, it's the same issue, but I found it's very common to not be able to detect element after login https://github.com/angular/protractor/issues/143 If you know how to solve this I will appreciate it. — Offir, May 19 '21 at 12:30
@SergeyPleshakov I read some of your answers and decided to go with `await` instead of `then`. — Offir, May 19 '21 at 12:32

score 2 · Answer 1 · edited May 19 '21 at 13:28

2

Problem in this line!

return browser.wait(browser.ExpectedConditions.urlContains('/user/personal'), 10000);

it should have been

return browser.wait(protractor.ExpectedConditions.urlContains('/user/personal'), 10000);

  it('should send check in desktop', async () => {

    // *************
    // HERE!
    // *************
    await loginPage.login(environment.e2e.user.phone, environment.e2e.user.password);

    await loginPage.verifySuccessfullLogin();
    console.log('After verifySuccessfullLogin');

    await browser.sleep(3000);
    console.log('After sleep');

    const sendBtn = $('#sendCheckBtnDesktop');
    console.log(sendBtn);
    // Nothing happens
    await sendBtn.click(); <--------- you were missing await here, but you fixed it

    // Not getting here
    await browser.sleep(10000);
  });

edited May 19 '21 at 13:28

Offir

3,252
3
41
73

answered May 19 '21 at 12:49

Sergey Pleshakov

7,964
2
17
40

Hi Sergey, thank you for the answer, I understand what `await` is, you can see in my code I used it a few times. One thing I don't understand is about the login function which works fine without adding `await`, I am not sure why it works, I will add the code to my question. – Offir May 19 '21 at 12:55
@OffirPe'er one command is being executed before the one before is completed https://en.wikipedia.org/wiki/Race_condition – Sergey Pleshakov May 19 '21 at 12:58
I added the `await` like you suggested and I Added the rest of my code to the question, still doesn't work.... – Offir May 19 '21 at 13:04
while I'm checking take a look and my addition to the answer – Sergey Pleshakov May 19 '21 at 13:07
okay, I found one issue and one area for improvement, updated the answer^ @OffirPe'er – Sergey Pleshakov May 19 '21 at 13:13
After changing everything just like you mentioned, I still facing the same problem... the click is not working – Offir May 19 '21 at 13:19
I can't select the button element even though it's there, that's so weird, I tried to refresh the page, added sleep methods, navigate, I even put the same submit button from login page and tried to select it without success, the problem is with `Angular`, maybe something in my configurations. – Offir May 19 '21 at 13:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/232587/discussion-between-sergey-pleshakov-and-offir-peer). – Sergey Pleshakov May 19 '21 at 13:44

score 1 · Accepted Answer · answered May 19 '21 at 14:03

I think it's hidden by another element.

You can try:

await browser.executeScript(`
    const btn = document.getElementById('sendCheckBtnDesktop');
    btn.click();
`);

If it works, this element is not clickable using the protractor (Maybe it's behind another element).

You can read more about the differences between clicking using protractor to JS.

Protractor does not detect element after login

2 Answers2