使用 testcafe 测试 react-select 下拉菜单答案

【问题标题】：Testing react-select dropdown with testcafe使用 testcafe 测试 react-select 下拉菜单
【发布时间】：2020-06-21 04:58:18
【问题描述】：

我正在尝试编写一个 lib 函数来使用 testcafe 测试我所有的 react-select 下拉菜单。但它没有按预期工作。

我尝试找到带有 id '#my-dropdown' 的 react-select，它传递了一个 prop 给我的组件。另外，我尝试在下拉列表中找到选项，然后选择具有新值的选项。

但是，它似乎没有按预期工作。

我在这里做错了什么？

自定义选择组件：

<div className='Custom-select'>
  <Select {...props} classNamePrefix='customSelect' tabSelectsValue isSearchable={false}/>
</div>

注意：道具包含 id - '#my-dropdown'。

testCafe 测试用例：

test('DropDown test', async t => {
  await dropdownValueSelector(t, { selector: '#my-dropdown', newValue: 'value 2' });
});

dropDownValueSelector

export default async (t, { selector, newValue }) => {
  await t.click(selector).click(selector.find('option').withText(newValue));
  const dropdownOption = Selector('.customSelect__input').find('input');
  await t.click(customSelect).find(dropdownOption.withText(newValue);
});

【问题讨论】：

标签： javascript reactjs dropdown react-select testcafe

【解决方案1】：

尝试使用testcafe-react-selectors插件；它提供了选择器扩展，可以更轻松地测试 ReactJS 组件。这些扩展允许您以 React 原生的方式选择页面元素。

【讨论】：