diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts index f88bddd528596..eaeb4407c9c47 100644 --- 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 index 3688bb2053c36..e8283d4fffbcb 100644 --- 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(``); + + 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();`); + }); });