diff --git a/tests/config/traceViewerFixtures.ts b/tests/config/traceViewerFixtures.ts index 40737f6bc1..c6622442cf 100644 --- a/tests/config/traceViewerFixtures.ts +++ b/tests/config/traceViewerFixtures.ts @@ -49,6 +49,10 @@ class TraceViewerPage { snapshotContainer: Locator; sourceCodeTab: Locator; + settingsDialog: Locator; + darkModeSetting: Locator; + displayCanvasContentSetting: Locator; + constructor(public page: Page) { this.actionTitles = page.locator('.action-title'); this.actionsTree = page.getByTestId('actions-tree'); @@ -63,6 +67,10 @@ class TraceViewerPage { this.snapshotContainer = page.locator('.snapshot-container iframe.snapshot-visible[name=snapshot]'); this.metadataTab = page.getByTestId('metadata-view'); this.sourceCodeTab = page.getByTestId('source-code'); + + this.settingsDialog = page.locator('.settings-toolbar-dialog'); + this.darkModeSetting = page.locator('.setting').getByText('Dark mode'); + this.displayCanvasContentSetting = page.locator('.setting').getByText('Display canvas content'); } async actionIconsText(action: string) { @@ -115,6 +123,10 @@ class TraceViewerPage { await this.page.click('text="Metadata"'); } + async showSettings() { + await this.page.locator('.settings-gear').click(); + } + @step async snapshotFrame(actionName: string, ordinal: number = 0, hasSubframe: boolean = false): Promise { await this.selectAction(actionName, ordinal); diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts index 3ffba28582..99d20958da 100644 --- a/tests/library/trace-viewer.spec.ts +++ b/tests/library/trace-viewer.spec.ts @@ -1593,3 +1593,60 @@ test('should show a popover', async ({ runAndTrace, page, server }) => { const popover = snapshot.locator('#pop'); await expect.poll(() => popover.evaluate(e => e.matches(':popover-open'))).toBe(true); }); + +test('should open settings dialog', async ({ showTraceViewer }) => { + const traceViewer = await showTraceViewer([traceFile]); + await traceViewer.selectAction('http://localhost'); + await traceViewer.showSettings(); + await expect(traceViewer.settingsDialog).toBeVisible(); +}); + +test('should toggle theme color', async ({ showTraceViewer, page }) => { + const traceViewer = await showTraceViewer([traceFile]); + await traceViewer.selectAction('http://localhost'); + await traceViewer.showSettings(); + + await expect(traceViewer.darkModeSetting).toBeChecked({ checked: false }); + + await traceViewer.darkModeSetting.click(); + await expect(traceViewer.darkModeSetting).toBeChecked({ checked: true }); + await expect(traceViewer.page.locator('.dark-mode')).toBeVisible(); + + await traceViewer.darkModeSetting.click(); + await expect(traceViewer.darkModeSetting).toBeChecked({ checked: false }); + await expect(traceViewer.page.locator('.light-mode')).toBeVisible(); +}); + +test('should toggle canvas rendering', async ({ runAndTrace, page }) => { + const traceViewer = await runAndTrace(async () => { + await page.goto(`data:text/html,
Hello world
`); + await page.goto(`data:text/html,
Hello world
`); + }); + + let snapshotRequestPromise = traceViewer.page.waitForRequest(request => request.url().includes('/snapshot/'), { timeout: 2000 }); + + // Click on the action with a canvas snapshot + await traceViewer.selectAction('goto', 0); + + let snapshotRequest = await snapshotRequestPromise; + + expect(snapshotRequest.url()).not.toContain('shouldPopulateCanvasFromScreenshot'); + + await traceViewer.showSettings(); + + await expect(traceViewer.displayCanvasContentSetting).toBeChecked({ checked: false }); + await traceViewer.displayCanvasContentSetting.click(); + await expect(traceViewer.displayCanvasContentSetting).toBeChecked({ checked: true }); + + // Deselect canvas + await traceViewer.selectAction('goto', 1); + + snapshotRequestPromise = traceViewer.page.waitForRequest(request => request.url().includes('/snapshot/'), { timeout: 2000 }); + + // Select canvas again + await traceViewer.selectAction('goto', 0); + + snapshotRequest = await snapshotRequestPromise; + + expect(snapshotRequest.url()).toContain('shouldPopulateCanvasFromScreenshot'); +});