From 67e3ab605a12b11914dae0f4e62d8a045a2150c7 Mon Sep 17 00:00:00 2001 From: JabSysEmb Date: Fri, 1 Dec 2023 19:31:35 +0300 Subject: [PATCH] setup e2e tests with playwright #291 --- .gitignore | 2 + e2e/open-popup.spec.ts | 6 --- e2e/popupFixture.ts | 30 --------------- e2e/setup/getCookies.test.ts | 15 ++++++++ e2e/tests/open-popup.test.ts | 13 +++++++ e2e/tests/popupFixture.ts | 36 +++++++++++++++++ playwright.config.ts | 75 +++++++++++++++++++----------------- 7 files changed, 105 insertions(+), 72 deletions(-) delete mode 100644 e2e/open-popup.spec.ts delete mode 100644 e2e/popupFixture.ts create mode 100644 e2e/setup/getCookies.test.ts create mode 100644 e2e/tests/open-popup.test.ts create mode 100644 e2e/tests/popupFixture.ts diff --git a/.gitignore b/.gitignore index d3a95ab6..50344cac 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,5 @@ dist-ssr /test-results/ /playwright-report/ /playwright/.cache/ + +/e2e/auth \ No newline at end of file diff --git a/e2e/open-popup.spec.ts b/e2e/open-popup.spec.ts deleted file mode 100644 index 1e5d2a8b..00000000 --- a/e2e/open-popup.spec.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { test, expect } from './popupFixture'; - -test('popup page', async ({ page, extensionId }) => { - await page.goto(`chrome-extension://${extensionId}/index.html`); - expect(page.locator('body')).toBeTruthy(); -}); diff --git a/e2e/popupFixture.ts b/e2e/popupFixture.ts deleted file mode 100644 index 281ad137..00000000 --- a/e2e/popupFixture.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { test as base, chromium, type BrowserContext } from "@playwright/test"; -import path from "path"; - -export const test = base.extend<{ - context: BrowserContext; - extensionId: string; -}>({ - context: async ({}, use) => { - const pathToExtension = path.join(__dirname, "../dist"); - const context = await chromium.launchPersistentContext("", { - headless: false, - args: [ - `--headless=new`, - `--disable-extensions-except=${pathToExtension}`, - `--load-extension=${pathToExtension}`, - ], - }); - await use(context); - await context.close(); - }, - extensionId: async ({ context }, use) => { - let [background] = context.serviceWorkers(); - if (!background) background = await context.waitForEvent("serviceworker"); - - const extensionId = background.url().split("/")[2]; - await use(extensionId); - }, -}); - -export const expect = test.expect; diff --git a/e2e/setup/getCookies.test.ts b/e2e/setup/getCookies.test.ts new file mode 100644 index 00000000..4e432a91 --- /dev/null +++ b/e2e/setup/getCookies.test.ts @@ -0,0 +1,15 @@ +import { test as setup } from "@playwright/test"; + +const authFile = "./e2e/auth/auth.json"; + +setup("get auth token", async ({ page }) => { + await page.goto("https://www.github.com/login"); + await page.fill("#login_field", "username"); + await page.fill("#password", "password"); + + await page.locator('input[type="submit"]').click(); + + await page.waitForURL("https://github.com/"); + + await page.context().storageState({ path: "./e2e/auth/auth.json" }); +}); diff --git a/e2e/tests/open-popup.test.ts b/e2e/tests/open-popup.test.ts new file mode 100644 index 00000000..35adf2ed --- /dev/null +++ b/e2e/tests/open-popup.test.ts @@ -0,0 +1,13 @@ +import { test, expect } from './popupFixture'; + +test('popup page', async ({ page, extensionId, context }) => { + await page.goto(`chrome-extension://${extensionId}/index.html`); + await page.getByRole('button', {name: 'Login'}).click(); + + const authPage = await context.waitForEvent('page'); + await authPage.waitForURL('https://beta.app.opensauced.pizza/feed'); + await authPage.close(); + + await page.reload(); + await expect(page.getByAltText( "OpenSauced logo")).toBeVisible(); +}); diff --git a/e2e/tests/popupFixture.ts b/e2e/tests/popupFixture.ts new file mode 100644 index 00000000..b04dfcd7 --- /dev/null +++ b/e2e/tests/popupFixture.ts @@ -0,0 +1,36 @@ +import { test as base, chromium, type BrowserContext } from "@playwright/test"; +import path from "path"; +const auth = require("../auth/auth.json"); + +export const test = base.extend<{ + context: BrowserContext; + extensionId: string; +}>({ + context: async ({}, use) => { + const pathToExtension = path.join(__dirname, "../../dist"); + const context = await chromium.launchPersistentContext("../auth", { + headless: false, + args: [ + `--headless=new`, + `--disable-extensions-except=${pathToExtension}`, + `--load-extension=${pathToExtension}`, + ], + }); + // @https://github.com/microsoft/playwright/issues/14949 + // It seems that the PersistentContext in this context lacks support for storageState + // Alternatively, it's possible to add the cookies to the context by `addCookies`. + context.addCookies(auth["cookies"]); + + await use(context); + await context.close(); + }, + extensionId: async ({ context }, use) => { + let [background] = context.serviceWorkers(); + if (!background) background = await context.waitForEvent("serviceworker"); + + const extensionId = background.url().split("/")[2]; + await use(extensionId); + }, +}); + +export const expect = test.expect; diff --git a/playwright.config.ts b/playwright.config.ts index 82f08d6d..f92ed981 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,45 +1,48 @@ -import { defineConfig, devices } from '@playwright/test'; +import { defineConfig, devices } from "@playwright/test"; /** * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ - testDir: './e2e', - /* Run tests in files in parallel */ - fullyParallel: true, - /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, - /* Retry on CI only */ - retries: process.env.CI ? 2 : 0, - /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - /* Base URL to use in actions like `await page.goto('/')`. */ - // baseURL: 'http://127.0.0.1:3000', + testDir: "./e2e/tests", + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: "html", + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + // baseURL: 'http://127.0.0.1:3000', - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, - }, - // { - // name: 'firefox', - // use: { ...devices['Desktop Firefox'] }, - // }, - ], + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: "on-first-retry", + }, - /* Run your local dev server before starting the tests */ - webServer: { - command: 'npm run dev', - url: 'http://127.0.0.1:3000', - reuseExistingServer: !process.env.CI, + /* Configure projects for major browsers */ + projects: [ + { name: "setup", testDir: "./e2e/setup", testMatch: "*.test.ts" }, + { + name: "chromium", + testMatch: "*.test.ts", + use: { ...devices["Desktop Chrome"] }, + dependencies: ["setup"], }, + // { + // name: 'firefox', + // use: { ...devices['Desktop Firefox'] }, + // }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: "npm run dev", + url: "http://127.0.0.1:3000", + reuseExistingServer: !process.env.CI, + }, });