[Feature] Method to wait for event listeners to be attached

[arjunattam]

Not having event listeners attached in time is a common cause of flakiness. While page.click automatically checks for whether element is receiving events, it would be useful to expose a lower-level convenience method that can check whether a particular event listener has been attached. For example, the Azure ML designer can check whether mousemove listener is attached to an element.

cc @JYC-99

[pavelfeldman]

First of all, thank you for filing this issue. We appreciate your input, in many ways Playwright is based on it. This particular feature request didn't get enough stars for us to prioritize the work on it and hence is being closed. We are a relatively small team and we need to prioritize aggressively to deliver support and new features to you.

[gordolio]

Shame. I'm having this same issue of my test being really flaky because events haven't been attached. I am currently trying to find a workaround by passing some javascript into waitForEvent or waitForFunction. It would be nice if something like this was built into playwright.

[WhyAsh5114]

I need this as well, sometimes in Svelte, the binding of elements and/or their properties to JS variables takes time and results in failed tests. Would be nice to have a way to check and waitFor the bind to occur first.

[sqlAlchemyNoob2004]

Posting this for anybody else that may encounter this issue in Svelte -

I was stumped for a while. I had never encountered this with other frameworks and Playwright. I was sprinkling page.waitForTimeouts throughout my tests which was very brittle across different machines.

It's true there's no built in solution for this in Playwright, but there is in Svelte.

Per Playwright's documentation on hydration, the correct way to handle this is to "make sure that all the interactive controls are disabled until after the hydration."

I've gotten into the habit of disabling buttons, inputs, textareas, etc, until components have mounted.

<script lang="ts">
    import { onMount } from 'svelte';

    let mounted: boolean = false;
    onMount(() => (mounted = true));
</script>

<button disabled={!mounted} on:click={() => console.log('clicked')}>Click me!</button>

While this feels sort of boilerplate-y (and could likely be abstracted to safe input components once I understand styling child elements better in Svelte), it not only fixes the Playwright issue but is technically correct.

Like Playwright says in the documentation, by enabling slow 3g you can emulate the experience of a user with bad connectivity. These users will encounter the same button-clicking-does-nothing as Playwright with its super-speed execution. So it is correct to disable buttons until everything is hydrated.