Estoy usando el paquete react-datepicker como un componente Selector de fecha personalizado para mi aplicación. Lo envuelvo en mi propio componente así:
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> ); };Lo que funciona bien en la interfaz de usuario, puedo seleccionar una fecha de la ventana emergente:
Sin embargo, cuando intento replicar esto en Testcafe, parece que no puedo hacer que aparezca la ventana emergente. Probé una combinación diferente de mis propios nombres de clase y los generados por el paquete 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) });Pero ninguno de estos abre la ventana emergente del selector de fecha. ¿Es posible hacer esto en testcafe?
En el fragmento que proporcionó, veo un error: está tratando de tomar un selector por clase, pero no está usando un punto. Intente, por ejemplo, ejecutar esta prueba:
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'); });