From b74c06dce586d7226bc9fa384a9dd6a714f0bde2 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 20:46:19 +0530 Subject: [PATCH 01/10] install playwright dependencies packages --- package-lock.json | 77 ++++++++++++++++++++++++++++++++++++++++++++--- package.json | 2 ++ 2 files changed, 75 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6159898..2c0e1d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,10 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { + "@playwright/test": "^1.40.1", "@types/chai": "^4.3.6", "@types/mocha": "^10.0.2", + "@types/node": "^20.10.4", "@types/sinon": "^10.0.18", "@typescript-eslint/eslint-plugin": "^6.4.0", "@typescript-eslint/parser": "^6.4.0", @@ -1102,6 +1104,21 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "node_modules/@playwright/test": { + "version": "1.40.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz", + "integrity": "sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==", + "dev": true, + "dependencies": { + "playwright": "1.40.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@sinonjs/commons": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz", @@ -1204,11 +1221,13 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.8.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.0.tgz", - "integrity": "sha512-LzcWltT83s1bthcvjBmiBvGJiiUe84NWRHkw+ZV6Fr41z2FbIzvc815dk2nQ3RAKMuN2fkenM/z3Xv2QzEpYxQ==", + "version": "20.10.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", + "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", "dev": true, - "peer": true + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@types/semver": { "version": "7.5.0", @@ -10520,6 +10539,50 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.40.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz", + "integrity": "sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==", + "dev": true, + "dependencies": { + "playwright-core": "1.40.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.40.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz", + "integrity": "sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==", + "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/plugin-error": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", @@ -13648,6 +13711,12 @@ "node": ">= 0.10" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", diff --git a/package.json b/package.json index b7fda80..dbf5d02 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,10 @@ "author": "", "license": "ISC", "devDependencies": { + "@playwright/test": "^1.40.1", "@types/chai": "^4.3.6", "@types/mocha": "^10.0.2", + "@types/node": "^20.10.4", "@types/sinon": "^10.0.18", "@typescript-eslint/eslint-plugin": "^6.4.0", "@typescript-eslint/parser": "^6.4.0", From b878c1f7f055293817d49913874f94374d157020 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 20:46:50 +0530 Subject: [PATCH 02/10] update gitignore --- .gitignore | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 7c7751f..b5e1aee 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,8 @@ node_modules/ # Skip ignoring this file because it is required for GitHub Pages to work. # dist/ .nyc_output/ -coverage/ \ No newline at end of file +coverage/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ From 606a2ece5c57bff0431c0d8d3450a25e1f6b0d01 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 20:54:15 +0530 Subject: [PATCH 03/10] add setup instructions in readme file --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c2e596d..42debdc 100644 --- a/README.md +++ b/README.md @@ -29,3 +29,7 @@ A dialpad build using ts and scss - [sinon npm package](https://www.npmjs.com/package/sinon) - [sinon types npm package](https://www.npmjs.com/package/@types/sinon) + +## [Playwright Setup](https://github.com/satyam-seth/dialpad/pull/73) + +- [playwright installation doc link](https://playwright.dev/docs/intro#installing-playwright) From 20870ad5b56f9ce56f5dc860861c23a3cef7d580 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 20:59:12 +0530 Subject: [PATCH 04/10] add playwright config file --- playwright.config.ts | 81 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 playwright.config.ts diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..a5d7a7a --- /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(); + +/** + * 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', + video: '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: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}); From c473acfcf5787bf358de653890f4f47d144c2008 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 21:00:04 +0530 Subject: [PATCH 05/10] add a example e2e test --- e2e/example.spec.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 e2e/example.spec.ts diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts new file mode 100644 index 0000000..e9c646d --- /dev/null +++ b/e2e/example.spec.ts @@ -0,0 +1,8 @@ +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/); +}); From ea8e5dfbb5276b6d267e6c428bcc20c6eee20b48 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 21:01:15 +0530 Subject: [PATCH 06/10] add script in package.json to run playwright e2e tests --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index dbf5d02..3666a53 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "lint:fix": "eslint src/**/*.ts --fix", "lint-scss": "sass-lint src/**/*.scss", "test:unit": "mocha", + "test:e2e": "npx playwright test", "test:coverage": "nyc npm run test:unit" }, "keywords": [], From 841519763fef448f78ff64c011d715ce960e90da Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 21:02:01 +0530 Subject: [PATCH 07/10] add playwright gha workfklow file --- .github/workflows/playwright.yml | 35 ++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 .github/workflows/playwright.yml diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..8b097f3 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,35 @@ +name: Playwright E2E Tests + +on: + push: + branches: + - main + pull_request: + +jobs: + test: + name: 'Playright 👩🏽‍🚒 E2E 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 c360529433247e8cd56c965fcb190d79c6d79bbf Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 21:35:41 +0530 Subject: [PATCH 08/10] use http-server packages to run server for playwright test and update playwright config --- playwright.config.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index a5d7a7a..a7df245 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -27,9 +27,10 @@ export default defineConfig({ // 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', - video: 'on-first-retry', - screenshot: 'only-on-failure', + trace: 'on', + video: 'on', + screenshot: 'on', + headless: true, }, /* Configure projects for major browsers */ @@ -73,9 +74,10 @@ export default defineConfig({ ], /* 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, - // }, + webServer: { + command: 'npx http-server', + port: 8080, + timeout: 120000, // Maximum time (in milliseconds) to wait for the server to start + reuseExistingServer: !process.env.CI, + }, }); From 9c526af6d6b32260990dff4e24bfe45b2e542d59 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 21:37:07 +0530 Subject: [PATCH 09/10] disable import/no-extraneous-dependencies eslint warning --- e2e/example.spec.ts | 1 + playwright.config.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts index e9c646d..ae0ded5 100644 --- a/e2e/example.spec.ts +++ b/e2e/example.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { expect, test } from '@playwright/test'; test('has title', async ({ page }) => { diff --git a/playwright.config.ts b/playwright.config.ts index a7df245..62bdb7a 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/no-extraneous-dependencies import { defineConfig, devices } from '@playwright/test'; /** From 60e8fd59ba335f1bfa84468a32e7776b5d4d8c16 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Sun, 17 Dec 2023 21:39:08 +0530 Subject: [PATCH 10/10] add http-server npm package details in readme file --- .github/workflows/playwright.yml | 2 +- README.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 8b097f3..eca95f3 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -8,7 +8,7 @@ on: jobs: test: - name: 'Playright 👩🏽‍🚒 E2E Test 🚀' + name: 'Playwright 👩🏽‍🚒 E2E Test 🚀' timeout-minutes: 60 runs-on: ubuntu-latest diff --git a/README.md b/README.md index 42debdc..e354ef6 100644 --- a/README.md +++ b/README.md @@ -33,3 +33,4 @@ A dialpad build using ts and scss ## [Playwright Setup](https://github.com/satyam-seth/dialpad/pull/73) - [playwright installation doc link](https://playwright.dev/docs/intro#installing-playwright) +- [http-server npm package](https://www.npmjs.com/package/http-server)