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');
}
appendChild(element: HTMLElement) {
appendChild(element: 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;
const document = this._recorder.document;
this._overlayElement = document.createElement('x-pw-overlay');
this._overlayElement.appendChild(createSvgElement(this._recorder.document, clipPaths));
const toolsListElement = document.createElement('x-pw-tools-list');
this._overlayElement.appendChild(toolsListElement);
@ -1094,6 +1093,7 @@ export class Recorder {
recreationInterval = this.injectedScript.builtinSetTimeout(recreate, 500);
this._listeners.push(() => clearInterval(recreationInterval));
this.highlight.appendChild(createSvgElement(this.document, clipPaths));
this.overlay?.install();
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.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) {

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

@ -15,7 +15,7 @@
*/
import { contextTest } from '../../config/browserTest';
import type { Page } from 'playwright-core';
import type { Locator, Page } from 'playwright-core';
import { step } from '../../config/baseTest';
import * as path from 'path';
import type { Source } from '../../../packages/recorder/src/recorderTypes';
@ -209,8 +209,9 @@ export class Recorder {
});
}
async trustedMove(selector: string) {
const box = await this.page.locator(selector).first().boundingBox();
async trustedMove(selector: string | Locator) {
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);
}