test: refactor generated tests using playwright-cli 🎭

Author: timdeschryver

.gitignore

@@ -8,7 +8,6 @@ obj/
 *.cache
 packages/
 .vs/
-TestResults/
 CoverageReport/
 
 # Angular
@@ -23,6 +22,10 @@ yarn-error.log
 # Vitest
 __screenshots__/
 
+# Playwright
+test-results/
+.playwright-cli/
+
 # IDE
 # JetBrains
 .idea/

Sandbox.AngularWorkspace/projects/sandbox-app/src/styles.css

@@ -1,10 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 @import 'tailwindcss';
 
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
 @theme {
-	/* Professional Font Stack */
-	--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	--font-family-sans:
+		'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
 	--color-primary-50: #f8fafc;
 	--color-primary-100: #f1f5f9;

Sandbox.EndToEndTests/playwright.config.ts

@@ -37,15 +37,27 @@ export default defineConfig({
 			teardown: 'teardown',
 		},
 		{
-			name: 'chromium',
+			name: 'chromium-authenticated',
+			testIgnore: '**/*unauthenticated*.test.ts',
 			use: { ...devices['Desktop Chrome'], storageState: '.state/auth-state.json' },
 			dependencies: ['setup'],
 		},
 		{
-			name: 'firefox',
+			name: 'firefox-authenticated',
+			testIgnore: '**/*unauthenticated*.test.ts',
 			use: { ...devices['Desktop Firefox'], storageState: '.state/auth-state.json' },
 			dependencies: ['setup'],
 		},
+		{
+			name: 'chromium-unauthenticated',
+			testMatch: '**/*unauthenticated*.test.ts',
+			use: { ...devices['Desktop Chrome'] },
+		},
+		{
+			name: 'firefox-unauthenticated',
+			testMatch: '**/*unauthenticated*.test.ts',
+			use: { ...devices['Desktop Firefox'] },
+		},
 		{
 			name: 'teardown',
 			testDir: './setup',

Sandbox.EndToEndTests/setup/auth.setup.ts

@@ -24,7 +24,7 @@ test('authenticate user', async ({ page }) => {
 	await passwordInput.fill(config.password);
 	await passwordInput.press('Enter');
 
-	await expect(page.getByText(new RegExp(`👋 ${config.username}`, 'i'))).toBeVisible();
+	await expect(page.getByText(new RegExp(`${config.username}`, 'i'))).toBeVisible();
 	await page.context().storageState({ path: storageState });
 });