单击 testcafe 中的范围下拉菜单

【问题标题】：Clicking a reach dropdown in testcafe单击 testcafe 中的范围下拉菜单
【发布时间】：2020-04-23 07:16:48
【问题描述】：

我在 React 应用程序中使用 testcafe，但在让 testcafe 单击 Reach 下拉菜单中的下拉选项时遇到了一些问题。

在触发点击激活下拉菜单的按钮后，我可以使用 Selector 访问该选项，但点击所需的选项似乎根本没有做任何事情。

但是，如果我通过按键到达该选项，则会触发该操作。

//This works
await t
    .click('[testid="menuButton"]')
    .pressKey('down')
    .pressKey('down')
    .pressKey('enter'); 

//This doesn't
  await t
    .click('[testid="menuButton"]')
    .click('[data-reach-menu-item]:nth-of-type(3)');

我确保在第二种情况下选择正确，所以这似乎不是问题。

有什么想法吗？

谢谢！

【问题讨论】：

标签： reactjs testing automated-tests dropdown testcafe

【解决方案1】：

这个测试在我这边执行成功：

import { Selector } from 'testcafe';

fixture `fixture 1`
    .page `https://reacttraining.com/reach-ui/menu-button/`
test('test', async t => {
    await t
        .click('[data-reach-menu-button]')
        .click('[data-reach-menu-item]:nth-of-type(3)');
})

您的页面上可能有多个菜单按钮，因此 '[data-reach-menu-item]:nth-of-type(3)' 选择器指向一个不可见的项目。要检查这一点，请在代码中的 .click('[testid="menuButton"]') 之后插入 .debug()：

  await t
    .click('[testid="menuButton"]')
    .debug()
    .click('[data-reach-menu-item]:nth-of-type(3)');

测试代码在debug()处停止后，打开浏览器的开发控制台，执行document.querySelectorAll('[data-reach-menu-item]:nth-of-type(3)')命令，检查返回的第一个节点是否与下拉菜单中的第三个元素匹配。

【讨论】：