refactor: globalSetup to use CodeServer model

This commit is contained in:
Joe Previte 2021-04-21 14:31:15 -07:00
parent cb65590b98
commit b0ecff338f
No known key found for this signature in database
GPG Key ID: 2C91590C6B742C24
8 changed files with 128 additions and 59 deletions

View File

@ -1,15 +1,23 @@
import { test, expect } from "@playwright/test" 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 // This is a "gut-check" test to make sure playwright is working as expected
test("browser should display correct userAgent", async ({ page, 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 = { const displayNames = {
chromium: "Chrome", chromium: "Chrome",
firefox: "Firefox", firefox: "Firefox",
webkit: "Safari", webkit: "Safari",
} }
await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
const userAgent = await page.evaluate("navigator.userAgent") const userAgent = await page.evaluate("navigator.userAgent")
expect(userAgent).toContain(displayNames[browserName]) expect(userAgent).toContain(displayNames[browserName])
})
}) })

View File

@ -20,10 +20,10 @@ test.describe("CodeServer", () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
codeServer = new CodeServer(page) codeServer = new CodeServer(page)
await codeServer.navigate() await codeServer.setup()
}) })
test("should navigate to the CODE_SERVER_ADDRESS", options, async ({ page }) => { test(`should navigate to ${CODE_SERVER_ADDRESS}`, options, async ({ page }) => {
// We navigate codeServer before each test // We navigate codeServer before each test
// and we start the test with a storage state // and we start the test with a storage state
// which means we should be logged in // which means we should be logged in

View File

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

View File

@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test" 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", () => { test.describe("login", () => {
// Reset the browser so no cookies are persisted // Reset the browser so no cookies are persisted
@ -9,26 +10,32 @@ test.describe("login", () => {
storageState: {}, storageState: {},
}, },
} }
let codeServer: CodeServer
test.beforeEach(async ({ page }) => {
codeServer = new CodeServer(page)
await codeServer.navigate()
})
test("should see the login page", options, async ({ page }) => { 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 // It should send us to the login page
expect(await page.title()).toBe("code-server login") expect(await page.title()).toBe("code-server login")
}) })
test("should be able to login", options, async ({ page }) => { test("should be able to login", options, async ({ page }) => {
await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
// Type in password // Type in password
await page.fill(".password", PASSWORD) await page.fill(".password", PASSWORD)
// Click the submit button and login // Click the submit button and login
await page.click(".submit") await page.click(".submit")
await page.waitForLoadState("networkidle") 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 // 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 }) => { test("should see an error message for missing password", options, async ({ page }) => {
await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
// Skip entering password // Skip entering password
// Click the submit button and login // Click the submit button and login
await page.click(".submit") await page.click(".submit")
@ -37,7 +44,6 @@ test.describe("login", () => {
}) })
test("should see an error message for incorrect password", options, async ({ page }) => { test("should see an error message for incorrect password", options, async ({ page }) => {
await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
// Type in password // Type in password
await page.fill(".password", "password123") await page.fill(".password", "password123")
// Click the submit button and login // 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 }) => { 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 // Type in password
await page.fill(".password", "password123") await page.fill(".password", "password123")
// Click the submit button and login // Click the submit button and login

View File

@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test" import { test, expect } from "@playwright/test"
import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants" import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
import { CodeServer } from "./models/CodeServer"
test.describe("logout", () => { test.describe("logout", () => {
// Reset the browser so no cookies are persisted // Reset the browser so no cookies are persisted
@ -9,15 +10,24 @@ test.describe("logout", () => {
storageState: {}, 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 }) => { test("should be able login and logout", options, async ({ page }) => {
await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
// Type in password // Type in password
await page.fill(".password", PASSWORD) await page.fill(".password", PASSWORD)
// Click the submit button and login // Click the submit button and login
await page.click(".submit") await page.click(".submit")
await page.waitForLoadState("networkidle") 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 // 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 // Click the Application menu
await page.click("[aria-label='Application Menu']") await page.click("[aria-label='Application Menu']")

View File

@ -15,7 +15,13 @@ export class CodeServer {
*/ */
async navigate() { async navigate() {
await this.page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" }) 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() const editorIsVisible = await this.isEditorVisible()
let reloadCount = 0 let reloadCount = 0
@ -56,7 +62,12 @@ export class CodeServer {
// then we can focus it by hitting the keyboard shortcut // then we can focus it by hitting the keyboard shortcut
const isTerminalVisible = await this.page.isVisible("#terminal") const isTerminalVisible = await this.page.isVisible("#terminal")
if (isTerminalVisible) { if (isTerminalVisible) {
await this.page.keyboard.press(`Meta+Backquote`) await this.page.keyboard.press(`Control+Backquote`)
// 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 return
} }
// Open using the manu // Open using the manu
@ -70,5 +81,24 @@ export class CodeServer {
// Click text=Terminal // Click text=Terminal
await this.page.hover("text=Terminal") await this.page.hover("text=Terminal")
await this.page.click("text=Terminal") await this.page.click("text=Terminal")
// 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")
}
/**
* 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()
} }
} }

View File

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

View File

@ -2,7 +2,8 @@ import { test, expect } from "@playwright/test"
import * as fs from "fs" import * as fs from "fs"
import { tmpdir } from "os" import { tmpdir } from "os"
import * as path from "path" import * as path from "path"
import util from "util"
import * as cp from "child_process"
import { STORAGE } from "../utils/constants" import { STORAGE } from "../utils/constants"
import { CodeServer } from "./models/CodeServer" import { CodeServer } from "./models/CodeServer"
@ -10,9 +11,11 @@ test.describe("Integrated Terminal", () => {
// Create a new context with the saved storage state // Create a new context with the saved storage state
// so we don't have to logged in // so we don't have to logged in
const options: any = {} const options: any = {}
const testFileName = "test.txt" const testFileName = "pipe"
const testString = "new string test from e2e test" const testString = "new string test from e2e test"
let codeServer: CodeServer let codeServer: CodeServer
let tmpFolderPath: string = ""
let tmpFile: string = ""
// TODO@jsjoeio // TODO@jsjoeio
// Fix this once https://github.com/microsoft/playwright-test/issues/240 // Fix this once https://github.com/microsoft/playwright-test/issues/240
@ -25,26 +28,34 @@ test.describe("Integrated Terminal", () => {
} }
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
codeServer = new CodeServer(page) codeServer = new CodeServer(page)
await codeServer.navigate() await codeServer.setup()
})
test("should echo a string to a file", options, async ({ page }) => {
// NOTE@jsjoeio // NOTE@jsjoeio
// We're not using tmpdir from src/node/constants // We're not using tmpdir from src/node/constants
// because Playwright doesn't fully support ES modules from // because Playwright doesn't fully support ES modules from
// the erorrs I'm seeing // the erorrs I'm seeing
const tmpFolderPath = fs.mkdtempSync(path.join(tmpdir(), "code-server-test")) tmpFolderPath = fs.mkdtempSync(path.join(tmpdir(), "code-server-test"))
const tmpFile = `${tmpFolderPath}${path.sep}${testFileName}` tmpFile = path.join(tmpFolderPath, testFileName)
})
test.afterEach(async () => {
// Ensure directory was removed
fs.rmdirSync(tmpFolderPath, { recursive: true })
})
test("should echo a string to a file", options, async ({ page }) => {
const command = `mkfifo '${tmpFile}' && cat '${tmpFile}'`
const exec = util.promisify(cp.exec)
const output = exec(command, { encoding: "utf8" })
// Open terminal and type in value // Open terminal and type in value
await codeServer.focusTerminal() await codeServer.focusTerminal()
// give the terminal a second to load await page.waitForLoadState("load")
await page.waitForTimeout(3000) await page.keyboard.type(`echo '${testString}' > '${tmpFile}'`)
await page.keyboard.type(`echo '${testString}' > ${tmpFile}`)
// Wait for the typing to finish before hitting enter
await page.waitForTimeout(500)
await page.keyboard.press("Enter") await page.keyboard.press("Enter")
await page.waitForTimeout(2000)
const { stdout } = await output
expect(stdout).toMatch(testString)
// .access checks if the file exists without opening it // .access checks if the file exists without opening it
// it doesn't return anything hence why we expect it to // it doesn't return anything hence why we expect it to