Set value of ion-datetime for e2e test

Ionic Framework ionic-v3
1

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.

2

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
3

Am trying to do the same sort of thing in Ionic 6, where the ion-datetime has had a rewrite. Has anyone managed to do an e2e test (am using Cypress, but Protractor would be helpful too)?

4

Do you get any further with this?

5

I did, but it was horrible!

If you want the source code, let me have your email address. And never show it to anyone!