我们可以在TestCafe中结合CSS选择器和React选择器吗？

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返回的对象包含组件的道具，状态和键。 您组件的app.name属性不能包含TestCafe Selector。