Protractor can't perform click on <li> tag

Question

I'm tring to make an e2e test of my application but I can't perform click on search engine. This is the example I want to try to "click" on the first element but protractor stuck on the image below:

The website that I'm taliking about is this: https://rent.decathlon.it/

The result is a timeout error, so the element is not clicked.

This is the protractor code:

import { AppPage } from './app.po';
import {browser, by, element, logging} from 'protractor';
import {SearchBoxWizard} from '../elements/searchbox_wizard';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('shoud open select item', async () => {
    await page.navigateTo();
    browser.sleep(500);
    const searchBoxWizardElements = new SearchBoxWizard();
    await searchBoxWizardElements.getLocationInput().click();
    await searchBoxWizardElements.getLocationInput().clear();
    await searchBoxWizardElements.getLocationInput().sendKeys('Milano');
    await browser.sleep(500);
    element(by.css(`.autocomplete-search > ul > li:nth-child(1) > span`)).click();
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});

Someone have an idea of why?

I'm using this stack:

• Angular 8
• protractor 5.6 or 7
• Karma 4.1
• Jasmin 3

Regards

EDIT :

I notice very strange behavior, If I check if body is displayed, protractor can't see it, this is the code...

  it('shoud open select item', async () => {
    await page.navigateTo();
    const searchBoxWizardElements = new SearchBoxWizard();
    const cookiePolicy = new CookiePolicy();
    await cookiePolicy.getAcceptCta().click();
    await searchBoxWizardElements.getLocationInput().click();
    await searchBoxWizardElements.getLocationInput().clear();
    await searchBoxWizardElements.getLocationInput().sendKeys('Milano').then(
      async _ => {
        await browser.sleep(2500);
        await element(by.css('body')).isDisplayed();
      });
  });

I think it is something like "loosing" app focus... I don't know...

Have you got any idea?

Regards

Answer 1

1. it is definitely a google api. I checked that. Requests are coming back from https://maps.googleapis.com/maps/api/place/js
2. You missed await in many places. You need to read about promises and way to handle is with await

browser.sleep needs await

.click() needs await