Testcafe+Nightmare：为什么元素不在 DOM 中？答案

【问题标题】：Testcafe+Nightmare: Why is element not in DOM?Testcafe+Nightmare：为什么元素不在 DOM 中？
【发布时间】：2017-09-04 21:50:40
【问题描述】：

我有以下测试：

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 test.js 它按预期工作。

如果我这样做testcafe nightmare test.js，我会收到错误The element that matches the specified selector is not visible.。

我追踪到这一事实，显然电子浏览器的噩梦使用打开页面的视口导致桌面导航消失，因此.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 在噩梦模式下打开浏览器的维度？

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

不幸的是，现在我收到另一个错误：The specified selector does not match any element in the DOM tree. ...这似乎与第二个选择器有关。我不知道为什么。

所以我的第二个问题：这里的噩梦浏览器有什么不同？我在另一个页面上尝试了类似的测试用例，它似乎可以像 chrome 一样正常加载页面。

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

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

【问题讨论】：

标签： javascript testing acceptance-testing nightmare testcafe

【解决方案1】：

1) 目前，在您的情况下设置浏览器大小的唯一方法是使用t.resizeWindow 命令。为避免代码重复，您可以在 fixture.beforeEach 挂钩中执行此操作（请参阅 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();

【讨论】：

您好，感谢您的回答。因此，我尝试使用您提供的脚本进行重现，但是当窗口打开并且我在视觉上单击导航栏的第一个条目（具有 .dropdown-toggle 类）时，重定向仍然按预期发生？！我还搜索了代码，找不到任何与此类相关的preventDefault()。你能告诉我，你在哪里看到这个被调用，所以我可以进一步调查？
这里是截屏视频，您可以在其中看到我是如何找到它的：link1, advanced debug
我找到了错误的根源（请参阅其他评论），但现在有点超出我的深度，为什么会因为噩梦（或者更确切地说是电子）而失败。我可以通过将鼠标悬停在元素上并单击另一个来解决它。至少这让我的测试现在继续进行。 ;) 非常感谢您提供截屏视频的帮助。 ;)

【解决方案2】：

所以，在 Alexander 的帮助下（非常感谢！）我能够将这个错误的根源追溯到 jQuery。

以下几行似乎导致了这种行为：

    // Determine handlers
    handlerQueue = jQuery.event.handlers.call( this, event, handlers );

    // Run delegates first; they may want to stop propagation beneath us
    i = 0;
    while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
        event.currentTarget = matched.elem;

        j = 0;
        while ( ( handleObj = matched.handlers[ j++ ] ) &&
            !event.isImmediatePropagationStopped() ) {

            // Triggered event must either 1) have no namespace, or 2) have namespace(s)
            // a subset or equal to those in the bound event (both can have no namespace).
            if ( !event.rnamespace || event.rnamespace.test( handleObj.namespace ) ) {

                event.handleObj = handleObj;
                event.data = handleObj.data;

                ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
                    handleObj.handler ).apply( matched.elem, args );

                if ( ret !== undefined ) {
                    if ( ( event.result = ret ) === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }
            }
        }
    }

    // Call the postDispatch hook for the mapped type
    if ( special.postDispatch ) {
        special.postDispatch.call( this, event );
    }

我不太确定为什么会发生这种情况。尤其是为什么它只在测试运行时发生噩梦，而其他浏览器似乎做得很好......

【讨论】：