选择器存在但无法获取有关节点的信息，因为指定的选择器与 DOM 树中的任何节点都不匹配

Question

我正在使用 NodeJS 和 TestCafe 构建 E2E 测试。

我们已经开始使用 BrowserStack 来执行 cross-browser 测试，我正在尝试运行针对 Windows7:firefox 和 Windows10:firefox 的脚本。

当我使用这些选项执行 TestCafe 时，然后才出现此故障。因此，当我在 Samsung Galaxy S9:chrome 或 Samsung Galaxy S9:firefox 或 Windows 10:edge 或 Windows 7:chrome 上执行时，我没有看到此失败。

我们的网站旨在适应浏览器 window 的大小。因此，如果 window 很小，那么我们会看到一个汉堡菜单按钮，它会展开以提供诸如登录、注销、项目等选项... 如果 window 较大或（宽），则所有内容都显示在 header 条上。

正如我所说，这一切在许多不同的浏览器上都可以正常工作，但在 Windows 7 或 10 上的 Firefox 却不行。我试图调整我的脚本代码以适应更复杂的抓汉堡包场景如果存在菜单按钮，如果在 DOM 中找不到则忽略它。我确实 NOT 希望在我的解决方案中包含任何代码来检查高度动态的测试场景 parameters/properties，例如屏幕分辨率或特定浏览器或浏览器版本，OS 或 OS 版本，等等...所以 NOTHING like:

if (OperatingSystem === 'Windows' && Browser === 'firefox')

--UGGG 甚至写上面那行代码也很痛苦。

所以这很可能是特定于浏览器的情况，但它再次适用于 Samsung Galaxy Tab 4:firefox 和 Samsung Galaxy S9:firefox。

这是正在发生的事情：由于我运行在 Windows 7 & 10 桌面上用 firefox 设置脚本，因此在屏幕上找不到 hambuger 菜单。然而条件：

if (await navbar.hamburgerMenu.exists === true) {
    // Execution gets here, even though there is NO hamburgerMenu button.
    // The next line triggers an error that kills the script.
    if (await navbar.hamburgerMenu.visible) {
        // The above line of code returns an error:
// Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.
// Then how come it passed the hamburgerMenu.exists === true condition?!

我还应该补充一点，hamburgerMenu 选择器是用 visibilityCheck 定义的：true

虽然我知道在这种情况下它不会影响结果，因为

if (Selector('blablabla', {( visibilityCheck: true )})

与

不同

if (Selector('blablabla').visible === true)

我已经知道第一个在filter-if-condition中没有像上面使用的那样解析，推荐的filter-if-condition是第二个，这就是我使用它的原因。

但是，代码块中的第一个 if-condition 应该阻止代码到达代码块中的第二个 if-condition，因为 in-fact 汉堡包菜单按钮是此 OS-browser 组合实际上并未显示。

我唯一能想到的另一件事是，也许 Windows Desktop:Firefox 中 Web 元素上的 .visible 选项以某种方式返回不同的结果或行为，如果它是 Android:firefox 或 Desktop:chrome 或 Android:chrome.

我不想使用 document.getElementByID 方法，因为这在技术上不是 CSS 选择器，而且我们整个企业都在 CSS 选择器上标准化，所以任何走 DOM 除了 CSS 选择器无论如何都不会通过我们的代码审查过程。

所以，我再次寻找适用于所有这些 scenarios/situations 的通用解决方案。有什么想法或想法吗？提前致谢！！

相关（但不同）问题： TestCafe - 如何在测试失败的情况下检查 Web 元素是否存在或不存在？

Answer 1

我们最终不得不编写一个客户端函数来使用 querySelector 查询计算样式，并获取它的属性值。

解决方案代码最终如下所示：

const getHamburgerDisplayValue = ClientFunction(() => {
     var hamburgerDisplayValue;

     hamburgerDisplayValue = window.getComputedStyle(document.querySelector('span.navbar-burger')).getPropertyValue('display');

     return hamburgerDisplayValue;
 });

调用方代码看起来像这样：

 var hamburgerDisplayValue = await Common.getHamburgerDisplayValue();

 // Act
 if (hamburgerDisplayValue === 'block') {
      await t.click(navbar.hamburgerMenu);
 }
 await t.click(navbar.login);

选择器存在但无法获取有关节点的信息，因为指定的选择器与 DOM 树中的任何节点都不匹配

Selector Exists but Cannot obtain information about the node because the specified selector does not match any node in the DOM tree

cross-browser

node.js

ecmascript-6

browserstack

testcafe