mirror of
https://github.com/microsoft/playwright.git
synced 2024-09-11 20:37:54 +03:00
feat(trace viewer): show baseURL
in Metadata pane (#31852)
Resolves https://github.com/microsoft/playwright/issues/31847 by adding playwright config's `baseURL` value to the `context-options` trace event, and showing that in the Trace Viewer. Because the added property is optional, I didn't increment the trace format version. I've also considered pulling the `baseURL` from the existing `browser.newContext` step to get around modifying the trace format, but that felt pretty hacky. https://github.com/user-attachments/assets/ecaef747-727d-4937-9ca3-1605ca9907b9 --------- Signed-off-by: Simon Knott <info@simonknott.de> Co-authored-by: Dmitry Gozman <dgozman@gmail.com>
This commit is contained in:
parent
4d4ed2a5c4
commit
b06a95dd75
@ -73,6 +73,14 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a.call-value {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.call-value:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.call-value::before {
|
||||
content: '\00a0';
|
||||
}
|
||||
|
@ -33,6 +33,12 @@ export const MetadataView: React.FunctionComponent<{
|
||||
{model.channel && <div className='call-line'>channel:<span className='call-value string' title={model.channel}>{model.channel}</span></div>}
|
||||
{model.platform && <div className='call-line'>platform:<span className='call-value string' title={model.platform}>{model.platform}</span></div>}
|
||||
{model.options.userAgent && <div className='call-line'>user agent:<span className='call-value datetime' title={model.options.userAgent}>{model.options.userAgent}</span></div>}
|
||||
{model.options.baseURL && (
|
||||
<>
|
||||
<div className='call-section' style={{ paddingTop: 2 }}>Config</div>
|
||||
<div className='call-line'>baseURL:<a className='call-value string' href={model.options.baseURL} title={model.options.baseURL} target='_blank' rel='noopener noreferrer'>{model.options.baseURL}</a></div>
|
||||
</>
|
||||
)}
|
||||
<div className='call-section'>Viewport</div>
|
||||
{model.options.viewport && <div className='call-line'>width:<span className='call-value number' title={String(!!model.options.viewport?.width)}>{model.options.viewport.width}</span></div>}
|
||||
{model.options.viewport && <div className='call-line'>height:<span className='call-value number' title={String(!!model.options.viewport?.height)}>{model.options.viewport.height}</span></div>}
|
||||
|
@ -24,6 +24,7 @@ export type Size = { width: number, height: number };
|
||||
export type VERSION = 7;
|
||||
|
||||
export type BrowserContextEventOptions = {
|
||||
baseURL?: string,
|
||||
viewport?: Size,
|
||||
deviceScaleFactor?: number,
|
||||
isMobile?: boolean,
|
||||
|
@ -44,6 +44,7 @@ class TraceViewerPage {
|
||||
consoleStacks: Locator;
|
||||
stackFrames: Locator;
|
||||
networkRequests: Locator;
|
||||
metadataTab: Locator;
|
||||
snapshotContainer: Locator;
|
||||
|
||||
constructor(public page: Page) {
|
||||
@ -57,6 +58,7 @@ class TraceViewerPage {
|
||||
this.stackFrames = page.getByTestId('stack-trace-list').locator('.list-view-entry');
|
||||
this.networkRequests = page.getByTestId('network-list').locator('.list-view-entry');
|
||||
this.snapshotContainer = page.locator('.snapshot-container iframe.snapshot-visible[name=snapshot]');
|
||||
this.metadataTab = page.locator('.metadata-view');
|
||||
}
|
||||
|
||||
async actionIconsText(action: string) {
|
||||
@ -93,6 +95,10 @@ class TraceViewerPage {
|
||||
await this.page.click('text="Network"');
|
||||
}
|
||||
|
||||
async showMetadataTab() {
|
||||
await this.page.click('text="Metadata"');
|
||||
}
|
||||
|
||||
@step
|
||||
async snapshotFrame(actionName: string, ordinal: number = 0, hasSubframe: boolean = false): Promise<FrameLocator> {
|
||||
await this.selectAction(actionName, ordinal);
|
||||
|
@ -31,7 +31,9 @@ test.slow();
|
||||
let traceFile: string;
|
||||
|
||||
test.beforeAll(async function recordTrace({ browser, browserName, browserType, server }, workerInfo) {
|
||||
const context = await browser.newContext();
|
||||
const context = await browser.newContext({
|
||||
baseURL: 'https://example.com',
|
||||
});
|
||||
await context.tracing.start({ name: 'test', screenshots: true, snapshots: true, sources: true });
|
||||
const page = await context.newPage();
|
||||
await page.goto(`data:text/html,<!DOCTYPE html><html>Hello world</html>`);
|
||||
@ -1368,3 +1370,12 @@ test('should allow hiding route actions', {
|
||||
/route.fulfill/,
|
||||
]);
|
||||
});
|
||||
|
||||
test('should show baseURL in metadata pane', {
|
||||
annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31847' },
|
||||
}, async ({ showTraceViewer }) => {
|
||||
const traceViewer = await showTraceViewer([traceFile]);
|
||||
await traceViewer.selectAction('page.evaluate');
|
||||
await traceViewer.showMetadataTab();
|
||||
await expect(traceViewer.metadataTab).toContainText('baseURL:https://example.com');
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user