feat(tests): adding playwright w/ nx v17

Author: thejackshelton

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ms-playwright.playwright"]
+}

apps/website/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": [
+    "plugin:playwright/recommended",
     "../../.eslintrc.json",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -28,6 +29,10 @@
     {
       "files": ["*.js", "*.jsx"],
       "rules": {}
+    },
+    {
+      "files": ["e2e/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
     }
   ]
 }

apps/website/e2e/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect h1 to contain a substring.
+  expect(await page.locator('h1').innerText()).toContain('Qwik UI');
+});

apps/website/playwright.config.ts

@@ -0,0 +1,70 @@
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig, devices } from '@playwright/test';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:5173';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+    // timeout: 120000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});

apps/website/project.json

@@ -88,6 +88,13 @@
       "options": {
         "command": "npx nx run website:build:production"
       }
+    },
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/apps/website"],
+      "options": {
+        "config": "apps/website/playwright.config.ts"
+      }
     }
   },
   "tags": []

package.json

@@ -61,6 +61,7 @@
     "@nx/vite": "17.1.3",
     "@nx/workspace": "17.1.3",
     "@oddbird/popover-polyfill": "0.3.7",
+    "@playwright/test": "^1.36.0",
     "@storybook/addon-a11y": "7.6.0",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-essentials": "7.6.0",
@@ -103,6 +104,7 @@
     "eslint": "^8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-playwright": "^0.15.3",
     "eslint-plugin-qwik": "^1.4.0",
     "eslint-plugin-storybook": "^0.6.13",
     "focus-trap": "7.5.3",
@@ -160,5 +162,6 @@
   ],
   "nx": {
     "includedScripts": []
-  }
+  },
+  "dependencies": {}
 }