import { chromium, Page, Browser, BrowserContext, 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() // Create a new context with the saved storage state const storageState = JSON.parse(STORAGE) || {} const cookieToStore = { sameSite: "Lax" as const, name: "key", value: hash(PASSWORD), domain: "localhost", path: "/", expires: -1, httpOnly: false, secure: false, } // For some odd reason, the login method used in globalSetup.ts doesn't always work // I don't know if it's on playwright clearing our cookies by accident // or if it's our cookies disappearing. // This means we need an additional check to make sure we're logged in. // We do this by manually adding the cookie to the browser environment // if it's not there at the time the test starts const cookies: Cookie[] = storageState.cookies || [] // If the cookie exists in cookies then // this will return the cookies with no changes // otherwise if it doesn't exist, it will create it // hence the name maybeUpdatedCookies // // TODO(@jsjoeio) // The playwright storage thing sometimes works and sometimes doesn't. We should investigate this further // at some point. // 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() }) it("should see a 'Help' then 'About' button in the Application Menu that opens a dialog", async () => { // waitUntil: "domcontentloaded" // In case the page takes a long time to load await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "domcontentloaded" }) // Make sure the editor actually loaded expect(await page.isVisible("div.monaco-workbench")) // 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)) // Hover the helpButton await page.hover(helpButton) // see the About button and click it const aboutButton = "a.action-menu-item span[aria-label='About']" expect(await page.isVisible(aboutButton)) // 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)) }) })