0
434
Viewsreact-datepicker - cannot open date popup using Testcafe
I'm using the react-datepicker package as a custom Date Picker component for my app. I wrap it in my own component like so:
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>
);
};
Which works fine in the UI, I can select a date from the popup:
However, when I try replicating this in Testcafe, I can't seem to get the popup to appear. I've tried a different combination of my own class names and those generated by the react-datepicker package:
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)
});
But none of these open the date picker popup. Is it possible to do this in testcafe?
·
Santiago Gelvez
1 answers
Answer question0
In the snippet you provided, I see an error: you are trying to take a selector by class, but you are not using a dot. Try, for example, running this test:
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');
});
·
Santiago Gelvez
Report
Answer question