feat(playwright): sync test apps

Author: n05la3

packages/e2e-playwright/build.config.ts

@@ -25,6 +25,11 @@ export default defineBuildConfig({
     // as peerDependencies in package.json. 
     externals: ['@playwright/experimental-ct-vue', '@playwright/test'],
 
+    rollup: {
+        // Explicitly enable generating the CJS bundle.
+        emitCJS: true,
+    },
+
     // There is some strange warning about missing package.json. It doesn't affect the build however.
     // It is most likely a false positive. So for now, let's not fail the build on this warning.
     // See: https://github.com/unjs/unbuild/issues/268

packages/e2e-playwright/package.json

@@ -61,7 +61,7 @@
     "vite-plugin-istanbul": "^7.0.0"
   },
   "devDependenciesComments": {
-    "rimraf": "Requires node 20+, so let's not update it to continue supporting lower versions"
+    "rimraf": "Requires node 20 || >=22, so let's not update it to continue supporting lower versions"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
@@ -79,7 +79,12 @@
     "unbuild": "^3.5.0"
   },
   "peerDependencies": {
-    "@playwright/test": "^1.49.1",
-    "@playwright/experimental-ct-vue": "^1.50.0"
+    "@playwright/test": "^1.40.0",
+    "@playwright/experimental-ct-vue": "^1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "eslint-plugin-playwright": {
+      "optional": true
+    }
   }
 }

packages/e2e-playwright/src/index.js

@@ -25,10 +25,7 @@ export default async function (api) {
 
     api.extendViteConf((viteConf) => {
       viteConf.plugins.push(
-        istanbul({
-          forceBuildInstrument: api.ctx.prod,
-          requireEnv: true,
-        }),
+        istanbul({ forceBuildInstrument: api.ctx.prod, requireEnv: true }),
       );
     });
   }

packages/e2e-playwright/src/install.js

@@ -69,11 +69,11 @@ function getCompatibleDevDependencies(packageNames) {
   return devDependencies;
 }
 
+// eslint-plugin-playwright works well with both eslint v8 and eslint v9
 let extendPackageJson = {
   devDependencies: getCompatibleDevDependencies([
-    'eslint-plugin-playwright',
     '@playwright/test',
-    '@playwright/experimental-ct-vue',
+    'eslint-plugin-playwright',
   ]),
 };
 
