feat(tools): add visual regression testing with playwright and more

- Introduced visual regression tests for the home page, header, and log-in page using Playwright.
- Configured snapshot path template in `playwright.config.ts`.
- Updated `pre-push` hook to include `npm audit`.
- Added `serve` package and removed deprecated `http-serve`.
- Updated scripts in `package.json` to support snapshot updates

Author: Ismaestro

.husky/pre-push

@@ -1 +1 @@
-npm run knip && npm run lint && npm run test:coverage
+npm run knip && npm audit && npm run lint && npm run test:coverage

e2e/fixtures/base.fixture.ts

@@ -6,3 +6,5 @@ type AppFixtures = {
 };
 
 export const test = base.extend<AppFixtures>({});
+
+export { expect } from '@playwright/test';

e2e/tests/snapshots/header-component.png

@@ -0,0 +1,38 @@
+import { expect, test } from '../fixtures/base.fixture';
+import { HomePage } from '../pages/home.po';
+
+test.describe('Visual Regression Testing', () => {
+  let home: HomePage;
+
+  test.beforeEach(async ({ page }) => {
+    home = new HomePage(page);
+    await home.goto();
+  });
+
+  test('home page should match snapshot', async ({ page }) => {
+    await home.expectLoaded();
+
+    await page.waitForTimeout(1000);
+
+    await expect(page).toHaveScreenshot('home-page.png', {
+      fullPage: true,
+      mask: [],
+    });
+  });
+
+  test('header should match snapshot', async ({ page }) => {
+    await home.expectLoaded();
+
+    const header = page.locator('app-header');
+    await expect(header).toHaveScreenshot('header-component.png');
+  });
+
+  test('log-in page should match snapshot', async ({ page }) => {
+    await home.header.signInLink.click();
+    await page.waitForURL('**/auth/log-in');
+
+    await expect(page.locator('form')).toBeVisible();
+
+    await expect(page).toHaveScreenshot('log-in-page.png', { fullPage: true });
+  });
+});