reactjs - 单击 testcafe 中的范围下拉菜单

Question

我在 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)');

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

有什么想法吗？

谢谢!

Answer 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)')命令，并检查第一个返回的节点是否与菜单下拉列表中的第三个元素匹配。