kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(recorder): fix recorder injected icons (#33198)

This commit is contained in:
Rui Figueira 2024-10-22 11:44:18 +01:00 committed by GitHub
parent b275c19612
commit b194d6a1e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 6 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);
}

2
tests/library/trace-viewer.spec.ts
View File

@ -431,7 +431,7 @@ test('should capture data-url svg iframe', async ({ page, server, runAndTrace })
// Render snapshot, check expectations.
const snapshotFrame = await traceViewer.snapshotFrame('page.evaluate', 0, true);
await expect(snapshotFrame.frameLocator('iframe').locator('svg')).toBeVisible();
await expect(snapshotFrame.frameLocator('iframe').locator('> body > svg')).toBeVisible();
const content = await snapshotFrame.frameLocator('iframe').locator(':root').innerHTML();
expect(content).toContain(`d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"`);
});