From 69bae590e51b891f2b492d0f3f0371334e20eafd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Carden=CC=83a?= <35935591+luisecm@users.noreply.github.com> Date: Tue, 21 May 2024 19:24:25 -0600 Subject: [PATCH 1/3] chore(playwright): draft to test playwright framework --- .gitignore | 6 ++- package-lock.json | 65 ++++++++++++++++++++++++++++++-- package.json | 5 ++- playwright.config.ts | 77 ++++++++++++++++++++++++++++++++++++++ playwright/example.spec.ts | 28 ++++++++++++++ 5 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 playwright.config.ts create mode 100644 playwright/example.spec.ts diff --git a/.gitignore b/.gitignore index 6c9c5367..45773092 100644 --- a/.gitignore +++ b/.gitignore @@ -78,4 +78,8 @@ $RECYCLE.BIN/ # Cypress Assets cypress/screenshots/ -cypress/videos/ \ No newline at end of file +cypress/videos/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/package-lock.json b/package-lock.json index bba1c4ba..9bc7702c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "1.0.0", "license": "MIT", "devDependencies": { + "@playwright/test": "^1.44.0", + "@types/node": "^20.12.12", "cypress": "^13.9.0", "prettier": "3.2.5", "typescript": "^5.4.5" @@ -72,12 +74,26 @@ "ms": "^2.1.1" } }, + "node_modules/@playwright/test": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", + "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", + "dev": true, + "dependencies": { + "playwright": "1.44.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@types/node": { "version": "20.12.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", "dev": true, - "optional": true, "dependencies": { "undici-types": "~5.26.4" } @@ -870,6 +886,20 @@ "node": ">=10" } }, + "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/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -1496,6 +1526,36 @@ "node": ">=0.10.0" } }, + "node_modules/playwright": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", + "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", + "dev": true, + "dependencies": { + "playwright-core": "1.44.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", + "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/prettier": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", @@ -1926,8 +1986,7 @@ "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, - "optional": true + "dev": true }, "node_modules/universalify": { "version": "2.0.1", diff --git a/package.json b/package.json index 3fee9c0f..c12f4a58 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,11 @@ "author": "Luis Cardeña <35935591+luisecm@users.noreply.github.com>", "license": "MIT", "devDependencies": { + "@playwright/test": "^1.44.0", + "@types/node": "^20.12.12", "cypress": "^13.9.0", "prettier": "3.2.5", "typescript": "^5.4.5" - } + }, + "scripts": {} } diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..196b2679 --- /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: "./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: "http://localhost:5173/", + + /* 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, + // }, +}); diff --git a/playwright/example.spec.ts b/playwright/example.spec.ts new file mode 100644 index 00000000..a641402c --- /dev/null +++ b/playwright/example.spec.ts @@ -0,0 +1,28 @@ +import { test, expect } from "@playwright/test"; + +test.describe("Pin Tests", () => { + test.beforeEach(async ({ page }) => { + // Navigate to main page + await page.goto("/"); + }); + + test("Has correct URL redirected", async ({ page }) => { + // Expect a title "to contain" a substring. + await expect(page).toHaveURL("auth/unlock"); + }); + + test("Enter valid PIN", async ({ page }) => { + // Enter a valid pin to continue + await page.getByTestId("button-pin-1").click(); + await page.getByTestId("button-pin-2").click(); + await page.getByTestId("button-pin-3").click(); + await page.getByTestId("button-pin-4").click(); + await page.getByTestId("button-confirm-pin").click(); + + // Expect a title "to contain" a substring. + await expect(page).toHaveURL("pre"); + + // Expect a title "to contain" a substring. + await expect(page).toHaveURL("chat"); + }); +}); From 6641eee74887c91aad605cf1c13993d696221e2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Carden=CC=83a?= <35935591+luisecm@users.noreply.github.com> Date: Wed, 29 May 2024 09:37:47 -0600 Subject: [PATCH 2/3] chore(packages): fix package lock and package json --- package-lock.json | 39 ++++++++++++++++++++++++++++----------- package.json | 1 + 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d82c87c..5afd7663 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "devDependencies": { + "@faker-js/faker": "^8.4.1", "@playwright/test": "^1.44.0", "@types/node": "^20.12.12", "cypress": "^13.9.0", @@ -75,13 +76,29 @@ "ms": "^2.1.1" } }, + "node_modules/@faker-js/faker": { + "version": "8.4.1", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.4.1.tgz", + "integrity": "sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/fakerjs" + } + ], + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0", + "npm": ">=6.14.13" + } + }, "node_modules/@playwright/test": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", - "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz", + "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==", "dev": true, "dependencies": { - "playwright": "1.44.0" + "playwright": "1.44.1" }, "bin": { "playwright": "cli.js" @@ -1537,12 +1554,12 @@ } }, "node_modules/playwright": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", - "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz", + "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==", "dev": true, "dependencies": { - "playwright-core": "1.44.0" + "playwright-core": "1.44.1" }, "bin": { "playwright": "cli.js" @@ -1555,9 +1572,9 @@ } }, "node_modules/playwright-core": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", - "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz", + "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==", "dev": true, "bin": { "playwright-core": "cli.js" diff --git a/package.json b/package.json index 698dc073..da9f29b2 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "author": "Luis Cardeña <35935591+luisecm@users.noreply.github.com>", "license": "MIT", "devDependencies": { + "@faker-js/faker": "^8.4.1", "@playwright/test": "^1.44.0", "@types/node": "^20.12.12", "cypress": "^13.9.0", From 282ccb2b3d0904ac7b42586f14df2e66da22ab25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Carden=CC=83a?= <35935591+luisecm@users.noreply.github.com> Date: Thu, 13 Jun 2024 16:12:16 -0600 Subject: [PATCH 3/3] chore(playwright): add basic setup of playwright in repo --- .github/workflows/playwright.yml | 24 ++++++++++++++++++++++++ .gitignore | 6 ++++++ package-lock.json | 17 ++++++++++------- package.json | 7 ++++--- 4 files changed, 44 insertions(+), 10 deletions(-) create mode 100644 .github/workflows/playwright.yml diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..0c00c09d --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,24 @@ +name: Playwright Tests +on: + workflow_dispatch: +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - 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@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 39a39fa7..43c29a7b 100644 --- a/.gitignore +++ b/.gitignore @@ -81,6 +81,12 @@ cypress/downloads/ cypress/screenshots/ cypress/videos/ /test-results/ + +# Playwright Assets +/playwright-report/ +/blob-report/ +/playwright/.cache/ +/test-results/ /playwright-report/ /blob-report/ /playwright/.cache/ diff --git a/package-lock.json b/package-lock.json index dc5efa40..4b1332f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,12 +8,12 @@ "name": "automated-tests-web", "version": "1.0.0", "license": "MIT", - "dependencies": { - "cypress-clipboard": "^1.0.3" - }, "devDependencies": { "@faker-js/faker": "^8.4.1", + "@playwright/test": "^1.44.1", + "@types/node": "^20.14.2", "cypress": "^13.11.0", + "cypress-clipboard": "^1.0.3", "cypress-real-events": "^1.12.0", "prettier": "3.2.5", "typescript": "^5.4.5" @@ -109,9 +109,9 @@ } }, "node_modules/@types/node": { - "version": "20.12.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", - "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", + "version": "20.14.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz", + "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -621,6 +621,7 @@ "version": "1.4.34", "resolved": "https://registry.npmjs.org/cypress-cdp/-/cypress-cdp-1.4.34.tgz", "integrity": "sha512-C+SpT7aC3JzIJITqXPbcNIUSIcN4v8ksvpZPjIrlpkf0iA0PX9qh7xoQDwnB750r0hDyAb4dyb7CSgQj1SUnbQ==", + "dev": true, "dependencies": { "devtools-protocol": "^0.0.1308459" } @@ -629,6 +630,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/cypress-clipboard/-/cypress-clipboard-1.0.3.tgz", "integrity": "sha512-y/UGSq1RUMTs/1UJvs60yz1+2pjwTKz66zr3qV5pslg3IDGlANAjKk/uIOlzUquUwKpyb0ICbN18eXYORO9J8Q==", + "dev": true, "dependencies": { "cypress-cdp": "^1.3.0" } @@ -706,7 +708,8 @@ "node_modules/devtools-protocol": { "version": "0.0.1308459", "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1308459.tgz", - "integrity": "sha512-+Pux6vzaUnioFi9ZygixOoBgltLjzb1/nbAwzecXgv1/FMF2ZdnYgmBIFSm4q4u6ykCdHngojnJN8cji4eGzTA==" + "integrity": "sha512-+Pux6vzaUnioFi9ZygixOoBgltLjzb1/nbAwzecXgv1/FMF2ZdnYgmBIFSm4q4u6ykCdHngojnJN8cji4eGzTA==", + "dev": true }, "node_modules/ecc-jsbn": { "version": "0.1.2", diff --git a/package.json b/package.json index 81bde49a..6e65c3e2 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,13 @@ "license": "MIT", "devDependencies": { "@faker-js/faker": "^8.4.1", + "@playwright/test": "^1.44.1", + "@types/node": "^20.14.2", "cypress": "^13.11.0", + "cypress-clipboard": "^1.0.3", "cypress-real-events": "^1.12.0", "prettier": "3.2.5", "typescript": "^5.4.5" }, - "dependencies": { - "cypress-clipboard": "^1.0.3" - } + "scripts": {} }