From 687dafab3ecef61fdad1763287640cd2488d5918 Mon Sep 17 00:00:00 2001 From: Valere Date: Thu, 13 Mar 2025 14:44:04 +0100 Subject: [PATCH] First integration tests with playwright --- .github/workflows/playwright.yml | 30 +++++++++++++ .gitignore | 6 +++ README.md | 39 +++++++++++++++++ package.json | 5 ++- playwright.config.ts | 74 ++++++++++++++++++++++++++++++++ playwright/create-call.spec.ts | 59 +++++++++++++++++++++++++ playwright/landing.spec.ts | 30 +++++++++++++ yarn.lock | 21 +++++++++ 8 files changed, 263 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 playwright.config.ts create mode 100644 playwright/create-call.spec.ts create mode 100644 playwright/landing.spec.ts diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..381d8bef --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,30 @@ +name: Playwright Tests +on: + pull_request: {} + push: + branches: [livekit, full-mesh] +jobs: + test: + timeout-minutes: 5mn + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm install -g yarn && yarn + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + - name: Run backend components + run: | + docker-compose -f dev-backend-docker-compose.yml up -d + docker ps + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 3 diff --git a/.gitignore b/.gitignore index 7b2cd2c2..938fe508 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,9 @@ public/config.json backend/synapse_tmp/* /coverage yarn-error.log + +# Playwright +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/README.md b/README.md index acadb9c0..4880c9bf 100644 --- a/README.md +++ b/README.md @@ -189,6 +189,45 @@ yarn backend # podman-compose -f dev-backend-docker-compose.yml up ``` +### Playwright tests + +Our Playwright tests run automatically as part of our CI along with our other tests, +on every pull request. + +You may need to follow instructions to set up your development environment for running +Playwright by following and +. + +However the Playwright tests are run, an element-call instance must be running on +https://localhost:3000 (this is configured in `playwright.config.ts`) - this is what will +be tested. + +The local backend environment should be running for the test to work: +`yarn backend` + +There are a few different ways to run the tests yourself. The simplest is to run: + +```shell +yarn run test:playwright +``` + +This will run the Playwright tests once, non-interactively. + +There is a more user-friendly way to run the tests in interactive mode: + +```shell +yarn run test:playwright:open +``` + +The easiest way to develop new test is to use the codegen feature of Playwright: + +```shell +npx playwright codegen +``` + +This will record your action and write the test code for you. Use the tool bar to test visibility, text content, +clicking.. + ### Test Coverage diff --git a/package.json b/package.json index cacd969b..2f087f60 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,9 @@ "i18n:check": "i18next --fail-on-warnings --fail-on-update", "test": "vitest", "test:coverage": "vitest --coverage", - "backend": "docker-compose -f dev-backend-docker-compose.yml up" + "backend": "docker-compose -f dev-backend-docker-compose.yml up", + "test:playwright": "playwright test", + "test:playwright:open": "yarn test:playwright --ui" }, "devDependencies": { "@babel/core": "^7.16.5", @@ -43,6 +45,7 @@ "@opentelemetry/sdk-trace-base": "^1.25.1", "@opentelemetry/sdk-trace-web": "^1.9.1", "@opentelemetry/semantic-conventions": "^1.25.1", + "@playwright/test": "^1.51.0", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-visually-hidden": "^1.0.3", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..a4e7e06e --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,74 @@ +import { defineConfig, devices } from "@playwright/test"; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: "./playwright", + /* 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: "https://localhost: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"], + permissions: ["microphone", "camera"], + launchOptions: { + args: [ + "--use-fake-ui-for-media-stream", + "--use-fake-device-for-media-stream", + "--mute-audio", + ], + }, + }, + }, + + { + name: "firefox", + use: { + ...devices["Desktop Firefox"], + launchOptions: { + firefoxUserPrefs: { + "permissions.default.microphone": 1, + "permissions.default.camera": 1, + }, + }, + }, + }, + + // No safari for now, until I find a solution to fix `Not allowed to request resource` due to calling + // clear http to the homeserver + ], + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'yarn run backend', + // url: 'http://synapse.localhost:8008', + // reuseExistingServer: !process.env.CI, + // }, +}); diff --git a/playwright/create-call.spec.ts b/playwright/create-call.spec.ts new file mode 100644 index 00000000..8c2395cb --- /dev/null +++ b/playwright/create-call.spec.ts @@ -0,0 +1,59 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, test } from "@playwright/test"; + +test("Start a new call then leave and show the feedback screen", async ({ + page, +}) => { + await page.goto("/"); + + await page.getByTestId("home_callName").click(); + await page.getByTestId("home_callName").fill("HelloCall"); + await page.getByTestId("home_displayName").click(); + await page.getByTestId("home_displayName").fill("John Doe"); + await page.getByTestId("home_go").click(); + + await expect(page.locator("video")).toBeVisible(); + await expect(page.getByTestId("lobby_joinCall")).toBeVisible(); + + // Check the button toolbar + // await expect(page.getByRole('button', { name: 'Mute microphone' })).toBeVisible(); + // await expect(page.getByRole('button', { name: 'Stop video' })).toBeVisible(); + await expect(page.getByRole("button", { name: "Settings" })).toBeVisible(); + await expect(page.getByRole("button", { name: "End call" })).toBeVisible(); + + // Join the call + await page.getByTestId("lobby_joinCall").click(); + + // Ensure that the call is connected + await page + .locator("div") + .filter({ hasText: /^HelloCall$/ }) + .click(); + // Check the number of participants + await expect(page.locator("div").filter({ hasText: /^1$/ })).toBeVisible(); + // The tooltip with the name should be visible + await expect(page.getByTestId("name_tag")).toContainText("John Doe"); + + // leave the call + await page.getByTestId("incall_leave").click(); + await expect(page.getByRole("heading")).toContainText( + "John Doe, your call has ended. How did it go?", + ); + await expect(page.getByRole("main")).toContainText( + "We'd love to hear your feedback so we can improve your experience.", + ); + + // Strange that the submit button test-id is home_go + await expect(page.getByTestId("home_go")).toBeVisible(); + await expect(page.getByTestId("home_go")).toContainText("Submit"); + + await expect( + page.getByRole("link", { name: "Not now, return to home screen" }), + ).toBeVisible(); +}); diff --git a/playwright/landing.spec.ts b/playwright/landing.spec.ts new file mode 100644 index 00000000..b22a037e --- /dev/null +++ b/playwright/landing.spec.ts @@ -0,0 +1,30 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { test, expect } from "@playwright/test"; + +test("has title", async ({ page }) => { + await page.goto("/"); + + await expect(page).toHaveTitle(/Element Call/); +}); + +test("Landing page", async ({ page }) => { + await page.goto("/"); + + // There should be a login button in the header + await expect(page.getByRole("link", { name: "Log In" })).toBeVisible(); + + await expect( + page.getByRole("heading", { name: "Start new call" }), + ).toBeVisible(); + + await expect(page.getByTestId("home_callName")).toBeVisible(); + await expect(page.getByTestId("home_displayName")).toBeVisible(); + + await expect(page.getByTestId("home_go")).toBeVisible(); +}); diff --git a/yarn.lock b/yarn.lock index c6b9c56b..61d70d96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2137,6 +2137,13 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== +"@playwright/test@^1.51.0": + version "1.51.0" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.0.tgz#8d5c8400b465a0bfdbcf993e390ceecb903ea6d2" + integrity sha512-dJ0dMbZeHhI+wb77+ljx/FeC8VBP6j/rj9OAojO08JI80wTZy6vRk9KvHKiDCUh4iMpEiseMgqRBIeW+eKX6RA== + dependencies: + playwright "1.51.0" + "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf" @@ -6995,6 +7002,20 @@ picomatch@^4.0.1, picomatch@^4.0.2: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab" integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg== +playwright-core@1.51.0: + version "1.51.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.0.tgz#bb23ea6bb6298242d088ae5e966ffcf8dc9827e8" + integrity sha512-x47yPE3Zwhlil7wlNU/iktF7t2r/URR3VLbH6EknJd/04Qc/PSJ0EY3CMXipmglLG+zyRxW6HNo2EGbKLHPWMg== + +playwright@1.51.0: + version "1.51.0" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.0.tgz#9ba154497ba62bc6dc199c58ee19295eb35a4707" + integrity sha512-442pTfGM0xxfCYxuBa/Pu6B2OqxqqaYq39JS8QDMGThUvIOCd6s0ANDog3uwA0cHavVlnTQzGCN7Id2YekDSXA== + dependencies: + playwright-core "1.51.0" + optionalDependencies: + fsevents "2.3.2" + pluralize@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"