feat: integrate Playwright for end-to-end testing and update configuration files

Author: pavankjadda

.github/workflows/build.yml

@@ -37,13 +37,13 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
-          
+
       - name: Install dependencies
         run: pnpm i --frozen-lockfile
-      #      - name: E2E Tests
-      #        run: pnpm nx e2e
-      #        env:
-      #            CI: true
+            - name: E2E Tests
+              run: pnpm e2e
+              env:
+                  CI: true
       - name: Build
         run: pnpm run build
         env:

.gitignore

@@ -47,3 +47,4 @@ Thumbs.db
 .nx/cache
 .nx/workspace-data
 /.scannerwork/
+test-results

.vscode/launch.json

@@ -2,19 +2,19 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
+		{
+			"name": "Start App",
+			"type": "chrome",
+			"request": "attach",
+			"preLaunchTask": "npm: start",
+			"url": "http://localhost:4300"
+		},
+		{
+			"name": "ng test",
+			"type": "chrome",
+			"request": "launch",
+			"preLaunchTask": "npm: test",
+			"url": "http://localhost:9876/debug.html"
+		}
+	]
 }

playwright.config.ts

@@ -1,41 +1,40 @@
 import { devices, type PlaywrightTestConfig } from '@playwright/test';
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-	testDir: './playwright/e2e',
+	testDir: './projects/ng-kit-demo/e2e',
 	/* Maximum time one test can run for. */
 	timeout: 30000,
 	expect: {
 		/**
 		 * Maximum time expect() should wait for the condition to be met.
 		 * For example in `await expect(locator).toHaveText();`
 		 */
-		timeout: 30000,
+		timeout: 20000,
 	},
 	/* 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: 2,
+	/* Retry on CI twice */
+	retries: process.env['CI'] ? 1 : 0,
 	/* Opt out of parallel tests on CI. */
-	workers: process.env['CI'] ? 2 : 4,
+	workers: process.env['CI'] ? 3 : 4,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
-	reporter: process.env['CI'] ? 'dot' : 'list',
+	reporter: 'list',
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
-		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-		actionTimeout: 0,
 		/* Base URL to use in actions like `await page.goto('/')`. */
-		//baseURL: process.env.CI ? process.env.URL : 'http://localhost:4200',
 		baseURL: process.env['URL'],
+
+		/* set data-cy as test attribute */
+		testIdAttribute: 'data-cy',
+
+		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+		actionTimeout: 0,
+
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: 'on-first-retry',
 		screenshot: 'off',
@@ -44,62 +43,37 @@ const config: PlaywrightTestConfig = {
 
 	/* Configure projects for major browsers */
 	projects: [
+		{ name: 'setup', testMatch: /.*\.setup\.ts/ },
 		{
 			name: 'chromium',
-
-			/* Project-specific settings. */
 			use: {
 				...devices['Desktop Chrome'],
+				storageState: 'playwright/.auth/read-only-user.json',
 			},
+			dependencies: ['setup'],
+		},
+		{
+			name: 'firefox',
+			use: {
+				...devices['Desktop Firefox'],
+				storageState: 'playwright/.auth/read-only-user.json',
+			},
+			dependencies: ['setup'],
+		},
+		{
+			name: 'webkit',
+			use: {
+				...devices['Desktop Safari'],
+				storageState: 'playwright/.auth/read-only-user.json',
+			},
+			dependencies: ['setup'],
 		},
-		/* Test against branded browsers. */
-		// {
-		// 	name: 'Microsoft Edge',
-		// 	use: {
-		// 		channel: 'msedge',
-		// 	},
-		// },
-		// {
-		// 	name: 'Google Chrome',
-		// 	use: {
-		// 		channel: 'chrome',
-		// 	},
-		// },
-		// {
-		// 	name: 'firefox',
-		// 	use: {
-		// 		...devices['Desktop Firefox'],
-		// 	},
-		// },
-		// {
-		// 	name: 'webkit',
-		// 	use: {
-		// 		...devices['Desktop Safari'],
-		// 	},
-		// },
-		/* Test against mobile viewports. */
-		// {
-		// 	name: 'Mobile Chrome',
-		// 	use: {
-		// 		...devices['Pixel 5'],
-		// 	},
-		// },
-		// {
-		// 	name: 'Mobile Safari',
-		// 	use: {
-		// 		...devices['iPhone 12'],
-		// 	},
-		// },
 	],
 
-	/* Folder for test artifacts such as screenshots, videos, traces, etc. */
-	// outputDir: 'test-results/',
-
 	/* Run your local dev server before starting the tests */
-	// webServer: {
-	// 	command: 'npm run start',
-	// 	port: 4200,
-	// },
+	webServer: {
+		command: 'pnpm start',
+	},
 };
 
 export default config;