diff --git a/.gitignore b/.gitignore index 0b655bd0e..bc2697722 100644 --- a/.gitignore +++ b/.gitignore @@ -80,3 +80,13 @@ tmp/ ## packages dist .temp/ + +## playwright +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/package.json b/package.json index 762ce322a..ea9ec2ceb 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,8 @@ "format": "prettier --write \"**/*.{ts,tsx,md}\"" }, "devDependencies": { + "@playwright/test": "^1.41.2", + "@types/node": "^20.11.19", "autoprefixer": "^10.4.15", "eslint-config-custom": "*", "postcss": "^8.4.29", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 000000000..b965bb75d --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,70 @@ +import { defineConfig, devices } from "@playwright/test"; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +require("dotenv").config({ path: "web/.env" }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: "./web/tests", + /* Run tests in files in parallel */ + fullyParallel: false, + /* 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", + baseURL: process.env.PLAYWRIGHT_BASE_URL, + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: "chromium", + use: { ...devices["Desktop Chrome"] }, + }, + + // + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}); diff --git a/web/components/toast-alert/index.tsx b/web/components/toast-alert/index.tsx index b4df6ea05..cd6eb6363 100644 --- a/web/components/toast-alert/index.tsx +++ b/web/components/toast-alert/index.tsx @@ -12,7 +12,7 @@ const ToastAlerts = () => { return (