Frontend e2e test - how to detect google map is initialised on selenium?

Question

I am doing frontend e2e testing using WebDriverIo(4.13.2) with CucumberJs.

And I am quite new to e2e testing.

My app uses Google map and there are map markers.

Basically, my e2e testing wants to do :

• Wait til Google map component initialised
• Search Google map marker DOM by browser object from WebDriverIo
• If the marker exist, pass the test

The problem is that Google map's initialisation takes time.

Sometimes it takes more than 30 seconds on Selenium. So the second scenario fails. (Timeout)

I have tried browser.pause(30000);. So Selenium waits 30 seconds.

But it still fails depends how Google Map response quickly. Moreover I don't think waiting 30 seconds is an ideal solution.

The below is the test code.

My scenario is :

...
Then I should see map
And I should see map marker
...

My step is :

Then('I should see map', async () => {
  const path = 'my-page map-component';

  myPage.mapComponent.waitForShadowDomElement(path);

  // Wait for 30 seconds
  browser.pause(30000);
});

Then('I should see map marker', async () => {
  const path = 'my-page ${page}'

  // Get marker img src
  const marker = await browser.getAttribute(`${path} #map img[src*="marker"] img`, 'src');

  assert.isTrue(marker.includes('marker-img.svg'));
});

I thought that myPage.mapComponent.waitForShadowDomElement(path); is not enough to wait Google map init because it waits just for the cover of map.

I also I have test like browser.waitForVisible(MAP_PATH);.

But no luck.

How can I wait Google map completely being loaded on WebDriverIo?

Thanks!!

FYI, In frontend, I am using Polymer component which WebDriverIo can't detect.

So I am using 3rd party library called wdio-webcomponents.

Answer 1

I solved the issue. The key was waitForExist method. (document)

Then('I should see map', async () => {
  const path = 'my-page map-component';

  // Wait for 30 seconds max
  await browser.waitForExist(`${path} #map`, 30000);
});

I have tested actually before. But I didn't use await that time. That's why it failed.