feat(codegen): slider support

microsoft · Dec 22, 2023 · 86a7e80 · 86a7e80
1 parent eeb9e06
commit 86a7e80
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts
@@ -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;
   }

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();`);
+  });
 });