refactor: globalSetup to use CodeServer model

Author: jsjoeio

test/e2e/browser.test.ts

@@ -1,15 +1,23 @@
 import { test, expect } from "@playwright/test"
-import { CODE_SERVER_ADDRESS } from "../utils/constants"
+import { CodeServer } from "./models/CodeServer"
 
 // This is a "gut-check" test to make sure playwright is working as expected
-test("browser should display correct userAgent", async ({ page, browserName }) => {
-  const displayNames = {
-    chromium: "Chrome",
-    firefox: "Firefox",
-    webkit: "Safari",
-  }
-  await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
-  const userAgent = await page.evaluate("navigator.userAgent")
-
-  expect(userAgent).toContain(displayNames[browserName])
+test.describe("browser", () => {
+  let codeServer: CodeServer
+
+  test.beforeEach(async ({ page }) => {
+    codeServer = new CodeServer(page)
+    await codeServer.navigate()
+  })
+
+  test("browser should display correct userAgent", async ({ page, browserName }) => {
+    const displayNames = {
+      chromium: "Chrome",
+      firefox: "Firefox",
+      webkit: "Safari",
+    }
+    const userAgent = await page.evaluate("navigator.userAgent")
+
+    expect(userAgent).toContain(displayNames[browserName])
+  })
 })

test/e2e/codeServer.test.ts

@@ -20,7 +20,7 @@ test.describe("CodeServer", () => {
 
   test.beforeEach(async ({ page }) => {
     codeServer = new CodeServer(page)
-    await codeServer.navigate()
+    await codeServer.setup()
   })
 
   test("should navigate to the CODE_SERVER_ADDRESS", options, async ({ page }) => {

test/e2e/globalSetup.test.ts

@@ -1,12 +1,14 @@
 import { test, expect } from "@playwright/test"
-import { CODE_SERVER_ADDRESS, STORAGE } from "../utils/constants"
+import { STORAGE } from "../utils/constants"
+import { CodeServer } from "./models/CodeServer"
 
 // This test is to make sure the globalSetup works as expected
 // meaning globalSetup ran and stored the storageState in STORAGE
 test.describe("globalSetup", () => {
   // Create a new context with the saved storage state
   // so we don't have to logged in
   const options: any = {}
+  let codeServer: CodeServer
 
   // TODO@jsjoeio
   // Fix this once https://github.com/microsoft/playwright-test/issues/240
@@ -17,9 +19,12 @@ test.describe("globalSetup", () => {
       storageState,
     }
   }
+  test.beforeEach(async ({ page }) => {
+    codeServer = new CodeServer(page)
+    await codeServer.setup()
+  })
   test("should keep us logged in using the storageState", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // Make sure the editor actually loaded
-    expect(await page.isVisible("div.monaco-workbench")).toBe(true)
+    expect(await codeServer.isEditorVisible()).toBe(true)
   })
 })

test/e2e/login.test.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test"
-import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
+import { PASSWORD } from "../utils/constants"
+import { CodeServer } from "./models/CodeServer"
 
 test.describe("login", () => {
   // Reset the browser so no cookies are persisted
@@ -9,26 +10,32 @@ test.describe("login", () => {
       storageState: {},
     },
   }
+  let codeServer: CodeServer
+
+  test.beforeEach(async ({ page }) => {
+    codeServer = new CodeServer(page)
+    await codeServer.navigate()
+  })
 
   test("should see the login page", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // It should send us to the login page
     expect(await page.title()).toBe("code-server login")
   })
 
   test("should be able to login", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // Type in password
     await page.fill(".password", PASSWORD)
     // Click the submit button and login
     await page.click(".submit")
     await page.waitForLoadState("networkidle")
+    // We do this because occassionally code-server doesn't load on Firefox
+    // but loads if you reload once or twice
+    await codeServer.reloadUntilEditorIsVisible()
     // Make sure the editor actually loaded
-    expect(await page.isVisible("div.monaco-workbench")).toBe(true)
+    expect(await codeServer.isEditorVisible()).toBe(true)
   })
 
   test("should see an error message for missing password", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // Skip entering password
     // Click the submit button and login
     await page.click(".submit")
@@ -37,7 +44,6 @@ test.describe("login", () => {
   })
 
   test("should see an error message for incorrect password", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // Type in password
     await page.fill(".password", "password123")
     // Click the submit button and login
@@ -47,7 +53,6 @@ test.describe("login", () => {
   })
 
   test("should hit the rate limiter for too many unsuccessful logins", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // Type in password
     await page.fill(".password", "password123")
     // Click the submit button and login

test/e2e/logout.test.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test"
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
+import { CodeServer } from "./models/CodeServer"
 
 test.describe("logout", () => {
   // Reset the browser so no cookies are persisted
@@ -9,15 +10,24 @@ test.describe("logout", () => {
       storageState: {},
     },
   }
+  let codeServer: CodeServer
+
+  test.beforeEach(async ({ page }) => {
+    codeServer = new CodeServer(page)
+    await codeServer.navigate()
+  })
+
   test("should be able login and logout", options, async ({ page }) => {
-    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
     // Type in password
     await page.fill(".password", PASSWORD)
     // Click the submit button and login
     await page.click(".submit")
     await page.waitForLoadState("networkidle")
+    // We do this because occassionally code-server doesn't load on Firefox
+    // but loads if you reload once or twice
+    await codeServer.reloadUntilEditorIsVisible()
     // Make sure the editor actually loaded
-    expect(await page.isVisible("div.monaco-workbench")).toBe(true)
+    expect(await codeServer.isEditorVisible()).toBe(true)
 
     // Click the Application menu
     await page.click("[aria-label='Application Menu']")

test/e2e/models/CodeServer.ts

@@ -15,7 +15,13 @@ export class CodeServer {
    */
   async navigate() {
     await this.page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
+  }
 
+  /**
+   * Checks if the editor is visible
+   * and reloads until it is
+   */
+  async reloadUntilEditorIsVisible() {
     const editorIsVisible = await this.isEditorVisible()
     let reloadCount = 0
 
@@ -56,7 +62,7 @@ export class CodeServer {
     // then we can focus it by hitting the keyboard shortcut
     const isTerminalVisible = await this.page.isVisible("#terminal")
     if (isTerminalVisible) {
-      await this.page.keyboard.press(`Meta+Backquote`)
+      await this.page.keyboard.press(`Control+Backquote`)
       return
     }
     // Open using the manu
@@ -71,4 +77,15 @@ export class CodeServer {
     await this.page.hover("text=Terminal")
     await this.page.click("text=Terminal")
   }
+
+  /**
+   * Navigates to CODE_SERVER_ADDRESS
+   * and reloads until the editor is visible
+   *
+   * Helpful for running before tests
+   */
+  async setup() {
+    await this.navigate()
+    await this.reloadUntilEditorIsVisible()
+  }
 }

test/e2e/openHelpAbout.test.ts

@@ -1,10 +1,12 @@
 import { test, expect } from "@playwright/test"
-import { CODE_SERVER_ADDRESS, STORAGE } from "../utils/constants"
+import { STORAGE } from "../utils/constants"
+import { CodeServer } from "./models/CodeServer"
 
 test.describe("Open Help > About", () => {
   // Create a new context with the saved storage state
   // so we don't have to logged in
   const options: any = {}
+  let codeServer: CodeServer
   // TODO@jsjoeio
   // Fix this once https://github.com/microsoft/playwright-test/issues/240
   // is fixed
@@ -15,32 +17,30 @@ test.describe("Open Help > About", () => {
     }
   }
 
+  test.beforeEach(async ({ page }) => {
+    codeServer = new CodeServer(page)
+    await codeServer.setup()
+  })
+
   test(
     "should see a 'Help' then 'About' button in the Application Menu that opens a dialog",
     options,
     async ({ page }) => {
-      await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
-      // Make sure the editor actually loaded
-      expect(await page.isVisible("div.monaco-workbench")).toBe(true)
-
-      // Click the Application menu
-      await page.click("[aria-label='Application Menu']")
-      // See the Help button
-      const helpButton = "a.action-menu-item span[aria-label='Help']"
-      expect(await page.isVisible(helpButton)).toBe(true)
+      // Open using the manu
+      // Click [aria-label="Application Menu"] div[role="none"]
+      await page.click('[aria-label="Application Menu"] div[role="none"]')
 
-      // Hover the helpButton
-      await page.hover(helpButton)
+      // Click the Help button
+      await page.hover("text=Help")
+      await page.click("text=Help")
 
-      // see the About button and click it
-      const aboutButton = "a.action-menu-item span[aria-label='About']"
-      expect(await page.isVisible(aboutButton)).toBe(true)
-      // NOTE: it won't work unless you hover it first
-      await page.hover(aboutButton)
-      await page.click(aboutButton)
+      // Click the About button
+      await page.hover("text=About")
+      await page.click("text=About")
 
-      const codeServerText = "text=code-server"
-      expect(await page.isVisible(codeServerText)).toBe(true)
+      // Click div[role="dialog"] >> text=code-server
+      const element = await page.waitForSelector('div[role="dialog"] >> text=code-server')
+      expect(element).not.toBeNull()
     },
   )
 })

test/e2e/terminal.test.ts

@@ -25,7 +25,7 @@ test.describe("Integrated Terminal", () => {
   }
   test.beforeEach(async ({ page }) => {
     codeServer = new CodeServer(page)
-    await codeServer.navigate()
+    await codeServer.setup()
   })
 
   test("should echo a string to a file", options, async ({ page }) => {