feat: portfolio

.github/workflows/playwright.yml

@@ -1,27 +1,27 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
 jobs:
-  test:
+  playwright-tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: lts/*
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

tests/portfolio.spec.ts

@@ -0,0 +1,128 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Portfolio Website Tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("https://my-porfolio-best.vercel.app/");
+
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("should have correct title and header", async ({ page }) => {
+    await expect(page).toHaveTitle("Thet Myat Noe");
+    await expect(page.getByText("Hello! This is")).toBeVisible();
+    await expect(
+      page.getByText("Thet Myat Noe", { exact: true })
+    ).toBeVisible();
+    await expect(page.getByText("Senior Software Engineer")).toBeVisible();
+  });
+
+  test("should display contact information correctly", async ({ page }) => {
+    await expect(page.getByText("thetmyatnoe223@gmail.com")).toBeVisible();
+    await expect(page.getByText("+66 61 285 2597")).toBeVisible();
+    await expect(page.getByText("Bangkok, Thailand")).toBeVisible();
+  });
+
+  test("should have working social media links", async ({ page }) => {
+    const linkedinLink = page.getByRole("link", { name: /linkedin/i }).first();
+    await expect(linkedinLink).toHaveAttribute(
+      "href",
+      "https://www.linkedin.com/in/thet-myat-noe-14682b142/"
+    );
+
+    const twitterLink = page.getByRole("link", { name: /twitter/i }).first();
+    await expect(twitterLink).toHaveAttribute(
+      "href",
+      "https://twitter.com/ThetMyatNoe13"
+    );
+
+    const githubLink = page.getByRole("link", { name: /github/i }).first();
+    await expect(githubLink).toHaveAttribute(
+      "href",
+      "https://github.com/MrMyatNoe"
+    );
+
+    const facebookLink = page.getByRole("link", { name: /facebook/i }).first();
+    await expect(facebookLink).toHaveAttribute(
+      "href",
+      "https://www.facebook.com/thet.myatnoe.988"
+    );
+  });
+
+  test("should display all skill sections", async ({ page }) => {
+    // Frontend Development section
+    await expect(page.getByRole("heading", { name: "Frontend" })).toBeVisible();
+    await expect(page.getByText("Create Dynamic Apps")).toBeVisible();
+    await expect(page.getByText("From your mobile")).toBeVisible();
+    await expect(page.getByText("To a Big Screen")).toBeVisible();
+
+    // Backend Development section
+    await expect(
+      page.getByRole("heading", { name: "Backend" }).first()
+    ).toBeVisible();
+    await expect(page.getByText("Building and maintaining")).toBeVisible();
+    await expect(page.getByText("backend APIs, ranging from")).toBeVisible();
+    await expect(page.getByText("Public to Private")).toBeVisible();
+
+    // Mobile Development section
+    await expect(page.getByRole("heading", { name: "Mobile" })).toBeVisible();
+    await expect(page.getByText("Real-time mobile apps")).toBeVisible();
+    await expect(page.getByText("delivering user experiences")).toBeVisible();
+    await expect(page.getByText("using Flutter")).toBeVisible();
+  });
+
+  test("should display work experience section", async ({ page }) => {
+    // Current position
+    await expect(
+      page.getByText("Backend Developer at Allianz Technology Thailand")
+    ).toBeVisible();
+    await expect(page.getByText("July 2022 - Present")).toBeVisible();
+
+    // Skills tags verification for current position
+    const expectedSkills = [
+      "Backend",
+      "Java",
+      "Spring Boot",
+      "Rest API",
+      "Kafka",
+      "Unit Testing",
+      "Contract Testing",
+      "Playwright Testing",
+      "Github Actions",
+      "Microservices",
+      "Agile",
+      "Typescript",
+      "DevSecOps",
+      "Insurance",
+    ];
+
+    const currentPositionSection = page
+      .getByText("Backend Developer at Allianz Technology Thailand")
+      .locator("..");
+    for (const skill of expectedSkills) {
+      await expect(
+        currentPositionSection
+          .locator("span.chakra-badge")
+          .filter({ hasText: skill })
+          .first()
+      ).toBeVisible();
+    }
+
+    await expect(
+      page.getByText(
+        "Fullstack Developer, Product Owner, Designer for Mobile and Web"
+      )
+    ).toBeVisible();
+    await expect(
+      page.getByText("Freelance Frontend Developer at IHRP")
+    ).toBeVisible();
+    await expect(
+      page.getByText("Fullstack Developer at Nanyan Platform Myanmar")
+    ).toBeVisible();
+    await expect(
+      page.getByText("Fullstack Developer at MBC Software Development Myanmar")
+    ).toBeVisible();
+    await expect(
+      page.getByText("Junior Java Developer at FPT Software Myanmar")
+    ).toBeVisible();
+  });
+});