SendKeys synchronicity problem during Github CI tests

[remischwartz]

Hi,

I have a date input custom element that I am testing using sendKeys.
Here is an extract of the tests :

it('should update the value after user input', async () => {
  const el = await fixture<DSAInput>(
    html` <dsa-input type="date" required lang="fr-FR"></dsa-input> `
  );

  el.focus();
  await el.updateComplete;
  await sendKeys({ type: '25' });
  await sendKeys({ type: '10' });
  await sendKeys({ type: '2024' });
  await sendKeys({ press: 'Tab' });
  await el.updateComplete;

  expect(el.value).to.equal('2024-10-25');
});

The tests pass OK in local, but I get the following error when it is performed as part of my Github CI.

This looks like a sync problem.

Have you ever observed similar issues with sendKeys ?
Is there a way to add a delay between each key press ?

[YannDuv]

I have the same issue and suprisingly, it's also inside a date-picker - a custom datepicker with multiple <span> and contenteditable="plaintext-only".

Here are some of the errors I can have.

      AssertionError: expected '1988-09-15/0003-11-27' to equal '1988-09-15/2023-11-27'
      + expected - actual
      
      -1988-09-15/0003-11-27
      +1988-09-15/2023-11-27

Or, for the same test without modification

      AssertionError: expected '0088-09-15/2023-11-27' to equal '1988-09-15/2023-11-27'
      + expected - actual
      
      -0088-09-15/2023-11-27
      +1988-09-15/2023-11-27

Or

      AssertionError: expected '0088-12-31/2023-11-27' to equal '1988-09-15/2023-11-27'
      + expected - actual
      
      -0088-12-31/2023-11-27
      +1988-09-15/2023-11-27

Adding some timeout / nextFrame between each digit isn't solving the thing wich give the impression that the keys are just lost in the process.

it('Should be possible to write a range in field', async () => {
    const datePicker = await render({ range: true })
    datePicker.focus()
    await keyboard('15091988')
    await sendKeys({ down: 'Tab' })
    await keyboard('27112023')
    expect(datePicker.value).equal('1988-09-15/2023-11-27')
})

function keyboard(type: string): Promise<void> {
  // return sendKeys({ type }) // not working either
  return type.split('').reduce(
    (p, char) =>
      p
        .then(() => new Promise((resolve) => setTimeout(resolve, 20)))
        .then(() => sendKeys({ type: char }))
        .then(() => new Promise((resolve) => setTimeout(resolve, 20))),
    Promise.resolve()
  )
}