Can we combine css selectors and react selectors in TestCafe?

Question

I am currently working in react based application and I want to click on the element which is the combination of react selector and CSS selectors.

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 is not a function

Answer 1

You can use both ReactSelector and Selector to specify an element in your tests.  Import them first and then use in a test, for example:

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

Note that the getReact() method returns an object containing a component's props, state and key. Your component's app.name property cannot contain TestCafe Selector.