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

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

有什么想法吗？

谢谢！我在使用testcafe。

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