前端 e2e 测试 - 如何检测谷歌地图是否在硒上初始化？答案

【问题标题】：Frontend e2e test - how to detect google map is initialised on selenium?前端 e2e 测试 - 如何检测谷歌地图是否在硒上初始化？
【发布时间】：2019-05-08 22:10:59
【问题描述】：

我正在使用 WebDriverIo(4.13.2) 和 CucumberJs 进行前端 e2e 测试。

而且我对 e2e 测试还很陌生。

我的应用使用谷歌地图，并且有地图标记。

基本上，我的 e2e 测试想做：

等待 Google 地图组件初始化
通过来自 WebDriverIo 的 browser 对象搜索 Google 地图标记 DOM
如果标记存在，则通过测试

问题是谷歌地图的初始化需要时间。

有时在 Selenium 上需要超过 30 秒。所以第二种情况失败了。（超时）

我试过browser.pause(30000);。所以 Selenium 等待 30 秒。

但它仍然失败取决于谷歌地图如何快速响应。此外，我不认为等待 30 秒是一个理想的解决方案。

下面是测试代码。

我的情况是：

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

我的步骤是：

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'));
});

我认为myPage.mapComponent.waitForShadowDomElement(path); 等待谷歌地图初始化是不够的，因为它只是等待地图的封面。

我也有类似browser.waitForVisible(MAP_PATH);的测试。

但没有运气。

如何等待 Google 地图完全加载到 WebDriverIo 上？

谢谢！！

仅供参考，在前端，我正在使用 WebDriverIo 无法检测到的 Polymer 组件。

所以我正在使用名为 wdio-webcomponents 的第 3 方库。

【问题讨论】：

堆栈溢出警告我如果我发布这个我可能会得到一些反对意见。但我不明白为什么。谁能解释一下为什么这个问题被否决了？

标签： selenium google-maps e2e-testing cucumberjs webdriver-io-v4

【解决方案1】：

我解决了这个问题。关键是waitForExist 方法。 (document)

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

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

我之前实际测试过。但那次我没有使用await。这就是它失败的原因。

【讨论】：