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

Question

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

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

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

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

正如我所说，这一切在许多不同的浏览器上都可以正常工作，但在 Windows 7 或 10 上的 Firefox 上却不行。我尝试调整我的脚本代码以处理更复杂的场景，即捕获汉堡菜单按钮(如果存在)，如果在 DOM 中找不到则忽略它。我不希望在我的解决方案中包含任何代码来检查高度动态的测试场景参数/属性，例如屏幕分辨率或特定浏览器或浏览器版本、操作系统或操作系统版本等...所以没有，例如:

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)

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

但是，代码块中的第一个 if 条件应该阻止代码到达代码块中的第二个 if 条件，因为事实上，对于此操作系统浏览器组合，汉堡菜单按钮实际上并未显示。

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

我不想使用 document.getElementByID 方法，因为这在技术上不是 CSS 选择器，而且我们的整个企业都在 CSS 选择器上进行了标准化，因此除 CSS 选择器之外的任何遍历 DOM 的内容都不会通过我们的代码审查流程。

再次强调，我正在寻找一种适用于所有这些场景/情况的通用解决方案。有什么想法或想法吗？提前致谢!!

相关(但不同)问题: TestCafe - 如何在不导致测试失败的情况下检查 Web 元素是否存在？ TestCafe - How to check if a web element exists or does not exist without failing the test?

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