feat(codegen): add range input recording support (microsoft#28767)

mxschmitt · Dec 31, 2023 · 778828c · 778828c
1 parent 214b373
commit 778828c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts
@@ -188,7 +188,7 @@ class RecordActionTool implements RecorderTool {
       return;
     if (this._actionInProgress(event))
       return;
-    if (this._consumedDueToNoModel(event, this._hoveredModel))
+    if (this._consumedDueWrongTarget(event, this._hoveredModel))
       return;
 
     const checkbox = asCheckbox(this._recorder.deepEventTarget(event));
@@ -283,7 +283,7 @@ class RecordActionTool implements RecorderTool {
       }
 
       // Non-navigating actions are simply recorded by Playwright.
-      if (this._consumedDueWrongTarget(event))
+      if (this._consumedDueWrongTarget(event, this._activeModel))
         return;
       this._recorder.delegate.recordAction?.({
         name: 'fill',
@@ -313,7 +313,7 @@ class RecordActionTool implements RecorderTool {
       this._expectProgrammaticKeyUp = true;
       return;
     }
-    if (this._consumedDueWrongTarget(event))
+    if (this._consumedDueWrongTarget(event, this._activeModel))
       return;
     // Similarly to click, trigger checkbox on key event, not input.
     if (event.key === ' ') {
@@ -373,7 +373,7 @@ class RecordActionTool implements RecorderTool {
     const nodeName = target.nodeName;
     if (nodeName === 'SELECT' || nodeName === 'OPTION')
       return true;
-    if (nodeName === 'INPUT' && ['date'].includes((target as HTMLInputElement).type))
+    if (nodeName === 'INPUT' && ['date', 'range'].includes((target as HTMLInputElement).type))
       return true;
     return false;
   }
@@ -387,15 +387,8 @@ class RecordActionTool implements RecorderTool {
     return false;
   }
 
-  private _consumedDueToNoModel(event: Event, model: HighlightModel | null): boolean {
-    if (model)
-      return false;
-    consumeEvent(event);
-    return true;
-  }
-
-  private _consumedDueWrongTarget(event: Event): boolean {
-    if (this._activeModel && this._activeModel.elements[0] === this._recorder.deepEventTarget(event))
+  private _consumedDueWrongTarget(event: Event, model: HighlightModel | null): boolean {
+    if (model && model.elements[0] === this._recorder.deepEventTarget(event))
       return false;
     consumeEvent(event);
     return true;

diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts
@@ -746,4 +746,32 @@ await page.GetByText("Click me").ClickAsync(new LocatorClickOptions
     Button = MouseButton.Middle,
 });`);
   });
+
+  test('should record slider', async ({ page, openRecorder }) => {
+    const recorder = await openRecorder();
+
+    await recorder.setContentAndWait(`<input type="range" min="0" max="10" value="5">`);
+
+    const dragSlider = async () => {
+      await page.locator('input').focus();
+      const { x, y, width, height } = await page.locator('input').boundingBox();
+      await page.mouse.move(x + width / 2, y + height / 2);
+      await page.mouse.down();
+      await page.mouse.move(x + width, y + height / 2);
+      await page.mouse.up();
+    };
+
+    const [sources] = await Promise.all([
+      recorder.waitForOutput('JavaScript', 'fill'),
+      dragSlider(),
+    ]);
+
+    await expect(page.locator('input')).toHaveValue('10');
+
+    expect(sources.get('JavaScript')!.text).toContain(`
+  await page.getByRole('slider').fill('10');`);
+
+    expect(sources.get('JavaScript')!.text).not.toContain(`
+  await page.getByRole('slider').click();`);
+  });
 });