From 13e4912c1a66e48c1a315cc5028832b56a09f0f7 Mon Sep 17 00:00:00 2001
From: Rui Figueira <rui.figueira@gmail.com>
Date: Fri, 22 Dec 2023 10:59:47 +0000
Subject: [PATCH] fix(recorder): ignore clicks in slider fields

Also, in webkit, a click was being recorded because the click event had body as target, which didn't match the hovered element. Ignoring clicks on hovered elements when event target doesn't match prevents this.
---
 .../src/server/injected/recorder.ts                | 14 +++++++++-----
 tests/library/inspector/cli-codegen-1.spec.ts      |  4 ++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts
index c9cd2994f2e86..dd1d8cf02cacf 100644
--- a/packages/playwright-core/src/server/injected/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder.ts
@@ -185,7 +185,7 @@ class RecordActionTool implements RecorderTool {
       return;
     if (this._performingAction)
       return;
-    if (!this._hoveredModel)
+    if (this._isHoveredWrongTarget(event))
       return;
 
     const checkbox = asCheckbox(this._recorder.deepEventTarget(event));
@@ -257,7 +257,7 @@ class RecordActionTool implements RecorderTool {
       }
 
       // Non-navigating actions are simply recorded by Playwright.
-      if (this._isWrongTarget(event))
+      if (this._isActiveWrongTarget(event))
         return;
       this._recorder.delegate.recordAction?.({
         name: 'fill',
@@ -285,7 +285,7 @@ class RecordActionTool implements RecorderTool {
       return;
     if (this._performingAction)
       return;
-    if (this._isWrongTarget(event))
+    if (this._isHoveredWrongTarget(event))
       return;
     // Similarly to click, trigger checkbox on key event, not input.
     if (event.key === ' ') {
@@ -338,8 +338,12 @@ class RecordActionTool implements RecorderTool {
     return false;
   }
 
-  private _isWrongTarget(event: Event): boolean {
-    return !(this._activeModel && this._activeModel.elements[0] === this._recorder.deepEventTarget(event));
+  private _isActiveWrongTarget(event: Event): boolean {
+    return !this._activeModel || this._activeModel.elements[0] !== this._recorder.deepEventTarget(event);
+  }
+
+  private _isHoveredWrongTarget(event: Event): boolean {
+    return !this._hoveredModel || this._hoveredModel.elements[0] !== this._recorder.deepEventTarget(event);
   }
 
   private async _performAction(action: actions.Action) {
diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts
index e2d324813eecc..f5745a85d135a 100644
--- a/tests/library/inspector/cli-codegen-1.spec.ts
+++ b/tests/library/inspector/cli-codegen-1.spec.ts
@@ -770,4 +770,8 @@ await page.GetByText("Click me").ClickAsync(new LocatorClickOptions
 
     expect(sources.get('JavaScript')!.text).toContain(`
   await page.getByRole('slider').fill('10');`);
+
+    expect(sources.get('JavaScript')!.text).not.toContain(`
+  await page.getByRole('slider').click();`);
+  });
 });