Merge pull request #454 from debs-obrien/service-ci

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
+---

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",

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: '<loopback>'
+    }
+  }
+});