@@ -144,8 +144,7 @@ export default async function (api) {
 
     let testEnvCommand = 'cross-env NODE_ENV=test';
     if (shouldEnableCodeCoverage) {
-      // With this we can set requireEnv in istanbul to true, and it if the user removes this flag
-      // then istanbul will not instrument the code
+      // We have set requireEnv in istanbul to true, so this is needed for instrumentation to work
       testEnvCommand += ' VITE_COVERAGE=true';
     }
 
@@ -163,6 +162,10 @@ export default async function (api) {
     if (shouldEnableCodeCoverage) {
       api.render('./templates/code-coverage');
 
+      // Let's add the playwright-ct-vue package to the devDependencies
+      extendPackageJson.devDependencies['@playwright/experimental-ct-vue'] =
+        aeDevDependencies['@playwright/experimental-ct-vue'];
+
       scripts.scripts['test'] += ` && ${packageManager} coverage-report`;
       scripts.scripts['coverage-report'] =
         'nyc report --reporter=html --reporter=text';
@@ -196,6 +199,18 @@ export default async function (api) {
     if (api.prompts.installBrowsers) {
       installPlaywrightBrowsers();
     }
+
+    if (api.prompts.enableCodeCoverage && api.hasWebpack) {
+      api.onExitLog(
+        "Playwright doesn't support code coverage for Webpack yet. Please use Vite CLI instead.",
+      );
+    }
+
+    if (await api.hasLint()) {
+      api.onExitLog(
+        'Check out https://github.com/quasarframework/quasar-testing/tree/dev/packages/e2e-playwright to see how to add proper Playwright linting configuration to your project.',
+      );
+    }
   } catch (error) {
     console.error('An error occurred while installing the extension:', error);
 

packages/e2e-playwright/src/utils/coverage.ts

@@ -10,7 +10,35 @@ function generateUUID() {
   return crypto.randomBytes(16).toString('hex');
 }
 
-export async function addCoverageToContext(context: BrowserContext, use: (r: BrowserContext) => Promise<void>) {
+/**
+ * Sets up and collects code coverage for the given Playwright browser context.
+ * Coverage collection is conditionally enabled based on the `VITE_COVERAGE` environment variable.
+ *
+ * The function performs the following steps when coverage is enabled:
+ * 1. Adds an initialization script to the browser context. This script runs before
+ * every page load within the context and attaches a 'beforeunload' event listener
+ * to the browser's `window`. This listener attempts to capture the `window.__coverage__`
+ * object (standard for Istanbul/v8 coverage) and send it back to Node.js
+ * via an exposed function before the page unloads.
+ * 2. Creates the output directory for coverage reports on the Node.js file system.
+ * 3. Exposes a Node.js function named `collectIstanbulCoverage` to the browser's `window` object.
+ * When this browser-side function is called (by the init script or later `page.evaluate` calls),
+ * the corresponding Node.js function executes, receiving the coverage JSON string
+ * and writing it to a unique JSON file in the designated output directory.
+ * 4. Executes the main test logic provided by the `use` function.
+ * 5. After the main test logic completes, it iterates through all pages currently open
+ * in the context and explicitly evaluates a script on each. This script manually
+ * calls the exposed `window.collectIstanbulCoverage` function to ensure any remaining
+ * coverage data from pages that didn't trigger 'beforeunload' (e.g., tests that
+ * finished without navigation or closing the page) is collected.
+ *
+ * @param context The Playwright browser context for which to collect coverage.
+ * @param use The Playwright test fixture's `use` function,
+ * which is called to execute the main test body with the configured context.
+ */
+
+// @link https://github.com/anishkny/playwright-test-coverage
+export async function addCoverageToContext(context: BrowserContext, use: (_: BrowserContext) => Promise<void>) {
   if (process.env.VITE_COVERAGE !== 'true') {
     // `requireEnv` of istanbul should also prevent instrumentation if this flag is not set. So even if 
     // we remove this check, the coverage will not be collected if the flag is not set.
@@ -47,7 +75,7 @@ export async function addCoverageToContext(context: BrowserContext, use: (r: Bro
 
   await use(context);
 
-  // Collect coverage from all pages after tests
+  // Goes through all browser pages in the page context and collects the coverage using the exposed function.
   for (const page of context.pages()) {
     await page.evaluate(
       () => {

test-project-playwright/playwright-ct.config.ts

@@ -2,6 +2,7 @@ import { defineConfig, devices, type PlaywrightTestConfig } from '@playwright/ex
 import vue from '@vitejs/plugin-vue';
 import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
 import istanbul from 'vite-plugin-istanbul';
+import { type PluginOption } from 'vite';
 // import { fileURLToPath } from 'node:url';
 // import AutoImport from 'unplugin-auto-import/vite';
 // import Components from 'unplugin-vue-components/vite';
@@ -75,7 +76,7 @@ export default defineConfig({
           checkProd: false,
           cypress: false,
         }),
-      ],
+      ] as PluginOption[],
     },
   },
 

test-vite-app-v1-vite4/.gitignore

@@ -34,3 +34,15 @@ yarn-error.log*
 
 .nyc_output
 coverage/
+
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report
+/playwright/.cache/
+
+
+# Coverage
+.nyc_output
+/coverage

test-vite-app-v1-vite4/.nycrc

@@ -1,3 +1,3 @@
-{
-  "extends": "@quasar/quasar-app-extension-testing-e2e-cypress/nyc-config-preset"
-}
+{
+    "extends": "@quasar/quasar-app-extension-testing-e2e-playwright/nyc-preset"
+}

test-vite-app-v1-vite4/package.json

@@ -11,18 +11,24 @@
     "invoke:cypress": "quasar ext invoke @quasar/testing-e2e-cypress && yarn format",
     "invoke:all": "yarn invoke:cypress",
     "sync:invoke:cypress": "yarn sync:cypress && yarn invoke:cypress",
+    "sync:playwright": "yarn --cwd ../packages/e2e-playwright build:local && yarn add -D ../packages/e2e-playwright",
+    "invoke:playwright": "quasar ext invoke @quasar/testing-e2e-playwright && yarn format",
+    "sync:invoke:playwright": "yarn sync:playwright && yarn invoke:playwright",
     "sync:invoke:all": "yarn sync:invoke:cypress",
     "test:cypress": "yarn test:e2e:ci && yarn test:component:ci",
     "test:all": "yarn test:cypress",
     "sync:invoke:test:cypress": "yarn sync:invoke:cypress && yarn test:cypress",
     "sync:invoke:test:all": "yarn sync:invoke:test:cypress",
     "lint": "eslint --ext .js,.ts,.vue ./",
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
-    "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
-    "test:e2e": "cross-env NODE_ENV=test start-test \"quasar dev\" http-get://127.0.0.1:8080 \"cypress open --e2e\"",
-    "test:e2e:ci": "cross-env NODE_ENV=test start-test \"quasar dev\" http-get://127.0.0.1:8080 \"cypress run --e2e\"",
-    "test:component": "cross-env NODE_ENV=test cypress open --component",
-    "test:component:ci": "cross-env NODE_ENV=test cypress run --component"
+    "test": "yarn test:clear && yarn test:component:ci && yarn test:e2e:ci && yarn coverage-report",
+    "test:e2e": "cross-env NODE_ENV=test VITE_COVERAGE=true playwright test --ui",
+    "test:e2e:ci": "cross-env NODE_ENV=test VITE_COVERAGE=true playwright test",
+    "test:component": "cross-env NODE_ENV=test VITE_COVERAGE=true playwright test -c playwright-ct.config.ts --ui",
+    "test:component:ci": "cross-env NODE_ENV=test VITE_COVERAGE=true playwright test -c playwright-ct.config.ts",
+    "test:clear": "rimraf .nyc_output coverage",
+    "test:report": "playwright show-report",
+    "coverage-report": "nyc report --reporter=html --reporter=text"
   },
   "dependencies": {
     "@quasar/extras": "^1.16.6",
@@ -40,6 +46,7 @@
     "@intlify/vite-plugin-vue-i18n": "^3.3.1",
     "@quasar/app-vite": "^1.7.1",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "../packages/e2e-cypress",
+    "@quasar/quasar-app-extension-testing-e2e-playwright": "../packages/e2e-playwright",
     "@types/node": "^18.17.15",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",
@@ -51,7 +58,10 @@
     "eslint-plugin-cypress": "^3.6.0",
     "eslint-plugin-vue": "^9.17.0",
     "prettier": "^3.0.3",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "@playwright/test": "^1.49.1",
+    "eslint-plugin-playwright": "^2.1.0",
+    "@playwright/experimental-ct-vue": "^1.50.0"
   },
   "resolutionsComments": {
     "vite": "See workaround https://github.com/quasarframework/quasar/issues/14077#issuecomment-1353213893, since Quasar Vite v1 only supports up to Vite 3",

test-vite-app-v1-vite4/playwright-ct.config.ts

@@ -0,0 +1,102 @@
+import {
+  defineConfig,
+  devices,
+  type PlaywrightTestConfig,
+} from '@playwright/experimental-ct-vue';
+import vue from '@vitejs/plugin-vue';
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
+import istanbul from 'vite-plugin-istanbul';
+import { type PluginOption } from 'vite';
+// import { fileURLToPath } from 'node:url';
+// import AutoImport from 'unplugin-auto-import/vite';
+// import Components from 'unplugin-vue-components/vite';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './src/components',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* 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: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+
+    ctViteConfig: {
+      build: {
+        sourcemap: true,
+      },
+      plugins: [
+        vue({ template: { transformAssetUrls } }),
+        // AutoImport({
+        //   imports: [
+        //     'vue',
+        //     'vue-router',
+        //     '@vueuse/head',
+        //     'pinia',
+        //     'quasar',
+        //     {
+        //       '@/store': ['useStore'],
+        //     },
+        //   ],
+        //   dts: 'src/auto-imports.d.ts',
+        //   eslintrc: {
+        //     enabled: true,
+        //   },
+        // }),
+        // Components({
+        //   dirs: ['src/components'],
+        //   extensions: ['vue'],
+        // }),
+        quasar({
+          // sassVariables: fileURLToPath(
+          //   new URL('./src/quasar-variables.sass', import.meta.url),
+          // ),
+        }),
+
+        // Instrument the code for nyc/istanbul code coverage
+        istanbul({
+          include: ['src/**/*'],
+          exclude: ['node_modules', 'test/', 'dist/', 'coverage/', '__tests__'],
+          extension: ['.js', '.ts', '.vue'],
+          requireEnv: true,
+          forceBuildInstrument: true,
+          checkProd: false,
+          cypress: false,
+        }),
+      ] as PluginOption[],
+    },
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+} as PlaywrightTestConfig);