使用Testcafe无法打开react-datepicker日期弹窗的问题

问题场景 #

我基于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编写测试用例时，尝试了多种类名选择器组合都无法打开弹窗，测试代码如下：

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

解决方法 #

1. 优先使用data-test-id定位元素 #

组件已配置data-test-id='date-picker'，可以先定位容器，再精准找到内部的input元素触发点击：

test('打开日期选择器弹窗', async t => {
  // 定位组件容器
  const datePickerContainer = Selector('[data-test-id="date-picker"]');
  // 找到容器内的input元素
  const dateInput = datePickerContainer.find('input.date-input__input');
  
  await t.click(dateInput);
});

2. 直接定位原生input元素 #

react-datepicker最终会渲染出原生<input>标签，可直接定位该元素。若之前的选择器失效，建议用浏览器DevTools查看实际DOM结构，确认input的正确选择器（比如是否被react-datepicker额外包裹）。

3. 组合聚焦与点击操作 #

部分场景下，需要先让input获得焦点再点击，确保交互事件被正确触发：

await t
  .focus(dateInput)
  .click(dateInput);

4. 检查组件禁用状态 #

测试前先验证组件未处于禁用状态，若disabled属性为true，点击操作不会生效：

await t.expect(dateInput.hasAttribute('disabled')).notOk();

内容的提问来源于stack exchange，提问作者Tom