feat(playwright-ct): add playwright-ct config

.gitignore

@@ -61,4 +61,8 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-.nx/cache
+.nx/cache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

apps/qwik-app/src/components/demo-test/demo-test.spec.tsx

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { test, expect } from '../../../../../dist/packages/playwright-ct-qwik/';
+import { DemoTest } from './demo-test';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should work', async ({ mount }) => {
+  const component = await mount(<DemoTest />);
+  await expect(component).toContainText('Hello from playwright-ct-qwik');
+});

apps/qwik-app/src/components/demo-test/demo-test.tsx

@@ -0,0 +1,6 @@
+import { component$ } from "@builder.io/qwik";
+
+export const DemoTest = component$(() => {
+    return (<div>Hello from playwright-ct-qwik</div>)
+})
+

package.json

@@ -10,7 +10,8 @@
     "build": "nx build playwright-ct-qwik",
     "commit": "git-cz",
     "format:fix": "pretty-quick --staged",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "devDependencies": {
     "@builder.io/qwik": "1.4.2",
@@ -19,11 +20,11 @@
     "@commitlint/config-angular": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@jscutlery/semver": "^3.0.0",
-    "@nx/workspace": "17.2.8",
-    "@nx/vite": "17.2.8",
-    "@nx/js": "17.2.8",
-    "@nx/eslint-plugin": "17.2.8",
     "@nx/eslint": "17.2.8",
+    "@nx/eslint-plugin": "17.2.8",
+    "@nx/js": "17.2.8",
+    "@nx/vite": "17.2.8",
+    "@nx/workspace": "17.2.8",
     "@playwright/experimental-ct-core": "1.42.0-alpha-jan-18-2024",
     "@playwright/test": "1.41.1",
     "@types/eslint": "8.56.2",
@@ -62,6 +63,5 @@
     "qwik",
     "playwright",
     "component testing"
-  ],
-  "dependencies": {}
+  ]
 }

packages/playwright-ct-qwik/tsconfig.json

@@ -10,16 +10,17 @@
     "allowSyntheticDefaultImports": true,
     "noFallthroughCasesInSwitch": true,
     "jsxImportSource": "@builder.io/qwik",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
   },
   "files": [],
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.lib.json",
     },
     {
-      "path": "./tsconfig.definition.json"
-    }
-  ]
+      "path": "./tsconfig.definition.json",
+    },
+  ],
 }

playwright-ct.config.ts

@@ -0,0 +1,48 @@
+
+// @ts-ignore
+import { defineConfig, devices } from './dist/packages/playwright-ct-qwik'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './',
+  /* 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,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});

playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

playwright/index.tsx

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';

tsconfig.base.json

@@ -14,6 +14,7 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
+    "esModuleInterop": true,
     "paths": {
       "playwright-ct-qwik": ["packages/playwright-ct-qwik/src/index.ts"]
     }