javascript - 咖啡厅+ Nightmare : Why is element not in DOM?

Question

我有以下测试:

fixture('Minimal reproduction')
  .page('http://www.sport-conrad.com/');


test('Navigate to item-details', async t => {
  await t
    .click('.dropdown-toggle')
    .click('.productData:first-of-type a')
  });

当我用testcafe chrome 测试.js它按预期工作。

如果我执行 testcafe nightmare test.js，我会得到错误 The element that matches the specified selector is not visible.。

我追踪到这个事实，显然 Electron-browser Nightmare 使用打开带有视口(viewport)的页面，导致桌面导航消失，因此 .dropdown-toggle 不可见了。所以我通过添加手动调整大小来解决这个问题:

fixture('Minimal reproduction')
  .page('http://www.sport-conrad.com/');


test('Navigate to item-details', async t => {
  await t
    .resizeWindow(1024, 900)
    .click('.dropdown-toggle')
    .click('.productData:first-of-type a')
  });

所以我的第一个问题:虽然这可行，但是否有另一种方法可以提供 testcafe 在 Nightmare 模式下打开浏览器的维度？

...但是:现在 .dropdown-toggle 回来了，我希望测试再次通过，就像以前一样。

不幸的是，现在我收到另一个错误:指定的选择器与 DOM 树中的任何元素都不匹配。 ...这似乎与第二个选择器有关。我不确定为什么。

那么我的第二个问题: Nightmare 般的浏览器有何不同之处？我在另一个页面上尝试了一个类似的测试用例，它似乎可以像 chrome 一样正常加载页面。

我还尝试了一些解决方法，例如强制浏览器等待一段时间，但没有任何效果。

也许有人可以在这里为我指明正确的方向？ :)

Answer 1

1) 目前，根据您的情况设置浏览器大小的唯一方法是使用 t.resizeWindow 命令。为避免代码重复，您可以在 fixture.beforeEach Hook 中执行此操作(参见 testcafe documentation)。

与此同时，Nightmare 允许通过其 constructor options 设置浏览器大小.但是有必要在 testcafe-browser-provider-nightmare 插件中为此添加 API。

2) 我在 nightmare 中以可视模式(没有 TestCafe)打开了您的站点，并尝试单击 .dropdown-toggle 链接。但是不会重定向到新页面。经过一些调试后，我看到 event.preventDefault() 在脚本中为点击事件调用。 (在 chrome 中，这不会被调用，并且会发生重定向)。脚本已缩小，因此很难确定调用 preventDefault 的真正原因。我认为这是电子浏览器特有的东西，有必要研究它为什么会发生。这是我如何运行它的脚本:

var Nightmare = require('nightmare');       
var nightmare = Nightmare({
    show: true,
    width: 1024,
    height: 600,
    webPreferences: { devTools: true },
    executionTimeout: 1000000,
    waitTimeout: 1000000
});

nightmare
  .goto('http://www.sport-conrad.com/')
  .wait(1000000)
  .end();