Можем ли мы объединить селекторы css и реакторы в TestCafe?

Question

В настоящее время я работаю в приложении на основе реагирования и хочу нажать на элемент, который представляет собой комбинацию селектора реакции и селекторов 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: имя_приложения. Выбор не является функцией

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() возвращает объект, содержащий реквизиты, состояние и ключ компонента. Свойство app.name вашего компонента не может содержать TestCafe Selector .