我们可以在 TestCafe 中组合 css 选择器和反应选择器吗？

Question

我目前在基于 React 的应用程序中工作，我想单击由 React 选择器和 CSS 选择器组合而成的元素。

const app_ui = ReactSelector("AppUi")
const tmp = await app_ui.getReact();
const app_name = tmp.props.app.name
const tiles = app_name.Selector('.qa-card');
await t.hover(tiles).click(Selector('button').withText('Launch'))

TypeError: app_name.Selector 不是函数

Answer 1

您可以使用 ReactSelector 和 Selector 来指定测试中的元素。 先导入它们，然后在测试中使用，例如：

import { ReactSelector } from 'testcafe-react-selectors';
import { Selector } from 'testcafe';

fixture`fixture`
    .page`http://url`;

test('test', async t => {
    //you can interact with app_ui as well as elements specified by Selector
    const app_ui = ReactSelector("AppUi");
    const tiles  = Selector('.qa-card');

    await t
        .hover(tiles)
        .click(Selector('button').withText('Launch'));
});

请注意，getReact() method returns 一个包含组件属性、状态和键的对象。 您的组件的 app.name 属性 不能包含 TestCafe Selector.