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

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

我们已经开始使用BrowserStack执行跨浏览器测试，我正在尝试针对Windows7:firefox和Windows10:firefox运行脚本

当我使用这些选项执行TestCafe时，并且只有在那时，我才会得到这个失败。因此，当我在三星Galaxy S9:chrome或三星Galaxy S9:firefox或Windows 10:edge或Windows 7:chrome上执行时，我没有看到这种失败

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

正如我所说，这一切都可以在许多不同的浏览器上正常工作，但在Windows7或10上的Firefox就不行了。我已经尝试调整脚本代码以处理更复杂的场景，即捕获汉堡菜单按钮（如果它存在）并忽略它（如果在DOM中找不到）。我不想在我的解决方案中有任何代码检查高度动态的测试场景参数/属性，如屏幕分辨率或特定浏览器或浏览器版本、操作系统或操作系统版本等。。。所以，没有什么比这更像：

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

--UGGG甚至写这行代码都很痛苦

因此，这很可能是一个特定于浏览器的场景，但它同样适用于三星Galaxy Tab 4:firefox和三星Galaxy S9:firefox

以下是正在发生的事情： 由于我在Windows7&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?!

我还应该补充一点，汉堡菜单选择器是用visibilityCheck:true定义的

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

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

那就不同了

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

我已经知道第一个条件不能像上面使用的那样在filter if条件中解析，而推荐的filter if条件是第二个条件，这就是我使用它的原因

但是，代码块中的第一个if条件应该阻止代码进入代码块中的第二个if条件，因为实际上，对于此OS浏览器组合，并没有实际显示汉堡菜单按钮

我能想到的另一件事是，Windows桌面中web元素上的.visible选项：Firefox以某种方式返回了与Android:Firefox或Desktop:chrome或Android:chrome不同的结果或行为

我不想使用document.getElementByID方法，因为从技术上讲，这不是一个CSS选择器，我们的整个企业都是在CSS选择器上标准化的，所以任何在DOM中运行的东西，而不是CSS选择器，都不会通过我们的代码审查过程

因此，我再次寻找一种通用解决方案，它可以在所有这些场景/情况下工作。有什么想法或想法吗？提前谢谢

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

---

我们最终不得不编写一个客户端函数，该函数将使用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);

调用方代码如下所示：

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

---

您不能使用文档。但是，可以考虑使用Debug .QuestS选择器（“You-CSS”）吗？您可以对返回的元素执行所需的可见性检查您是否尝试从条件中提取wait navbar.hamburgerMenu.exists，将其值保存到一个变量并记录它？我仔细查看了DOM，发现它在可见和不可见时的差异为零（0）。我们的一位团队成员认为，他发现了后端Javascript上的一个属性发生了变化，因此我们可能有办法解决这个问题。随着我们的进步，我将相应地进行更新。要在不通过测试的情况下检查web元素是否存在，本文可能会很有用：很好！谢谢分享！！：-D