From 4fbe5388f7d731537f855450236a045353b849c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:10:57 +0100 Subject: [PATCH 1/7] chore: install playwright --- .github/workflows/playwright.yml | 27 +++++++++++ .gitignore | 4 ++ e2e/example.spec.ts | 20 +++++++++ package-lock.json | 68 ++++++++++++++++++++++++++-- package.json | 1 + playwright.config.ts | 77 ++++++++++++++++++++++++++++++++ 6 files changed, 193 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 e2e/example.spec.ts create mode 100644 playwright.config.ts diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..90b6b70 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index c7ad28f..ca26206 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,7 @@ next-env.d.ts robots.txt sitemap.xml sitemap-*.xml +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts new file mode 100644 index 0000000..dc74c23 --- /dev/null +++ b/e2e/example.spec.ts @@ -0,0 +1,20 @@ +import { expect, test } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('https://playwright.dev/'); + + // Expect a title "to contain" a substring. + await expect(page).toHaveTitle(/Playwright/); +}); + +test('get started link', async ({ page }) => { + await page.goto('https://playwright.dev/'); + + // Click the get started link. + await page.getByRole('link', { name: 'Get started' }).click(); + + // Expects page to have a heading with the name of Installation. + await expect( + page.getByRole('heading', { name: 'Installation' }) + ).toBeVisible(); +}); diff --git a/package-lock.json b/package-lock.json index 4e3f134..ff2c8f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "next-starter", - "version": "0.1.0", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "next-starter", - "version": "0.1.0", + "version": "1.0.0", "dependencies": { "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", - "clsx": "2.1.0", + "clsx": "^2.1.0", "lucide-react": "^0.312.0", "next": "14.1.0", "next-themes": "^0.2.1", @@ -21,6 +21,7 @@ "devDependencies": { "@commitlint/cli": "^18.6.0", "@commitlint/config-conventional": "^18.6.0", + "@playwright/test": "^1.41.1", "@testing-library/jest-dom": "^6.3.0", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", @@ -41,7 +42,7 @@ "jest-environment-jsdom": "^29.7.0", "lint-staged": "^15.2.0", "next-sitemap": "^4.2.3", - "postcss": "8.4.33", + "postcss": "^8", "prettier": "^3.2.4", "tailwindcss": "^3.3.0", "tailwindcss-animate": "^1.0.7", @@ -2164,6 +2165,21 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@playwright/test": { + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.1.tgz", + "integrity": "sha512-9g8EWTjiQ9yFBXc6HjCWe41msLpxEX0KhmfmPl9RPLJdfzL4F0lg2BdJ91O9azFdl11y1pmpwdjBiSxvqc+btw==", + "dev": true, + "dependencies": { + "playwright": "1.41.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -8882,6 +8898,50 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.1.tgz", + "integrity": "sha512-gdZAWG97oUnbBdRL3GuBvX3nDDmUOuqzV/D24dytqlKt+eI5KbwusluZRGljx1YoJKZ2NRPaeWiFTeGZO7SosQ==", + "dev": true, + "dependencies": { + "playwright-core": "1.41.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.1.tgz", + "integrity": "sha512-/KPO5DzXSMlxSX77wy+HihKGOunh3hqndhqeo/nMxfigiKzogn8kfL0ZBDu0L1RKgan5XHCPmn6zXd2NUJgjhg==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.4.33", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz", diff --git a/package.json b/package.json index 520e9a7..5abbe81 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "devDependencies": { "@commitlint/cli": "^18.6.0", "@commitlint/config-conventional": "^18.6.0", + "@playwright/test": "^1.41.1", "@testing-library/jest-dom": "^6.3.0", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..bfe3e83 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,77 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * 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', + + /* 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'] }, + }, + + { + 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: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}); From fdeba4a9ca60a9f4d42bd0224517d750e9b3a1f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:39:31 +0100 Subject: [PATCH 2/7] chore: configure playwright --- e2e/example.spec.ts | 20 ------------------- jest.config.js | 1 + package.json | 2 ++ playwright.config.ts | 2 +- src/__tests__/e2e/home.spec.ts | 7 +++++++ .../{home.test.tsx => unit/home.spec.tsx} | 0 6 files changed, 11 insertions(+), 21 deletions(-) delete mode 100644 e2e/example.spec.ts create mode 100644 src/__tests__/e2e/home.spec.ts rename src/__tests__/{home.test.tsx => unit/home.spec.tsx} (100%) diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts deleted file mode 100644 index dc74c23..0000000 --- a/e2e/example.spec.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { expect, test } from '@playwright/test'; - -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects page to have a heading with the name of Installation. - await expect( - page.getByRole('heading', { name: 'Installation' }) - ).toBeVisible(); -}); diff --git a/jest.config.js b/jest.config.js index c75d356..a6adaff 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,6 +7,7 @@ const createJestConfig = nextJest({ const config = { setupFilesAfterEnv: ['/jest.setup.js'], testEnvironment: 'jest-environment-jsdom', + testPathIgnorePatterns: ['/src/__tests__/e2e'], }; module.exports = createJestConfig(config); diff --git a/package.json b/package.json index 5abbe81..56d40d4 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "typecheck": "tsc --noEmit", "test": "jest", "test:watch": "jest --watchAll", + "e2e": "playwright test", + "e2e:ui": "playwright test --ui", "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache", "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache", "postbuild": "next-sitemap --config next-sitemap.config.js", diff --git a/playwright.config.ts b/playwright.config.ts index bfe3e83..1745d25 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -10,7 +10,7 @@ import { defineConfig, devices } from '@playwright/test'; * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ - testDir: './e2e', + testDir: './src/__tests__/e2e', /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ diff --git a/src/__tests__/e2e/home.spec.ts b/src/__tests__/e2e/home.spec.ts new file mode 100644 index 0000000..bf9f4d1 --- /dev/null +++ b/src/__tests__/e2e/home.spec.ts @@ -0,0 +1,7 @@ +import { expect, test } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('http://localhost:3000/'); + + await expect(page).toHaveTitle(/Next.js Starter/); +}); diff --git a/src/__tests__/home.test.tsx b/src/__tests__/unit/home.spec.tsx similarity index 100% rename from src/__tests__/home.test.tsx rename to src/__tests__/unit/home.spec.tsx From 87fd9e28814158de86bdbde5834ce5ede0ff3e97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:41:51 +0100 Subject: [PATCH 3/7] chore: update github actions --- .github/workflows/lint.yml | 8 +++++++- .github/workflows/playwright.yml | 27 --------------------------- 2 files changed, 7 insertions(+), 28 deletions(-) delete mode 100644 .github/workflows/playwright.yml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 94bb610..da13447 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -26,5 +26,11 @@ jobs: - name: Prettier run: npm run format:check - - name: Tests + - name: Unit tests run: npm run test + + - name: Install Playwright Browsers + run: npx playwright install --with-deps + + - name: e2e tests + run: npm run e2e diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml deleted file mode 100644 index 90b6b70..0000000 --- a/.github/workflows/playwright.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Playwright Tests -on: - push: - branches: [ main, master ] - pull_request: - branches: [ main, master ] -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 18 - - name: Install dependencies - run: npm ci - - name: Install Playwright Browsers - run: npx playwright install --with-deps - - name: Run Playwright tests - run: npx playwright test - - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 From 21f463d6ce00ff966f883bb5cbb35dc6c6c51f0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:44:34 +0100 Subject: [PATCH 4/7] Revert "chore: update github actions" This reverts commit 87fd9e28814158de86bdbde5834ce5ede0ff3e97. --- .github/workflows/lint.yml | 8 +------- .github/workflows/playwright.yml | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 .github/workflows/playwright.yml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index da13447..94bb610 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -26,11 +26,5 @@ jobs: - name: Prettier run: npm run format:check - - name: Unit tests + - name: Tests run: npm run test - - - name: Install Playwright Browsers - run: npx playwright install --with-deps - - - name: e2e tests - run: npm run e2e diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..90b6b70 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 From 7548ce327bc3cf5609ace6d1fab7714dd5a35b76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:52:35 +0100 Subject: [PATCH 5/7] chore: final touches --- playwright.config.ts | 10 ++++++++-- src/__tests__/e2e/home.spec.ts | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index 1745d25..71be79f 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -9,6 +9,13 @@ import { defineConfig, devices } from '@playwright/test'; /** * See https://playwright.dev/docs/test-configuration. */ + +// Use process.env.PORT by default and fallback to port 3000 +const PORT = process.env.PORT || 3000; + +// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port +const baseURL = `http://localhost:${PORT}`; + export default defineConfig({ testDir: './src/__tests__/e2e', /* Run tests in files in parallel */ @@ -24,8 +31,7 @@ export default defineConfig({ /* 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', - + baseURL, /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', }, diff --git a/src/__tests__/e2e/home.spec.ts b/src/__tests__/e2e/home.spec.ts index bf9f4d1..fa3328e 100644 --- a/src/__tests__/e2e/home.spec.ts +++ b/src/__tests__/e2e/home.spec.ts @@ -1,7 +1,7 @@ import { expect, test } from '@playwright/test'; test('has title', async ({ page }) => { - await page.goto('http://localhost:3000/'); + await page.goto('/'); await expect(page).toHaveTitle(/Next.js Starter/); }); From a7f15f408bb23a5d16b5669775f9477d0c5a4155 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:56:35 +0100 Subject: [PATCH 6/7] chore: change playwright github action config --- .github/workflows/playwright.yml | 40 +++++++++++++++++--------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 90b6b70..1d8612d 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -1,27 +1,29 @@ name: Playwright Tests on: push: - branches: [ main, master ] - pull_request: - branches: [ main, master ] + branches: + - main + - master + - develop + pull_request: null + workflow_dispatch: null jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 18 - - name: Install dependencies - run: npm ci - - name: Install Playwright Browsers - run: npx playwright install --with-deps - - name: Run Playwright tests - run: npx playwright test - - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 + - uses: actions/checkout@v4 + - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV + uses: actions/setup-node@v3 + - name: Install dependencies + run: yarn install --frozen-lockfile + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 From eeb4d06187a643267b75bf419dcf12645e813811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Tue, 30 Jan 2024 15:58:18 +0100 Subject: [PATCH 7/7] chore: remove playwright github action --- .github/workflows/playwright.yml | 29 ----------------------------- 1 file changed, 29 deletions(-) delete mode 100644 .github/workflows/playwright.yml diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml deleted file mode 100644 index 1d8612d..0000000 --- a/.github/workflows/playwright.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: Playwright Tests -on: - push: - branches: - - main - - master - - develop - pull_request: null - workflow_dispatch: null -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV - uses: actions/setup-node@v3 - - name: Install dependencies - run: yarn install --frozen-lockfile - - name: Install Playwright Browsers - run: yarn playwright install --with-deps - - name: Run Playwright tests - run: yarn playwright test - - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30