1

我正在使用 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 写上面那行代码也很痛苦。

所以这很可能是特定于浏览器的场景，但它再次与三星 Galaxy Tab 4:firefox 和三星 Galaxy S9:firefox 一起工作。

这是正在发生的事情：由于我使用 Firefox 在 Windows 7 和 10 桌面上运行脚本，因此在屏幕上找不到 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 条件应该阻止代码进入代码块中的第二个 if 条件，因为实际上对于这个 OS-浏览器组合实际上没有显示汉堡菜单按钮。

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

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

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

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

4

1 回答 1

2

我们最终不得不编写一个客户端函数，该函数将通过使用 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);
于 2019-01-11T21:01:23.750 回答