Reduce screenshots to resonable amount

Author: Forest Hoffman

test/src/chrome.test.ts

@@ -43,11 +43,11 @@ describe("chrome e2e", () => {
 	afterEach(() => deleteTestFile());
 
 	const waitForSidebar = (page: TestPage): Promise<void> => {
-		return page.rootPage.waitFor(sidebarSelector, { visible: true }).then(() => page.click(sidebarSelector));
+		return page.rootPage.waitFor(sidebarSelector, { visible: true }).then(() => page.rootPage.click(sidebarSelector));
 	};
 
 	const waitForCommandInput = (page: TestPage): Promise<void> => {
-		return page.rootPage.waitFor(commandInputSelector, { visible: true }).then(() => page.click(commandInputSelector));
+		return page.rootPage.waitFor(commandInputSelector, { visible: true }).then(() => page.rootPage.click(commandInputSelector));
 	};
 
 	const workbenchQuickOpen = (page: TestPage): Promise<void> => {

test/src/index.ts

@@ -4,8 +4,7 @@ import * as os from "os";
 import * as path from "path";
 import * as puppeteer from "puppeteer";
 import { ChildProcess, spawn } from "child_process";
-import { logger, field } from "@coder/logger";
-import { EventEmitter } from 'events';
+import { logger, field, Level } from "@coder/logger";
 
 interface IServerOptions {
 	host: string;
@@ -142,11 +141,22 @@ export class TestPage {
 	 * Screenshot path will be in the following format:
 	 * `<screenshotDir>/[<page-tag>_]<screenshot-number>_<screenshot-name>.jpg`.
 	 */
-	public screenshot(name: string, options?: puppeteer.ScreenshotOptions): Promise<string | Buffer> {
-		options = Object.assign({ path: path.resolve(TestServer.puppeteerDir, `./${this.tag ? `${this.tag}_` : ""}${this.screenshotCount}_${name}.jpg`), fullPage: true }, options);
-		const img = this.rootPage.screenshot(options);
+	public async screenshot(name: string, options?: puppeteer.ScreenshotOptions): Promise<string | Buffer> {
+		let debugCI = logger.level === Level.Debug && process.env.TRAVIS_BUILD_NUMBER;
+		let tag = this.tag ? `${this.tag}_` : "";
+		if (debugCI) {
+			tag = `TRAVIS-${process.env.TRAVIS_BUILD_NUMBER}_${tag}`;
+		}
+		options = Object.assign({ path: path.resolve(TestServer.puppeteerDir, `./${tag}${this.screenshotCount}_${name}.jpg`), fullPage: true }, options);
+		const img = await this.rootPage.screenshot(options);
 		this.screenshotCount++;
 
+		if (debugCI) {
+			// TODO: upload to imgur.
+			const url = "";
+			logger.debug("captured screenshot", field("path", options.path), field("url", url));
+		}
+
 		return img;
 	}
 
@@ -157,9 +167,18 @@ export class TestPage {
 	 */
 	// tslint:disable-next-line:no-any
 	public async recordFunc(fn: Function, ...args: any[]): Promise<any> {
-		await this.screenshot(`${fn.name}_before`);
+		let err: Error | undefined;
+		if (typeof fn !== "function" || fn.name === "") {
+			err = new Error(JSON.stringify(fn));
+			logger.debug("cannot record nameless function", field("trace", err.stack));
+		}
+		if (!err) {
+			await this.screenshot(`${fn.name}_before`);
+		}
 		const result = await fn.apply(this.rootPage, args);
-		await this.screenshot(`${fn.name}_after`);
+		if (!err) {
+			await this.screenshot(`${fn.name}_after`);
+		}
 
 		return result;
 	}
@@ -179,10 +198,10 @@ export class TestPage {
 	 */
 	public waitFor(durationOrSelector: number | string, options?: puppeteer.WaitForSelectorOptionsHidden | puppeteer.WaitForSelectorOptions): Promise<puppeteer.ElementHandle | null | void> {
 		if (typeof durationOrSelector === "number") {
-			return this.recordFunc(this.rootPage.waitFor, durationOrSelector);
+			return this.rootPage.waitFor(durationOrSelector);
 		}
 
-		return this.recordFunc(this.rootPage.waitFor, durationOrSelector, options);
+		return this.rootPage.waitFor(durationOrSelector, options);
 	}
 
 	/**
@@ -359,14 +378,17 @@ export class TestServer {
 	 * runner context.
 	 */
 	// tslint:disable-next-line:no-any
-	public async querySelectorAll(page: TestPage, selector: string): Promise<Array<DeserializedNode>> {
+	public async querySelectorAll(page: puppeteer.Page | TestPage, selector: string): Promise<Array<DeserializedNode>> {
 		if (!selector) {
 			throw new Error("selector undefined");
 		}
 
 		// tslint:disable-next-line:no-any
 		const elements: Array<DeserializedNode> = [];
-		const serializedElements = await page.rootPage.evaluate((selector) => {
+		if (page instanceof TestPage) {
+			page = page.rootPage;
+		}
+		const serializedElements = await page.evaluate((selector) => {
 			// tslint:disable-next-line:no-any
 			return new Promise<Array<string>>((res, rej): void => {
 				const elements = Array.from(document.querySelectorAll(selector));
@@ -396,7 +418,7 @@ export class TestServer {
 	 * Get an element on the page. See `TestServer.querySelectorAll`.
 	 */
 	// tslint:disable-next-line:no-any
-	public async querySelector(page: TestPage, selector: string): Promise<DeserializedNode> {
+	public async querySelector(page: puppeteer.Page | TestPage, selector: string): Promise<DeserializedNode> {
 		if (!selector) {
 			throw new Error("selector undefined");
 		}

test/src/startup.test.ts

@@ -1,4 +1,5 @@
-import { TestServer, TestPage } from "./index";
+import * as puppeteer from "puppeteer";
+import { TestServer } from "./index";
 
 describe("startup e2e", () => {
 	jest.setTimeout(20000);
@@ -24,7 +25,7 @@ describe("startup e2e", () => {
 		}
 	});
 
-	const expectEditor = async (server: TestServer, page: TestPage): Promise<void> => {
+	const expectEditor = async (server: TestServer, page: puppeteer.Page): Promise<void> => {
 		// Editor should be visible.
 		await page.waitFor("div.part.editor");
 		const editor = await server.querySelector(page, "div.part.editor");
@@ -39,7 +40,7 @@ describe("startup e2e", () => {
 		const server = servers["--port"];
 		await server.start();
 		const page = await server.newPage()
-			.then(server.loadPage.bind(server));
+		await page.goto(server.url);
 
 		await expectEditor(server, page);
 	});
@@ -49,16 +50,14 @@ describe("startup e2e", () => {
 		await server.start({ ignoreHTTPSErrors: true });
 		const page = await server.newPage();
 		await page.goto(server.url);
-		await page.waitFor(1000);
-		const testPage = new TestPage(page, "requirePassword");
 
 		// Enter password.
 		expect(server.options.password).toBeTruthy();
-		await testPage.waitFor("input#password");
-		await testPage.click("input#password");
-		await testPage.keyboard.type(server.options.password, { delay: 100 });
-		await testPage.click("button#submit");
+		await page.waitFor("input#password");
+		await page.click("input#password");
+		await page.keyboard.type(server.options.password, { delay: 100 });
+		await page.click("button#submit");
 
-		await expectEditor(server, testPage);
+		await expectEditor(server, page);
 	});
 });