Focus switch/animation complete after pressing a button

[quidow]

Hello @dlenroc, Is it possible to track somehow that the focus was moved after pressing a button? At this moment I use 0.5 sec sleep after each press to make sure the animation is complete and the focus is moved, but maybe there is a smarter way to do it instead of using this sleep.

[dlenroc]

For such cases, I use Action API.

await browser
  .action('pointer')
  .move({ origin: element, duration: 5000 })
  .perform();

Alternatively, you can use knowledge about the current element in focus to create more complex navigation steps.

// 1. Identify focused element
const previousActiveElement = await $(await browser.getActiveElement());

// 2. Press a button from the remote
await browser.action('key').down(Key.ArrowDown).up(Key.ArrowDown).perform();

// 3. Wait focused element to change
await browser.waitUntil(
  async () => {
    const activeElement = await $(await browser.getActiveElement());

    // 📝 This comparison is valid only for the element ID returned by the "getActiveElement" command.
    // If the element you want to wait to get focused is found using e.g., $('#id'),
    // then I would suggest using element properties or attributes, as shown in the next sample.
    return previousActiveElement.elementId !== activeElement.elementId;
  },
  {
    interval: 100,
    timeout: 5000,
  }
);

Or, if you know the next element that should receive focus

await expect(element).toHaveElementProperty('isInFocusChain', 'true', { wait: 5000 });
// Properties:
//   • isFocused - returns `"true"` if the element is focused.
//   • isInFocusChain - returns `"true"` if the element or any of its descendants are focused.
//   • isInFocusHierarchy - returns `"true"` if the element or any of its ancestors or descendants is focused.

PS:

• Samples use WebdriverIO api, but similar methods are available for other languages/libraries.
• If there is interest, I may enable GitHub discussion for this repository for questions and ideas.