From 1ed59465ac29ca7076bd14e00fe6ee61087f43b2 Mon Sep 17 00:00:00 2001 From: Chris Smith <1979423+chris13524@users.noreply.github.com> Date: Fri, 12 Jan 2024 08:56:45 -0500 Subject: [PATCH] chore: initial Playwright tests (#313) * chore: initial Playwright tests * chore: just test on main Co-authored-by: Celine Sarafa * chore: script name Co-authored-by: Celine Sarafa * fix: docs * chore: reset to main * chore: install deps --------- Co-authored-by: Celine Sarafa --- .github/workflows/playwright.yml | 29 ++++++++++++ .gitignore | 4 ++ README.md | 7 +++ package.json | 6 ++- playwright.config.ts | 81 ++++++++++++++++++++++++++++++++ tests/home.spec.ts | 11 +++++ tsconfig.json | 2 +- yarn.lock | 38 +++++++++++++++ 8 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 playwright.config.ts create mode 100644 tests/home.spec.ts diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..e18764d9 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,29 @@ +name: Playwright Tests +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] +jobs: + test: + timeout-minutes: 10 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Install dependencies + run: yarn + - name: Install Playwright Browsers + run: yarn playwright:install + - name: Run Playwright tests + run: yarn playwright:test + env: + VITE_PROJECT_ID: ${{ secrets.VITE_DEV_PROJECT_ID }} + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index bbc64904..32917826 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,7 @@ dist-ssr *.sw? dev-dist +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/README.md b/README.md index c3278dbd..cd7ce6fb 100644 --- a/README.md +++ b/README.md @@ -24,3 +24,10 @@ Run the development server: ```bash yarn dev ``` + +## Testing + +```bash +yarn playwright:install +yarn playwright:test +``` diff --git a/package.json b/package.json index f4d07210..c90d504c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "lint": "eslint .", "prepare": "husky install", "prettier": "prettier --check '**/*.{js,ts,jsx,tsx,scss}'", - "prettier:write": "prettier --write '**/*.{js,ts,jsx,tsx,scss}'" + "prettier:write": "prettier --write '**/*.{js,ts,jsx,tsx,scss}'", + "playwright:install": "playwright install --with-deps", + "playwright:test": "playwright test" }, "dependencies": { "@sentry/react": "^7.64.0", @@ -41,9 +43,11 @@ "wagmi": "^1.4.2" }, "devDependencies": { + "@playwright/test": "^1.40.1", "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/lodash.debounce": "^4.0.7", "@types/mixpanel-browser": "^2.47.1", + "@types/node": "^20.10.5", "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", "@typescript-eslint/eslint-plugin": "^5.45.1", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..bf777b37 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,81 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +const baseURL = 'http://localhost:5173'; + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './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, + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + + screenshot: 'only-on-failure', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* 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: 'yarn dev', + url: baseURL, + reuseExistingServer: !process.env.CI, + }, +}); diff --git a/tests/home.spec.ts b/tests/home.spec.ts new file mode 100644 index 00000000..cd7d9cee --- /dev/null +++ b/tests/home.spec.ts @@ -0,0 +1,11 @@ +import { test, expect } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto("/"); + await expect(page).toHaveTitle(/Web3Inbox/); +}); + +test('welcome message', async ({ page }) => { + await page.goto("/"); + await expect(page.getByText("Welcome to Web3Inbox")).toBeVisible(); +}); diff --git a/tsconfig.json b/tsconfig.json index 948c910c..062b57f5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,7 @@ "@/*": ["./src/*"] } }, - "include": ["src"], + "include": ["src", "playwright.config.ts", "tests"], "exclude": ["*/**/*.js"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/yarn.lock b/yarn.lock index 0d51096b..4dc6b09e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2283,6 +2283,13 @@ "@parcel/watcher-win32-ia32" "2.3.0" "@parcel/watcher-win32-x64" "2.3.0" +"@playwright/test@^1.40.1": + version "1.40.1" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.1.tgz#9e66322d97b1d74b9f8718bacab15080f24cde65" + integrity sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw== + dependencies: + playwright "1.40.1" + "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" resolved "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz" @@ -2790,6 +2797,13 @@ resolved "https://registry.npmjs.org/@types/node/-/node-12.20.55.tgz" integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ== +"@types/node@^20.10.5": + version "20.11.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.0.tgz#8e0b99e70c0c1ade1a86c4a282f7b7ef87c9552f" + integrity sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ== + dependencies: + undici-types "~5.26.4" + "@types/parse-json@^4.0.0": version "4.0.0" resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz" @@ -5405,6 +5419,11 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + fsevents@~2.3.2: version "2.3.3" resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" @@ -7008,6 +7027,20 @@ pkg-types@^1.0.3: mlly "^1.2.0" pathe "^1.1.0" +playwright-core@1.40.1: + version "1.40.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.1.tgz#442d15e86866a87d90d07af528e0afabe4c75c05" + integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ== + +playwright@1.40.1: + version "1.40.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.1.tgz#a11bf8dca15be5a194851dbbf3df235b9f53d7ae" + integrity sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw== + dependencies: + playwright-core "1.40.1" + optionalDependencies: + fsevents "2.3.2" + pngjs@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz" @@ -8083,6 +8116,11 @@ uncrypto@^0.1.3: resolved "https://registry.yarnpkg.com/uncrypto/-/uncrypto-0.1.3.tgz#e1288d609226f2d02d8d69ee861fa20d8348ef2b" integrity sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q== +undici-types@~5.26.4: + version "5.26.5" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" + integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== + unenv@^1.7.4: version "1.8.0" resolved "https://registry.yarnpkg.com/unenv/-/unenv-1.8.0.tgz#0f860d5278405700bd95d47b23bc01f3a735d68c"