refactor: e2e tests based on jest-playwright

Author: jsjoeio

test/e2e/login.test.ts

@@ -1,36 +1,20 @@
-import { chromium, Page, Browser, BrowserContext } from "playwright"
+/// <reference types="jest-playwright-preset" />
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
 
 describe("login", () => {
-  let browser: Browser
-  let page: Page
-  let context: BrowserContext
-
-  beforeAll(async () => {
-    browser = await chromium.launch()
-    context = await browser.newContext()
-  })
-
-  afterAll(async () => {
-    await browser.close()
-  })
-
   beforeEach(async () => {
-    page = await context.newPage()
-  })
-
-  afterEach(async () => {
-    await page.close()
-    // Remove password from local storage
-    await context.clearCookies()
+    await jestPlaywright.resetContext()
+    await page.goto(CODE_SERVER_ADDRESS)
   })
 
   it("should be able to login", async () => {
-    await page.goto(CODE_SERVER_ADDRESS)
     // Type in password
     await page.fill(".password", PASSWORD)
     // Click the submit button and login
     await page.click(".submit")
+    // For some reason, it wasn't waiting for the click and navigation before checking
+    // so adding a timeout ensures that we allow the editor time to load
+    await page.waitForTimeout(1000)
     // See the editor
     const codeServerEditor = await page.isVisible(".monaco-workbench")
     expect(codeServerEditor).toBeTruthy()

test/e2e/logout.test.ts

@@ -1,28 +1,9 @@
-import { chromium, Page, Browser, BrowserContext } from "playwright"
+/// <reference types="jest-playwright-preset" />
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
 
 describe("logout", () => {
-  let browser: Browser
-  let page: Page
-  let context: BrowserContext
-
-  beforeAll(async () => {
-    browser = await chromium.launch()
-    context = await browser.newContext()
-  })
-
-  afterAll(async () => {
-    await browser.close()
-  })
-
   beforeEach(async () => {
-    page = await context.newPage()
-  })
-
-  afterEach(async () => {
-    await page.close()
-    // Remove password from local storage
-    await context.clearCookies()
+    await jestPlaywright.resetContext()
   })
 
   it("should be able login and logout", async () => {
@@ -31,6 +12,8 @@ describe("logout", () => {
     await page.fill(".password", PASSWORD)
     // Click the submit button and login
     await page.click(".submit")
+    // Allow time to navigate
+    await page.waitForTimeout(1000)
     // See the editor
     const codeServerEditor = await page.isVisible(".monaco-workbench")
     expect(codeServerEditor).toBeTruthy()

test/e2e/openHelpAbout.test.ts

@@ -1,15 +1,11 @@
-import { chromium, Page, Browser, BrowserContext, Cookie } from "playwright"
+/// <reference types="jest-playwright-preset" />
+import { Cookie } from "playwright"
 import { hash } from "../../src/node/util"
 import { CODE_SERVER_ADDRESS, PASSWORD, STORAGE } from "../utils/constants"
 import { createCookieIfDoesntExist } from "../utils/helpers"
 
 describe("Open Help > About", () => {
-  let browser: Browser
-  let page: Page
-  let context: BrowserContext
-
-  beforeAll(async () => {
-    browser = await chromium.launch()
+  beforeEach(async () => {
     // Create a new context with the saved storage state
     const storageState = JSON.parse(STORAGE) || {}
 
@@ -42,22 +38,7 @@ describe("Open Help > About", () => {
     // See discussion: https://github.com/cdr/code-server/pull/2648#discussion_r575434946
 
     const maybeUpdatedCookies = createCookieIfDoesntExist(cookies, cookieToStore)
-
-    context = await browser.newContext({
-      storageState: { cookies: maybeUpdatedCookies },
-    })
-  })
-
-  afterAll(async () => {
-    // Remove password from local storage
-    await context.clearCookies()
-
-    await context.close()
-    await browser.close()
-  })
-
-  beforeEach(async () => {
-    page = await context.newPage()
+    await jestPlaywright.resetBrowser({ storageState: { cookies: maybeUpdatedCookies } })
   })
 
   it("should see a 'Help' then 'About' button in the Application Menu that opens a dialog", async () => {

test/utils/globalSetup.ts

@@ -21,6 +21,10 @@ module.exports = async () => {
   await page.fill(".password", PASSWORD)
   // Click the submit button and login
   await page.click(".submit")
+  // After logging in, we store a cookie in localStorage
+  // we need to wait a bit to make sure that happens
+  // before we grab the storage and save it
+  await page.waitForTimeout(1000)
 
   // Save storage state and store as an env variable
   // More info: https://playwright.dev/docs/auth?_highlight=authe#reuse-authentication-state