From 1b2845764d1fb7818df39059613b84219fb404f0 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Tue, 31 Aug 2021 21:49:08 -0700 Subject: [PATCH] test: unflake trace viewer tests (#8603) --- tests/trace-viewer/trace-viewer.spec.ts | 82 ++++++++++--------------- 1 file changed, 34 insertions(+), 48 deletions(-) diff --git a/tests/trace-viewer/trace-viewer.spec.ts b/tests/trace-viewer/trace-viewer.spec.ts index 7892bfd357..1bad4f274d 100644 --- a/tests/trace-viewer/trace-viewer.spec.ts +++ b/tests/trace-viewer/trace-viewer.spec.ts @@ -15,17 +15,26 @@ */ import path from 'path'; -import type { Browser, Page } from '../../index'; +import type { Browser, Locator, Page } from '../../index'; import { showTraceViewer } from '../../lib/server/trace/viewer/traceViewer'; import { playwrightTest } from '../config/browserTest'; import { expect } from '../config/test-runner'; class TraceViewerPage { - constructor(public page: Page) {} + actionTitles: Locator; + callLines: Locator; + consoleLines: Locator; + consoleLineMessages: Locator; + consoleStacks: Locator; + stackFrames: Locator; - async actionTitles() { - await this.page.waitForSelector('.action-title:visible'); - return await this.page.$$eval('.action-title:visible', ee => ee.map(e => e.textContent)); + constructor(public page: Page) { + this.actionTitles = page.locator('.action-title'); + this.callLines = page.locator('.call-line'); + this.consoleLines = page.locator('.console-line'); + this.consoleLineMessages = page.locator('.console-line-message'); + this.consoleStacks = page.locator('.console-stack'); + this.stackFrames = page.locator('.stack-trace-frame'); } async actionIconsText(action: string) { @@ -54,11 +63,6 @@ class TraceViewerPage { await this.page.click('text="Source"'); } - async callLines() { - await this.page.waitForSelector('.call-line:visible'); - return await this.page.$$eval('.call-line:visible', ee => ee.map(e => e.textContent)); - } - async eventBars() { await this.page.waitForSelector('.timeline-bar.event:visible'); const list = await this.page.$$eval('.timeline-bar.event:visible', ee => ee.map(e => e.className)); @@ -71,26 +75,6 @@ class TraceViewerPage { return result.sort(); } - async consoleLines() { - await this.page.waitForSelector('.console-line-message:visible'); - return await this.page.$$eval('.console-line-message:visible', ee => ee.map(e => e.textContent)); - } - - async consoleLineTypes() { - await this.page.waitForSelector('.console-line-message:visible'); - return await this.page.$$eval('.console-line:visible', ee => ee.map(e => e.className)); - } - - async consoleStacks() { - await this.page.waitForSelector('.console-stack:visible'); - return await this.page.$$eval('.console-stack:visible', ee => ee.map(e => e.textContent)); - } - - async sourceStack() { - await this.page.waitForSelector('.stack-trace-frame:visible'); - return await this.page.$$eval('.stack-trace-frame:visible', ee => ee.map(e => (e as HTMLElement).innerText.replace(/\s+/g, ' '))); - } - async snapshotSize() { return this.page.$eval('.snapshot-container', e => { const style = window.getComputedStyle(e); @@ -125,8 +109,14 @@ test.beforeAll(async function recordTrace({ browser, browserName, browserType }, console.log('Info'); console.warn('Warning'); console.error('Error'); - setTimeout(() => { throw new Error('Unhandled exception'); }, 0); - return 'return ' + a; + return new Promise(f => { + // Generate exception. + setTimeout(() => { + // And then resolve. + setTimeout(() => f('return ' + a), 0); + throw new Error('Unhandled exception'); + }, 0); + }); }, { a: 'paramA', b: 4 }); async function doClick() { @@ -144,7 +134,7 @@ test.beforeAll(async function recordTrace({ browser, browserName, browserType }, (browserType as any)._onWillCloseContext = async () => { await page.hover('body'); await page.close(); - traceFile = path.join(workerInfo.project.outputDir, browserName, 'trace.zip'); + traceFile = path.join(workerInfo.project.outputDir, String(workerInfo.workerIndex), browserName, 'trace.zip'); await context.tracing.stop({ path: traceFile }); }; await context.close(); @@ -158,7 +148,7 @@ test('should show empty trace viewer', async ({ showTraceViewer }, testInfo) => test('should open simple trace viewer', async ({ showTraceViewer }) => { const traceViewer = await showTraceViewer(traceFile); - expect(await traceViewer.actionTitles()).toEqual([ + await expect(traceViewer.actionTitles).toHaveText([ 'page.gotodata:text/html,Hello world', 'page.setContent', 'page.evaluate', @@ -173,7 +163,7 @@ test('should open simple trace viewer', async ({ showTraceViewer }) => { test('should contain action info', async ({ showTraceViewer }) => { const traceViewer = await showTraceViewer(traceFile); await traceViewer.selectAction('page.click'); - const logLines = await traceViewer.callLines(); + const logLines = await traceViewer.callLines.allTextContents(); expect(logLines.length).toBeGreaterThan(10); expect(logLines).toContain('attempting click action'); expect(logLines).toContain(' click action done'); @@ -191,13 +181,9 @@ test('should render console', async ({ showTraceViewer, browserName }) => { await traceViewer.selectAction('page.evaluate'); await traceViewer.showConsoleTab(); - const events = await traceViewer.consoleLines(); - expect(events).toEqual(['Info', 'Warning', 'Error', 'Unhandled exception']); - const types = await traceViewer.consoleLineTypes(); - expect(types).toEqual(['console-line log', 'console-line warning', 'console-line error', 'console-line error']); - const stacks = await traceViewer.consoleStacks(); - expect(stacks.length).toBe(1); - expect(stacks[0]).toContain('Error: Unhandled exception'); + await expect(traceViewer.consoleLineMessages).toHaveText(['Info', 'Warning', 'Error', 'Unhandled exception']); + await expect(traceViewer.consoleLines).toHaveClass(['console-line log', 'console-line warning', 'console-line error', 'console-line error']); + await expect(traceViewer.consoleStacks.first()).toContainText('Error: Unhandled exception'); }); test('should open console errors on click', async ({ showTraceViewer, browserName }) => { @@ -212,7 +198,7 @@ test('should open console errors on click', async ({ showTraceViewer, browserNam test('should show params and return value', async ({ showTraceViewer, browserName }) => { const traceViewer = await showTraceViewer(traceFile); await traceViewer.selectAction('page.evaluate'); - expect(await traceViewer.callLines()).toEqual([ + await expect(traceViewer.callLines).toHaveText([ 'page.evaluate', 'expression: "({↵ a↵ }) => {↵ console.log(\'Info\');↵ console.warn(\'Warning\');↵ con…"', 'isFunction: true', @@ -235,16 +221,16 @@ test('should have correct stack trace', async ({ showTraceViewer }) => { await traceViewer.selectAction('page.click'); await traceViewer.showSourceTab(); - const stack1 = await traceViewer.sourceStack(); + const stack1 = (await traceViewer.stackFrames.allInnerTexts()).map(s => s.replace(/\s+/g, ' ').replace(/[0-9]/g, 'X')); expect(stack1.slice(0, 2)).toEqual([ - 'doClick trace-viewer.spec.ts :133', - 'recordTrace trace-viewer.spec.ts :135', + 'doClick trace-viewer.spec.ts :XXX', + 'recordTrace trace-viewer.spec.ts :XXX', ]); await traceViewer.selectAction('page.hover'); await traceViewer.showSourceTab(); - const stack2 = await traceViewer.sourceStack(); + const stack2 = (await traceViewer.stackFrames.allInnerTexts()).map(s => s.replace(/\s+/g, ' ').replace(/[0-9]/g, 'X')); expect(stack2.slice(0, 1)).toEqual([ - 'BrowserType.browserType._onWillCloseContext trace-viewer.spec.ts :145', + 'BrowserType.browserType._onWillCloseContext trace-viewer.spec.ts :XXX', ]); });