Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(recorder): fix recorder injected icons

Browse source
This commit is contained in:
Rui Figueira 2024-10-21 10:50:49 +01:00
parent 4b187107ee
commit 377b6a266a
4 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/playwright-core/src/server/injected/highlight.ts
View file

@ -287,7 +287,7 @@ export class Highlight {
return this._injectedScript.document.createElement('x-pw-highlight'); return this._injectedScript.document.createElement('x-pw-highlight');
} }
appendChild(element: HTMLElement) { appendChild(element: Element) {
this._glassPaneShadow.appendChild(element); this._glassPaneShadow.appendChild(element);
} }
} }

2
packages/playwright-core/src/server/injected/recorder/recorder.ts
View file

@ -825,7 +825,6 @@ class Overlay {
this._recorder = recorder; this._recorder = recorder;
const document = this._recorder.document; const document = this._recorder.document;
this._overlayElement = document.createElement('x-pw-overlay'); this._overlayElement = document.createElement('x-pw-overlay');
this._overlayElement.appendChild(createSvgElement(this._recorder.document, clipPaths));
const toolsListElement = document.createElement('x-pw-tools-list'); const toolsListElement = document.createElement('x-pw-tools-list');
this._overlayElement.appendChild(toolsListElement); this._overlayElement.appendChild(toolsListElement);
@ -1094,6 +1093,7 @@ export class Recorder {
recreationInterval = this.injectedScript.builtinSetTimeout(recreate, 500); recreationInterval = this.injectedScript.builtinSetTimeout(recreate, 500);
this._listeners.push(() => clearInterval(recreationInterval)); this._listeners.push(() => clearInterval(recreationInterval));
this.highlight.appendChild(createSvgElement(this.document, clipPaths));
this.overlay?.install(); this.overlay?.install();
this.document.adoptedStyleSheets.push(this._stylesheet); this.document.adoptedStyleSheets.push(this._stylesheet);
} }

13
tests/library/inspector/cli-codegen-3.spec.ts
View file

@ -810,6 +810,19 @@ await page.GetByLabel("Coun\\"try").ClickAsync();`);
await expect(recorder.page.getByText('Post-Hydration Content')).toBeVisible(); await expect(recorder.page.getByText('Post-Hydration Content')).toBeVisible();
await expect(recorder.page.locator('x-pw-glass')).toBeVisible(); await expect(recorder.page.locator('x-pw-glass')).toBeVisible();
}); });
test('should display inline svg icons on text assertion dialog inside iframe', async ({ openRecorder, server }) => {
const { page, recorder } = await openRecorder();
await recorder.page.click('x-pw-tool-item.text');
const { frameHello1 } = await createFrameHierarchy(page, recorder, server);
await recorder.trustedMove(frameHello1.locator('div'));
await recorder.trustedClick();
const glassPane = frameHello1.locator('x-pw-glass');
await expect(glassPane.locator('> x-pw-dialog .accept > x-div').evaluate(elem => getComputedStyle(elem).clipPath)).resolves.toBe('url("#icon-check")');
await expect(glassPane.locator('> svg > defs > clipPath#icon-check')).toBeAttached();
});
}); });
async function createFrameHierarchy(page: Page, recorder: Recorder, server: TestServer) { async function createFrameHierarchy(page: Page, recorder: Recorder, server: TestServer) {

7
tests/library/inspector/inspectorTest.ts
View file

@ -15,7 +15,7 @@
*/ */
import { contextTest } from '../../config/browserTest'; import { contextTest } from '../../config/browserTest';
import type { Page } from 'playwright-core'; import type { Locator, Page } from 'playwright-core';
import { step } from '../../config/baseTest'; import { step } from '../../config/baseTest';
import * as path from 'path'; import * as path from 'path';
import type { Source } from '../../../packages/recorder/src/recorderTypes'; import type { Source } from '../../../packages/recorder/src/recorderTypes';
@ -209,8 +209,9 @@ export class Recorder {
}); });
} }
async trustedMove(selector: string) { async trustedMove(selector: string | Locator) {
const box = await this.page.locator(selector).first().boundingBox(); const locator = typeof selector === 'string' ? this.page.locator(selector).first() : selector;
const box = await locator.boundingBox();
await this.page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); await this.page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
} }