代码之家 › 专栏 › 技术社区 › Tom

react datepicker-无法使用Testcafe打开日期弹出窗口

testcafe datepicker reactjs javascript

0

Tom · 技术社区 · 3 年前

我正在使用 react-datepicker 包作为我的应用程序的自定义日期选取器组件。我将其封装在自己的组件中,如下所示:

const MyCustomDatePicker = ({ onChange, value, error, disabled, placeholder, dateFormat }) => {
  return (
    <div className='date-input' data-test-id='date-picker'>
      <div className='date-input__field'>
        <DatePicker
          selected={value}
          disabled={disabled}
          onChange={onChange}
          dateFormat={dateFormat}
          placeholderText={placeholder}
          className='date-input__input'
        />
      </div>
    </div>
  );
};

在UI中运行良好,我可以从弹出窗口中选择日期:

然而,当我尝试在Testcafe中复制它时,我似乎无法让弹出窗口出现。我尝试了将自己的类名与react datepicker包生成的类名进行不同的组合:

import { Selector } from 'testcafe';

fixture`Getting Started`
  .page`https://my-page`;

test('My first test', async t => {
  await t.click(Selector('date-input__input'))
  await t.click(Selector('react-datepicker__input-container'))
  await t.click(Selector('react-datepicker-wrapper'))
  await t.wait(5000)
});

但这些都没有打开日期选择器弹出窗口。有可能在testcafe中这样做吗?

0 回复 | 直到 3 年前

1

0

Ilya Afanasenko 3 年前

在您提供的代码片段中,我看到一个错误:您试图按类获取选择器,但没有使用点。例如,尝试运行此测试:

import { Selector } from 'testcafe';

fixture `New Fixture`
    .page `https://reactdatepicker.com/`;
    
test(`New Test`, async t => {
    const anyPicker = Selector('.react-datepicker__input-container').nth(1);
    const input     = anyPicker.find('input');
    const dateCell  = Selector('.react-datepicker__day').withText('16');

    await t
        .click(input)
        .click(dateCell)
        .expect(input.value).eql('07/16/2022');
});