-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add range input recording support #28767
Conversation
This comment has been minimized.
This comment has been minimized.
You probably want to replace one line and add the range to the list here:
We like it when actions are performed by Playwright because it gives us more confidence that the recorded script will play. |
13e4912
to
86a7e80
Compare
True 😁 I already reverted all the other bits and left that change only.
I thought it so, and I understand. However, I already hit some scenarios where the page behaved poorly when recording was enabled. For instance, when clicking some button on a scrollable area, playwright would start scrolling and click which was very strange (I know it now, it is playwright doing that magic, but nevertheless). And overall, interactions don't seem fluid in more complex pages, at least it's my feeling. But that is for another discussion. |
This comment has been minimized.
This comment has been minimized.
It's failing with webkit, with the same problem I had with the other approach. For some reason, we get a click event with the body element as target and the input element as the hovered element. A solution is to ensure the click event is handled only when the hovered element matches the event target |
86a7e80
to
964a61a
Compare
Test results for "tests 1"4 flaky21242 passed, 585 skipped Merge workflow run. |
Playwright doesn't record range inputs because it consumes browser events to prevent the native action execution, and instead triggers a playwright action to replicate that same event. However, things like slider drag and drop on a range input are not properly replicated. That causes the slider not to move at all, because playwright just sends a click action into the center of the slider, while preventing me from manually sliding to the desired value:
To try it, just run:
npx playwright codegen 'data:text/html,<input type="range" min="0" max="10" value="5">'
My approach was to discard the playwright action, and instead let all events do their thing, without consuming them. This simplifies the recording logic and the recorded page behaves much better, because it is handling all eventss in the exact same way as if the user was not recording at all. And with this approach, recording a range input automatically works. I just added a few more logic to skip the click action recording there, but that's basically it.
Here's a video of it working with the new changes:
I ran all tests in
tests/library/inspector
, and they all pass with just a minor change in one of the tests (playwright action was triggering more events than the actual browser events).