I want to e2e test something where the visibility of a div depends on the values of two ion-datetime
inputs. How can I set the value of the date input? I tried to access .value
of the native element, but the ngModel
isn’t bound to that.
I found a similar question which provides a solution by using the picker popover, but that is very inconvenient.
Does anyone know if it is currently possible to set an ion-datetime using a protractor e2e-test?
This solution is a bit simpler than @chager ’s solution:
describe('something', () => {
it('should ...', async () => {
expect(await $('ion-datetime').getAttribute('pickerformat')).toBe('h mm A');
await pick($('ion-datetime'), 10, 0, 'PM');
expect($('some-element').isPresent()).toBeTruthy();
});
});
const pause = t => new Promise(resolve => setTimeout(resolve, t));
const pick = async (datetimeEl, h, m, a) => {
if (typeof a === 'string') { a = (a === 'PM') ? 2 : 1; }
m += 1; // 0-59 => 1-60
// open time picker
await datetimeEl.click();
await pause(500);
// set value for each column
await [h, m, a].map(async (val, col) => {
const el = $$('.picker-col').get(col).$(`button:nth-of-type(${val})`);
await browser.executeScript('arguments[0].click()', el.getWebElement());
});
await pause(500);
// close time picker
await $('.picker-toolbar-button:not(.picker-toolbar-cancel) button').click();
await pause(500);
};
The pause is necessary because of the animations. But having some kind of direct access to the ngModel
would still be a lot easier.
1 Like