(feature request): Adding .toHaveFocus() to the library

[mfrachet]

Hello folks and thank you for the great work you're doing with the tool! That's amazing 😊

I'm opening this issue to request for a .toHaveFocus() function that will allow to verify what is the actually focused element. This may become very helpful when testing for accessibility.

Actually, to determine if an element has focused on it, I have two options that are quite verbose:

  const axTreeSnapshot = await page.accessibility.snapshot({ root });
  // does not look very consistent on firefox from my experimentation, but I may be wrong
  axTreeSnapshot.focused

or as described in microsoft/playwright#2159 (comment) with the following:

const foo1Isfocused = await page.$eval("#foo1", (el) => el === document.activeElement)

What do you think?

[mmarkelov]

@mfrachet thanks for your suggestion. I think we can move the second option in separate helper.toHaveFocus()
That make sense for me.