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

feat: add ability to render base64-encoded trace recieved from window messages (#34976)

This commit is contained in:
epszaw 2025-03-04 19:56:01 +01:00 committed by GitHub
parent 88623ae3c2
commit 02a63fe9e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/trace-viewer/src/ui/workbenchLoader.tsx
View File

@ -72,6 +72,23 @@ export const WorkbenchLoader: React.FunctionComponent<{
document.addEventListener('paste', listener);
return () => document.removeEventListener('paste', listener);
});
React.useEffect(() => {
const listener = (e: MessageEvent) => {
const { method, params } = e.data;
if (method !== 'load' || !(params?.trace instanceof Blob))
return;
const traceFile = new File([params.trace], 'trace.zip', { type: 'application/zip' });
const dataTransfer = new DataTransfer();
dataTransfer.items.add(traceFile);
processTraceFiles(dataTransfer.files);
};
window.addEventListener('message', listener);
return () => window.removeEventListener('message', listener);
});
const handleDropEvent = React.useCallback((event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();

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

@ -1750,3 +1750,58 @@ test('should toggle canvas rendering', async ({ runAndTrace, page }) => {
expect(snapshotRequest.url()).toContain('shouldPopulateCanvasFromScreenshot');
});
test('should render blob trace received from message', async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer([], { host: 'localhost' });
await expect(traceViewer.page.locator('.drop-target')).toBeVisible();
await expect(traceViewer.actionTitles).not.toBeVisible();
await traceViewer.page.evaluate(trace => {
const uint8Array = Uint8Array.from(atob(trace), c => c.charCodeAt(0));
window.postMessage({
method: 'load',
params: {
trace: new Blob([uint8Array], { type: 'application/zip' }),
}
}, '*');
}, fs.readFileSync(traceFile, 'base64'));
await expect(traceViewer.page.locator('.drop-target')).not.toBeVisible();
await expect(traceViewer.actionTitles).toHaveText([
/browserContext.newPage/,
/page.gotodata:text\/html,<!DOCTYPE html><html>Hello world<\/html>/,
/page.setContent/,
/expect.toHaveTextlocator\('button'\)/,
/expect.toBeHiddengetByTestId\('amazing-btn'\)/,
/expect.toBeHiddengetByTestId\(\/amazing-btn-regex\/\)/,
/page.evaluate/,
/page.evaluate/,
/locator.clickgetByText\('Click'\)/,
/page.waitForNavigation/,
/page.waitForResponse/,
/page.waitForTimeout/,
/page.gotohttp:\/\/localhost:\d+\/frames\/frame.html/,
/page.setViewportSize/,
]);
});
test("shouldn't render not-blob trace received from message", async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer([], { host: 'localhost' });
await expect(traceViewer.page.locator('.drop-target')).toBeVisible();
await expect(traceViewer.actionTitles).not.toBeVisible();
await traceViewer.page.evaluate(trace => {
window.postMessage({
method: 'load',
params: {
trace,
}
}, '*');
}, fs.readFileSync(traceFile, 'base64'));
await expect(traceViewer.page.locator('.drop-target')).toBeVisible();
await expect(traceViewer.actionTitles).not.toBeVisible();
});