yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: ignore untrusted clicks when recording (#18796)

Browse Source 
Fixes https://github.com/microsoft/playwright/issues/18776
This commit is contained in:
Pavel Feldman 2022-11-14 15:16:25 -08:00 committed by GitHub
parent 1b0a8122ba
commit 59418aa6f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/playwright-core/src/server/injected/recorder.ts
View File

@ -75,8 +75,10 @@ class Recorder {
addEventListener(document, 'mouseup', event => this._onMouseUp(event as MouseEvent), true),
addEventListener(document, 'mousemove', event => this._onMouseMove(event as MouseEvent), true),
addEventListener(document, 'mouseleave', event => this._onMouseLeave(event as MouseEvent), true),
addEventListener(document, 'focus', () => this._onFocus(true), true),
addEventListener(document, 'scroll', () => {
addEventListener(document, 'focus', event => event.isTrusted && this._onFocus(true), true),
addEventListener(document, 'scroll', event => {
if (!event.isTrusted)
return;
this._hoveredModel = null;
this._highlight.hideActionPoint();
this._updateHighlight();
@ -156,6 +158,8 @@ class Recorder {
}
private _onClick(event: MouseEvent) {
if (!event.isTrusted)
return;
if (this._mode === 'inspecting')
globalThis.__pw_recorderSetSelector(this._hoveredModel ? this._hoveredModel.selector : '');
if (this._shouldIgnoreMouseEvent(event))
@ -204,6 +208,8 @@ class Recorder {
}
private _onMouseDown(event: MouseEvent) {
if (!event.isTrusted)
return;
if (this._shouldIgnoreMouseEvent(event))
return;
if (!this._performingAction)
@ -212,6 +218,8 @@ class Recorder {
}
private _onMouseUp(event: MouseEvent) {
if (!event.isTrusted)
return;
if (this._shouldIgnoreMouseEvent(event))
return;
if (!this._performingAction)
@ -219,6 +227,8 @@ class Recorder {
}
private _onMouseMove(event: MouseEvent) {
if (!event.isTrusted)
return;
if (this._mode === 'none')
return;
const target = this._deepEventTarget(event);
@ -229,6 +239,8 @@ class Recorder {
}
private _onMouseLeave(event: MouseEvent) {
if (!event.isTrusted)
return;
// Leaving iframe.
if (window.top !== window && this._deepEventTarget(event).nodeType === Node.DOCUMENT_NODE) {
this._hoveredElement = null;
@ -339,6 +351,8 @@ class Recorder {
}
private _onKeyDown(event: KeyboardEvent) {
if (!event.isTrusted)
return;
if (this._mode === 'inspecting') {
consumeEvent(event);
return;
@ -376,6 +390,8 @@ class Recorder {
}
private _onKeyUp(event: KeyboardEvent) {
if (!event.isTrusted)
return;
if (this._mode === 'none')
return;
if (!this._shouldGenerateKeyPressFor(event))

44
tests/library/inspector/cli-codegen-1.spec.ts
View File

@ -31,7 +31,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('button', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -52,6 +52,27 @@ test.describe('cli codegen', () => {
expect(message.text()).toBe('click');
});
test('should ignore programmatic events', async ({ page, openRecorder }) => {
const recorder = await openRecorder();
await recorder.setContentAndWait(`<button onclick="console.log('click')">Submit</button>`);
const locator = await recorder.hoverOverElement('button');
expect(locator).toBe(`getByRole('button', { name: 'Submit' })`);
await page.dispatchEvent('button', 'click', { detail: 1 });
await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
recorder.trustedClick()
]);
const clicks = recorder.sources().get('Playwright Test').actions.filter(l => l.includes('Submit'));
expect(clicks.length).toBe(1);
});
test('should click after same-document navigation', async ({ page, openRecorder, server }) => {
const recorder = await openRecorder();
@ -74,7 +95,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('button', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect(sources.get('JavaScript').text).toContain(`
@ -95,16 +116,14 @@ test.describe('cli codegen', () => {
</script>
`);
const locator = await recorder.waitForHighlight(() => recorder.page.hover('canvas', {
const locator = await recorder.hoverOverElement('canvas', {
position: { x: 250, y: 250 },
}));
});
expect(locator).toBe(`locator('canvas')`);
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
recorder.page.click('canvas', {
position: { x: 250, y: 250 },
})
recorder.trustedClick(),
]);
expect(sources.get('JavaScript').text).toContain(`
@ -154,7 +173,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('button', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -182,13 +201,12 @@ test.describe('cli codegen', () => {
// Force highlight.
await recorder.hoverOverElement('span');
// Append text after highlight.
await page.evaluate(() => {
const div = document.createElement('div');
div.setAttribute('onclick', "console.log('click')");
div.textContent = ' Some long text here ';
document.documentElement.appendChild(div);
document.body.appendChild(div);
});
const locator = await recorder.hoverOverElement('div');
@ -200,7 +218,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('div', 'click', { detail: 1 })
recorder.trustedMove('div').then(() => recorder.trustedClick()),
]);
expect(sources.get('JavaScript').text).toContain(`
await page.getByText('Some long text here').click();`);
@ -585,7 +603,7 @@ test.describe('cli codegen', () => {
const [popup, sources] = await Promise.all([
page.context().waitForEvent('page'),
recorder.waitForOutput('JavaScript', 'waitForEvent'),
page.dispatchEvent('a', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -628,7 +646,7 @@ test.describe('cli codegen', () => {
const [, sources] = await Promise.all([
page.waitForNavigation(),
recorder.waitForOutput('JavaScript', '.click()'),
page.dispatchEvent('a', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`

14
tests/library/inspector/cli-codegen-3.spec.ts
View File

@ -33,7 +33,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('button', 'click', { detail: 1 })
recorder.trustedClick()
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -68,7 +68,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('button', 'click', { detail: 1 })
recorder.trustedClick()
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -240,7 +240,7 @@ test.describe('cli codegen', () => {
const [message, sources] = await Promise.all([
page.waitForEvent('console', msg => msg.type() !== 'error'),
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('div', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -271,7 +271,7 @@ test.describe('cli codegen', () => {
const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('input', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -300,7 +300,7 @@ test.describe('cli codegen', () => {
const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('input', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -329,7 +329,7 @@ test.describe('cli codegen', () => {
const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('input', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`
@ -358,7 +358,7 @@ test.describe('cli codegen', () => {
const [sources] = await Promise.all([
recorder.waitForOutput('JavaScript', 'click'),
page.dispatchEvent('input', 'click', { detail: 1 })
recorder.trustedClick(),
]);
expect.soft(sources.get('JavaScript').text).toContain(`

18
tests/library/inspector/inspectorTest.ts
View File

@ -171,8 +171,22 @@ class Recorder {
return new Promise(f => callback = f);
}
async hoverOverElement(selector: string): Promise<string> {
return this.waitForHighlight(() => this.page.dispatchEvent(selector, 'mousemove', { detail: 1 }));
async hoverOverElement(selector: string, options?: { position?: { x: number, y: number }}): Promise<string> {
return this.waitForHighlight(async () => {
const box = await this.page.locator(selector).first().boundingBox();
const offset = options?.position || { x: box.width / 2, y: box.height / 2 };
await this.page.mouse.move(box.x + offset.x, box.y + offset.y);
});
}
async trustedMove(selector: string) {
const box = await this.page.locator(selector).first().boundingBox();
await this.page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
}
async trustedClick() {
await this.page.mouse.down();
await this.page.mouse.up();
}
async focusElement(selector: string): Promise<string> {