From 37dce9e2643a278f6f05460de3b2481fc11df6ab Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Fri, 20 Oct 2023 10:50:28 +0200 Subject: [PATCH 1/4] ci: run tests on service --- ...to-end-testing-with-playwright-viteconf.md | 8 ++ package-lock.json | 80 ++++++++++++------- package.json | 3 +- playwright.service.config.ts | 59 ++++++++++++++ 4 files changed, 122 insertions(+), 28 deletions(-) create mode 100644 content/videos/end-to-end-testing-with-playwright-viteconf.md create mode 100644 playwright.service.config.ts diff --git a/content/videos/end-to-end-testing-with-playwright-viteconf.md b/content/videos/end-to-end-testing-with-playwright-viteconf.md new file mode 100644 index 00000000..7f3de167 --- /dev/null +++ b/content/videos/end-to-end-testing-with-playwright-viteconf.md @@ -0,0 +1,8 @@ +--- +title: End to End Testing with Playwright +date: 2023-10-06 +description: Lets’ take a look at how to test across iframes and different browser contexts by testing the user flow of the Stackblitz website, setting up a Vite project in Stackblitz, modifying the code and sharing it so others can open and interact with it. Let’s get testing. +video: kqJSrSU9DPY +tags: [conference-talk, playwright, testing] +host: Vite Conf +--- diff --git a/package-lock.json b/package-lock.json index a8cb29e9..6bbf64e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,9 @@ "@nuxtjs/color-mode": "^3.2.0", "@nuxtjs/robots": "^3.0.0", "@nuxtjs/tailwindcss": "^6.4.1", - "@playwright/test": "^1.37.0", + "@playwright/test": "^1.39.0", "@tailwindcss/typography": "^0.5.9", + "dotenv": "^16.3.1", "eslint": "^8.35.0", "husky": "^8.0.3", "lint-staged": "^13.1.2", @@ -2457,22 +2458,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz", - "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", + "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", "dev": true, "dependencies": { - "@types/node": "*", - "playwright-core": "1.37.0" + "playwright": "1.39.0" }, "bin": { "playwright": "cli.js" }, "engines": { "node": ">=16" - }, - "optionalDependencies": { - "fsevents": "2.3.2" } }, "node_modules/@rollup/plugin-alias": { @@ -5834,12 +5831,15 @@ } }, "node_modules/dotenv": { - "version": "16.0.3", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", - "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", "dev": true, "engines": { "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" } }, "node_modules/duplexer": { @@ -12314,10 +12314,28 @@ "pathe": "^1.1.0" } }, + "node_modules/playwright": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", + "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "dev": true, + "dependencies": { + "playwright-core": "1.39.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, "node_modules/playwright-core": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz", - "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -19126,14 +19144,12 @@ "optional": true }, "@playwright/test": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz", - "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", + "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", "dev": true, "requires": { - "@types/node": "*", - "fsevents": "2.3.2", - "playwright-core": "1.37.0" + "playwright": "1.39.0" } }, "@rollup/plugin-alias": { @@ -21675,9 +21691,9 @@ } }, "dotenv": { - "version": "16.0.3", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", - "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", "dev": true }, "duplexer": { @@ -26449,10 +26465,20 @@ "pathe": "^1.1.0" } }, + "playwright": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", + "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "dev": true, + "requires": { + "fsevents": "2.3.2", + "playwright-core": "1.39.0" + } + }, "playwright-core": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz", - "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", "dev": true }, "pluralize": { diff --git a/package.json b/package.json index ad6d2267..d69b436c 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,9 @@ "@nuxtjs/color-mode": "^3.2.0", "@nuxtjs/robots": "^3.0.0", "@nuxtjs/tailwindcss": "^6.4.1", - "@playwright/test": "^1.37.0", + "@playwright/test": "^1.39.0", "@tailwindcss/typography": "^0.5.9", + "dotenv": "^16.3.1", "eslint": "^8.35.0", "husky": "^8.0.3", "lint-staged": "^13.1.2", diff --git a/playwright.service.config.ts b/playwright.service.config.ts new file mode 100644 index 00000000..9538a8df --- /dev/null +++ b/playwright.service.config.ts @@ -0,0 +1,59 @@ +/* +* This file enables Playwright client to connect to remote browsers. +* It should be placed in the same directory as playwright.config.ts. +* The file is temporary for private preview. +*/ + +import { defineConfig } from '@playwright/test'; +import config from './playwright.config'; +import dotenv from 'dotenv'; + +// Define environment on the dev box in .env file: +// .env: +// PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX +// PLAYWRIGHT_SERVICE_URL=XXX + +// Define environment in your GitHub workflow spec. +// env: +// PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} +// PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} +// PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }} + +dotenv.config(); + +// Name the test run if it's not named yet. +process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString(); + +// Can be 'linux' or 'windows'. +const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux'; + +export default defineConfig(config, { + // Define more generous timeout for the service operation if necessary. + // timeout: 60000, + // expect: { + // timeout: 10000, + // }, + workers: 20, + + // Enable screenshot testing and configure directory with expectations. + // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons + ignoreSnapshots: false, + snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`, + + use: { + // Specify the service endpoint. + connectOptions: { + wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({ + // Can be 'linux' or 'windows'. + os, + runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID + })}`, + timeout: 30000, + headers: { + 'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN! + }, + // Allow service to access the localhost. + exposeNetwork: '' + } + } +}); From 7c9c49e4a36f86d492853c66230cf4a8e6827923 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Fri, 20 Oct 2023 10:58:00 +0200 Subject: [PATCH 2/4] update workflow --- .github/workflows/playwright.yml | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 3b863920..f0071902 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -18,12 +18,20 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - name: Install dependencies + working-directory: ./ run: npm ci - name: Install Playwright browsers run: npx playwright install --with-deps - name: Run Playwright tests - run: npx playwright test --shard ${{ matrix.shard }} + working-directory: ./ + env: + # Access token and regional endpoint for Microsoft Playwright Testing + PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} + PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} + PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }} + run: npx playwright test -c playwright.service.config.ts --workers=20 + # run: npx playwright test --shard ${{ matrix.shard }} - name: Upload blob report to GitHub Actions Artifacts if: always() From d58f5272b3a5f5f04e6713e05daf02b4ad0510ee Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Fri, 20 Oct 2023 11:06:51 +0200 Subject: [PATCH 3/4] revert to sharding --- .github/workflows/playwright.yml | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index f0071902..95b29731 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -18,20 +18,13 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - name: Install dependencies - working-directory: ./ + working-directory: path/to/playwright/folder # update accordingly run: npm ci - name: Install Playwright browsers run: npx playwright install --with-deps - name: Run Playwright tests - working-directory: ./ - env: - # Access token and regional endpoint for Microsoft Playwright Testing - PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} - PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} - PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }} - run: npx playwright test -c playwright.service.config.ts --workers=20 - # run: npx playwright test --shard ${{ matrix.shard }} + run: npx playwright test --shard ${{ matrix.shard }} - name: Upload blob report to GitHub Actions Artifacts if: always() From 3c6afd2e3e12fa372d0fa03cf806120840c6c171 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Fri, 20 Oct 2023 11:11:35 +0200 Subject: [PATCH 4/4] remove working directory --- .github/workflows/playwright.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 95b29731..3b863920 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -18,7 +18,6 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - name: Install dependencies - working-directory: path/to/playwright/folder # update accordingly run: npm ci - name: Install Playwright browsers run: npx playwright install --with-deps