Test for Trace Viewer settings

This commit is contained in:
Adam Gastineau 2024-12-13 11:27:23 -08:00
parent af7cc37e2a
commit 7fb7a17168
2 changed files with 69 additions and 0 deletions

View file

@ -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<FrameLocator> {
await this.selectAction(actionName, ordinal);

View file

@ -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,<!DOCTYPE html><body><div>Hello world</div><canvas /></body>`);
await page.goto(`data:text/html,<!DOCTYPE html><body><div>Hello world</div></body>`);
});
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');
});