Merge pull request #1 from lethang7794/playwright

generate CV using Playwright

.github/workflows/astro.yml

@@ -10,6 +10,8 @@ on:
     branches: ["main"]
     tags:
       - "*"
+  pull_request:
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -106,8 +108,45 @@ jobs:
         with:
           path: ${{ env.BUILD_PATH }}/dist
 
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps chromium
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-result
+          path: playwright-result/
+          retention-days: 30
+
   release:
-    needs: build
+    needs: [build, test]
     runs-on: ubuntu-latest
     name: Release
     if: startsWith(github.ref, 'refs/tags/')
@@ -122,6 +161,13 @@ jobs:
           mkdir dist
           tar xf artifact.tar --directory=dist
           tar czf github-pages.tar.gz --directory=dist .
+      - uses: actions/download-artifact@v4
+        with:
+          name: playwright-result
+      - name: Extract downloaded CV artifact
+        run: |
+          mkdir dist
+          tar xf playwright-result.tar --directory=playwright-result-artifact
       - name: Get context
         run: |
           echo "DATE_AND_TIME=$(date +%Y.%m.%d-%H.%M)" >> $GITHUB_ENV
@@ -132,13 +178,16 @@ jobs:
         uses: softprops/action-gh-release@v2
         with:
           name: "${{ github.ref_name }} — ${{ env.DATE }}"
-          files: github-pages.tar.gz
+          files: |
+            github-pages.tar.gz
+            playwright-result-artifact/*
 
   deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
+    needs: release
+    if: startsWith(github.ref, 'refs/branches/main')
     runs-on: ubuntu-latest
     name: Deploy
     steps:

.gitignore

@@ -22,3 +22,10 @@ pnpm-debug.log*
 
 # local folders
 .history
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright-result/

e2e/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

e2e/generate-pdf.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect, type Page } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("http://localhost:4321");
+});
+
+test.describe("New CV", () => {
+	test("should generate pdf from astro page", async ({ page }) => {
+		// Generates a PDF with 'print' media type.
+		await page.emulateMedia({ media: "print" });
+		const pdfBuffer = await page.pdf({ path: "playwright-result/CV.pdf", format: "A4" });
+
+		// Verify that the PDF was generated
+		expect(pdfBuffer.length).toBeGreaterThan(0);
+		console.log("PDF successfully generated as CV.pdf");
+	});
+});

package.json

@@ -26,6 +26,8 @@
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/simple-icons": "^1.2.24",
     "@iconify-json/skill-icons": "^1.2.0",
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.4",
     "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
     "vite": "^6.1.0"

playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./e2e",
+	/* 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: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		// baseURL: 'http://127.0.0.1:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: "on-first-retry",
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop 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'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: "pnpm run dev",
+    port: 4321,
+		reuseExistingServer: !process.env.CI,
+	},
+});