javascript - 无法在 "Type to search dropdown"中输入文本，这是使用 testcafe 的 react 组件

Question

无法在“键入搜索下拉列表”中键入文本，这是一个 react 组件。我可以单击该组件，但无法在其中输入任何文本。下面是示例代码。

import { Selector } from 'testcafe';

test('Select option', async t => {

    const dropdown = Selector('.section')
                .find('.Select.is-clearable.is-searchable.Select--multi')
                .find('.Select-control')
                .find('.Select-placeholder')
                .withText('Select...');

    await t.click(dropdown);
    await t.typeText(dropdown, 'abc'); // unable to pass text 'abc'
    await t.wait(3000);
});

使用类似组件的示例站点 http://jedwatson.github.io/react-select/

Answer 1

const dropdown = Selector('.section')
            .find('.Select.is-clearable.is-searchable.Select--multi')
            .find('.Select-control')
            .find('.Select-placeholder')
            .withText('Select...');

const inputField = dropdown
    .sibling('.Select-input')
    .find('input');

await t
    // wait until element is visible on the screen
    .expect(dropdown.with({visibilityCheck: true}).exists).ok({timeout: 5000})
    // access the element via the mouse (will fire the mouse event onMouseEnter)
    .hover(dropdown)
    .click(dropdown)
    .typeText(inputField, 'abc');