search

ruifigueira / playwright-crx

Playwright for chrome extensions
Apache License 2.0
81 stars 15 forks source link

Issue recording a specific link #24

Closed HarishTeens closed 2 months ago

HarishTeens commented 2 months ago

Hey @ruifigueira , Love the amazing work you've done with the extension 🤟

Take a look at this link: https://lifescievents.com/event/effector/ This page contains a "Access to Replay" button. Clicking the button spawns a form, that is loaded via an iframe. The Extension fails to record any actions performed on that particular frame. Seems to be a problem with dynamically loaded frames into the DOM. Do you have any thoughts on this?

P.S. This link seems to be working fine in case of the original playwright CLI record, hence created the issue here :)

ruifigueira commented 2 months ago

This is related with #20. Chrome 126+ now supports out-of-process iframes (the form found at that site is one). I'm trying Chrome Canary, which is a 126 version, with playwright-crx 0.6.0 which has just released and it works (with some minor issues like leaving the whole iframe highlighted while highlighting elements inside it):

https://github.com/ruifigueira/playwright-crx/assets/1374559/72eb3b61-e925-42d8-a740-d069dbec794e

HarishTeens commented 2 months ago

Thanks for the quick reply, I will wait until Chrome126 gets stable. Seems like there's nothing much we can do here

HarishTeens commented 2 months ago

Hey @ruifigueira , fyi I tried it with Chrome Canary 126. While it is able to record the steps. When I try to play them, it doesn't seem to work. Definitely seems like an upstream issue.

ruifigueira commented 2 months ago

I'll leave this issue open then. Let me investigate that.

ruifigueira commented 2 months ago

FInally I had some time to investigate. The problem is on Registration Type. If you skip that field when recording and just fill First Name and Last Name, it actually works.

I tried with playwright codegen and it also has the same problem on Registration Type, and the reason is that the label overlaps the select field and so the select field is only editable after clicking over it (it triggers a CSS animation that moves the label up).

HarishTeens commented 2 months ago

Hey @ruifigueira , I tried it again it works even with selecting "Registration Type". I think the upstream has fixed it somehow. Thanks for the help man 🤟

HarishTeens commented 1 month ago

Forgot to mention an important detail, for it to work. I had to click on the extension then "reload the page" again so it could detect all the DOM elements.