[Feature]: print the entire html tag in debug when it's intercepting click events

[HugoImaios]

🚀 Feature Request

When performing the actionability of a click on an element and other elements intercepts pointer events, the latter should be printed with all his attributes.

Example

  - retrying click action, attempt #26
  -   waiting 500ms
  -   waiting for element to be visible, enabled and stable
  -   element is visible, enabled and stable
  -   scrolling into view if needed
  -   done scrolling
  -   <div data-v-8e10e111="" data-v-b9bc3028="" class="qui…>…</div> from <div data-v-b9bc3028="" data-v-91a0e5df="">…</div> subtree intercepts pointer events

The feature request is about those ...

Motivation

I totally get that we can't have the whole html outputted (the second and the third ...), but would it be possible to have the whole html tag ? In my example, it would mean having what is after class="qui.
As you can see in my example, the first attributes might not always lead us to the actual element in our code that intercept click, making debugging really difficult

[Joe-Hendley]

I can have a look at this one.

Would it be worth restricting the fully outputted tags to a subset of commonly used identifiers? e.g. id and class

[HugoImaios]

Would it be worth restricting the fully outputted tags to a subset of commonly used identifiers? e.g. id and class

I though about it, especially for id which shall be unique in a page. We could be fine with only reordering the attributes, putting id first and leaving the truncate as is. But :

• id might be unique in a page but not in the codebase
• when searching in my codebase, I personnaly tend to copy-paste the whole html tag, increasing my chances to find the right one (maybe with a regex to work around vue data-v-8e10e111 like hashes)

So, at the end, I think it's just better to throw the whole tag with every attribute, in the order found in the dom, in a unopinionated way.

[dgozman]

@Joe-Hendley Would you still like to contribute a PR? I think we should just bump from 50 to 500 here: https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/injected/injectedScript.ts#L986 and update the tests.

[Joe-Hendley]

Sounds good to me - life got in front of doing anything towards this in the meantime!

I'll throw something together today / monday at the latest.

[HugoImaios]

Thanks you two 🎉

[HugoImaios]

hello @dgozman !
Just a quick question : what is the release process once a PR is merged to main ? I haven't seen it mentioned in neither the 1.45 or 1.45.1 release notes. (I guess there is a huge pipe of PR)
I haven't found any information about it in CONTRIBUTING.md neither
Have a nice day

[HugoImaios]

Hello @mxschmitt !
Maybe you have answers to that 😕

hello @dgozman ! Just a quick question : what is the release process once a PR is merged to main ? I haven't seen it mentioned in neither the 1.45 or 1.45.1 release notes. (I guess there is a huge pipe of PR) I haven't found any information about it in CONTRIBUTING.md neither Have a nice day

[mxschmitt]

@HugoImaios this should be released already. We don't mention small fixes like this. If you experience bugs, I recommend to file a new separate issue.

[HugoImaios]

@mxschmitt oh ok sorry ! I though the changelog was generated from merged PR and linked issues.
I'll indeed update, test it and fill a new issue if needed.
Have a nice day