New in Playwright end-to-end testing: detect & close unpredictable overlays with "addLocatorHandler"

Discover the latest feature of Playwright 1.42 - `page.addLocatorHandler`.
If you're tired of randomly appearing cookie banners breaking your end-to-end tests or want to automatically close all these intercom widgets, this method is right up your alley. With `addLocatorHandler`, handling elements that randomly pop up becomes a breeze!
In the video, we'll show you how the new Playwright method works in practice and why it makes end-to-end testing and synthetic monitoring so much easier.
0:00 Intro
0:35 The problem of unpredictable elements
1:16 Playwright UI mode
1:55 Cookie banner example
2:39 Close cookie banner with try/catch
3:44 try/catch problems
5:31 addLocatorHandler intro
6:29 addLocatorHandler in UI mode
7:43 addLocatorHandler details
9:35 Outro
Playwright Docs: playwright.dev/docs/api/class...
Checkly Synthetic Monitoring: www.checklyhq.com/product/syn...
Checkly Community: www.checklyhq.com/slack/
#playwright #testing #monitoring

[@dva_kompota]

Cool new feature and great explanation - thank you! Love Playwright 😇

[@connorginty]

This is exactly what I needed for my tests! I’m so excited to implement this.

[@ChecklyHQ]

Right? I've been waiting for a general solution to the "whenever it appears" problem, too. 🎉

[@foundresstt]

Thank you so much! It has solved our pain 🤩

[@ChecklyHQ]

Yay - happy to hear that!

[@MaheshJoshi_wellington]

Wow your every video on playwright is awesome !

[@ChecklyHQ]

Thank you so much! Happy the videos have been valuable. 😊

[@emnznlg]

Great content! Thank you very much.

[@ChecklyHQ]

Thank you! Great it's been valuable! 😊

[@theillo4739]

Woooha, thanks for your content !

[@ChecklyHQ]

Thank you for watching! 😉

[@harshasuraweera]

Thanks for the valuable content!

[@ChecklyHQ]

Happy to! 😊

[@powertester5596]

Good stuff. Thanks for another useful video :-).

[@ChecklyHQ]

Thank you! Happy the videos are valuable. 😊

[@Muhammad55597]

that's awesome, playwirght is the best

[@ChecklyHQ]

Totally agreed. 🫣 It gets better with every release. 💪

[@kowshikkumar9868]

@checkly what if we have multiple pop-up in our flow. do we need to write addLocatorHandler for each pop-up. Ex: One pop-up having text "give feedback", second pop-up having test "rate-us"

[@connorginty]

Based on my understanding from the docs, if each pop-up can be located with some kind of general selector or custom attribute for all pop-ups, one handler with some conditions should be enough for both cases.

[@ChecklyHQ]

I haven't tested it but I think it depends. Either you can have multiple `addLocatorHandler` or you generalize the popups to all have the same id or something. Both approaches should work, but generalizing might not always be possible. :) Hope this helps!

[@foundresstt]

I've started to implement this approach in the project to catch random error alerts(but the problem is there can be more than 1 on the page simultaneously). So, probably can you give an idea if it is possible to catch 2+ elements of similar kind? For now I've resolved by catching the first() element. But all - would be much better ))

[@ChecklyHQ]

Hmm, this is a great question that I don't have an answer to right now. But I'll put it on "the investigation list" and there might be a future video about it. :)

[@foundresstt]

@@ChecklyHQ Many thanks! Will keep an eye on your posts ))

[@abdulwahabshariff894]

Instead of using in individual test, can we use this method in before All/before each or set a listener using page.on and implement this method inside the listener?

[@ChecklyHQ]

Re: "can we use this method in before All/before each" - I didn't test it but this should work. Re: event listener - I'm not sure. Which event listener do you want to use?

[@foundresstt]

Yes, It works in beforeEach