From 8c727d96d60b11e9001f9542d048773de2760859 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Mon, 26 Apr 2021 16:49:49 -0700 Subject: [PATCH 1/2] refactor: make CodeServer methods more stable --- test/e2e/models/CodeServer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/models/CodeServer.ts b/test/e2e/models/CodeServer.ts index 7dc2bd9ae..57266c83d 100644 --- a/test/e2e/models/CodeServer.ts +++ b/test/e2e/models/CodeServer.ts @@ -63,6 +63,7 @@ export class CodeServer { const isTerminalVisible = await this.page.isVisible("#terminal") if (isTerminalVisible) { await this.page.keyboard.press(`Control+Backquote`) + // TODO fix this // Wait for terminal to receive focus await this.page.waitForSelector("div.terminal.xterm.focus") // Sometimes the terminal reloads From 449c6da77c285d84a0f7eb9bdbab7831a686cd34 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Tue, 27 Apr 2021 11:30:22 -0700 Subject: [PATCH 2/2] refactor: add timeout to terminal.test.ts --- test/e2e/models/CodeServer.ts | 58 ++++++++++++++++------------------- test/e2e/terminal.test.ts | 2 ++ 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/test/e2e/models/CodeServer.ts b/test/e2e/models/CodeServer.ts index 57266c83d..b833cc7ef 100644 --- a/test/e2e/models/CodeServer.ts +++ b/test/e2e/models/CodeServer.ts @@ -5,6 +5,7 @@ import { CODE_SERVER_ADDRESS } from "../../utils/constants" // See Playwright docs: https://playwright.dev/docs/pom/ export class CodeServer { page: Page + editorSelector = "div.monaco-workbench" constructor(page: Page) { this.page = page @@ -30,15 +31,18 @@ export class CodeServer { // but usually a reload or two fixes it // TODO@jsjoeio @oxy look into Firefox reconnection/timeout issues while (!editorIsVisible) { + // When a reload happens, we want to wait for all resources to be + // loaded completely. Hence why we use that instead of DOMContentLoaded + // Read more: https://thisthat.dev/dom-content-loaded-vs-load/ + await this.page.waitForLoadState("load") + // Give it an extra second just in case it's feeling extra slow + await this.page.waitForTimeout(1000) reloadCount += 1 if (await this.isEditorVisible()) { console.log(` Editor became visible after ${reloadCount} reloads`) break } - // When a reload happens, we want to wait for all resources to be - // loaded completely. Hence why we use that instead of DOMContentLoaded - // Read more: https://thisthat.dev/dom-content-loaded-vs-load/ - await this.page.reload({ waitUntil: "load" }) + await this.page.reload() } } @@ -49,29 +53,19 @@ export class CodeServer { // Make sure the editor actually loaded // If it's not visible after 5 seconds, something is wrong await this.page.waitForLoadState("networkidle") - return await this.page.isVisible("div.monaco-workbench", { timeout: 5000 }) + return await this.page.isVisible(this.editorSelector) } /** * Focuses Integrated Terminal - * by going to the Application Menu - * and clicking View > Terminal + * by using "Terminal: Focus Terminal" + * from the Command Palette + * + * This should focus the terminal no matter + * if it already has focus and/or is or isn't + * visible already. */ async focusTerminal() { - // If the terminal is already visible - // then we can focus it by hitting the keyboard shortcut - const isTerminalVisible = await this.page.isVisible("#terminal") - if (isTerminalVisible) { - await this.page.keyboard.press(`Control+Backquote`) - // TODO fix this - // Wait for terminal to receive focus - await this.page.waitForSelector("div.terminal.xterm.focus") - // Sometimes the terminal reloads - // which is why we wait for it twice - await this.page.waitForSelector("div.terminal.xterm.focus") - return - } - // Open using the manu // Click [aria-label="Application Menu"] div[role="none"] await this.page.click('[aria-label="Application Menu"] div[role="none"]') @@ -79,17 +73,19 @@ export class CodeServer { await this.page.hover("text=View") await this.page.click("text=View") - // Click text=Terminal - await this.page.hover("text=Terminal") - await this.page.click("text=Terminal") + // Click text=Command Palette + await this.page.hover("text=Command Palette") + await this.page.click("text=Command Palette") - // Wait for terminal to receive focus - // Sometimes the terminal reloads once or twice - // which is why we wait for it to have the focus class - await this.page.waitForSelector("div.terminal.xterm.focus") - // Sometimes the terminal reloads - // which is why we wait for it twice - await this.page.waitForSelector("div.terminal.xterm.focus") + // Type Terminal: Focus Terminal + await this.page.keyboard.type("Terminal: Focus Terminal") + + // Click Terminal: Focus Terminal + await this.page.hover("text=Terminal: Focus Terminal") + await this.page.click("text=Terminal: Focus Terminal") + + // Wait for terminal textarea to show up + await this.page.waitForSelector("textarea.xterm-helper-textarea") } /** diff --git a/test/e2e/terminal.test.ts b/test/e2e/terminal.test.ts index 22a951ca2..c4bb45b11 100644 --- a/test/e2e/terminal.test.ts +++ b/test/e2e/terminal.test.ts @@ -52,6 +52,8 @@ test.describe("Integrated Terminal", () => { await page.waitForLoadState("load") await page.keyboard.type(`echo '${testString}' > '${tmpFile}'`) await page.keyboard.press("Enter") + // It may take a second to process + await page.waitForTimeout(1000) const { stdout } = await output expect(stdout).toMatch(testString)