Merge pull request #398 from w3bdesign/playwright

Playwright E2E tests

.github/workflows/playwright.yml

@@ -0,0 +1,38 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 9
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'pnpm'
+    - name: Install dependencies
+      run: pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps chromium firefox
+    - name: Build the project
+      run: pnpm build
+    - name: Start the application
+      run: pnpm start &
+    - name: Wait for the application to be ready
+      run: |
+        npx wait-on http://localhost:3000
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -57,3 +57,5 @@ next-env.d.ts
 /playwright-report/
 /playwright/.cache/
 screenshot.png
+node_modules/
+/blob-report/

package.json

@@ -26,6 +26,7 @@
     "@sanity/image-url": "^1.0.2",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
+    "cookie": ">=0.7.1",
     "framer-motion": "^11.11.1",
     "jest": "^29.7.0",
     "next": "14.2.14",
@@ -40,11 +41,11 @@
     "sanity": "^3.59.1",
     "sitemap": "^8.0.0",
     "ts-node": "^10.9.2",
-    "zod": "^3.23.8",
-    "cookie": ">=0.7.1"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@ladle/react": "^4.1.1",
+    "@playwright/test": "^1.47.2",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -62,6 +63,7 @@
     "prettier": "3.3.3",
     "tailwindcss": "^3.4.13",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "wait-on": "^7.2.0"
   }
 }

playwright.config.ts

@@ -0,0 +1,77 @@
+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: "./playwright",
+  /* 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",
+    //baseURL: 'https://www.dfweb.no',
+
+    /* 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"] },
+    },
+
+    /* 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: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

playwright/cv.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("CV page", () => {
+  test("loads and displays main content correctly", async ({ page }) => {
+    await page.goto("/cv");
+
+    // Check if 'Nøkkelkvalifikasjoner' tab is visible
+    await expect(
+      page.getByRole("tab", { name: "Nøkkelkvalifikasjoner" })
+    ).toBeVisible();
+  });
+
+  test("navigates to and displays Experience section correctly", async ({
+    page,
+  }) => {
+    await page.goto("/cv");
+
+    // Click on 'Erfaring' tab
+    await page.getByRole("tab", { name: "Erfaring" }).click();
+
+    // Check if a specific experience entry is visible
+    await expect(
+      page.getByRole("heading", { name: "– 2021 - NovaCare" })
+    ).toBeVisible();
+  });
+
+  test("displays Education section correctly", async ({ page }) => {
+    await page.goto("/cv");
+
+    // Click on 'Erfaring' tab
+    await page.getByRole("tab", { name: "Utdanning" }).click();
+
+    // Check if education information is present
+    await expect(page.getByLabel("Utdanning")).toContainText(
+      "2019 – 2023 - Kompetanseheving / egenlæring frontendutvikling"
+    );
+  });
+});

playwright/index.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Home page", () => {
+  test("loads and displays main content correctly", async ({ page }) => {
+    await page.goto("/");
+
+    // Check main heading
+    await expect(page.locator("h1")).toContainText("Hei!");
+    await expect(page.getByRole("heading", { name: "Hei!" })).toBeVisible();
+
+    // Check subheading
+    await expect(page.getByTestId("fadeup").getByRole("heading")).toContainText(
+      "Jeg heter Daniel Fjeldstad og er en webutvikler."
+    );
+    await expect(
+      page.getByRole("heading", { name: "Jeg heter Daniel Fjeldstad og" })
+    ).toBeVisible();
+
+    // Check skills text
+    await expect(page.getByText("Jeg kan PHP, Wordpress,")).toBeVisible();
+
+    // Check if icons are visible
+    await expect(page.getByTestId("icons")).toBeVisible();
+  });
+
+  test("displays 'Om Meg' section correctly", async ({ page }) => {
+    await page.goto("/");
+
+    const omMegSection = page.getByLabel("Om Meg");
+
+    // Check section title
+    await expect(omMegSection.getByTestId("sanity-title")).toContainText("Om Meg");
+
+    // Check section content
+    await expect(omMegSection.getByTestId("bounceinscroll")).toContainText(
+      "I over 20 år har jeg hatt en lidenskap for webutvikling og design, og ser i dag på meg selv som en dedikert senior frontendutvikler.Jeg har jobbet mye med WordPress og WooCommerce, hvor jeg siden 2011 har levert kvalitetsarbeid som frilanser på Fiverr, og har oppnådd 100% positive tilbakemeldinger.Språk som moderne Javascript (ES6+) og Typescript, og populære rammeverk som React, Vue 2/3, Next.js og Sveltekit er noe jeg bruker hver dag. Jeg har også erfaring med PHP, mySQL, GraphQL, Docker, Storybook, Sanity.io, Jest, Cypress, Python og Bootstrap."
+    );
+  });
+
+  test("displays 'Prosjekter' section correctly", async ({ page }) => {
+    await page.goto("/");
+
+    const prosjekterSection = page.getByLabel("Prosjekter");
+
+    // Check section content
+    await expect(prosjekterSection.getByTestId("bounceinscroll")).toContainText(
+      "Jeg har de siste årene hatt mye fokus på AI i form av bruk av og programmering av ulike AI verktøy, boter og applikasjoner. Jeg er også svært aktiv i flere AI miljøer på Discord hvor jeg er administrator på flere servere med totalt over 500 medlemmer, og opererer også som teknisk ansvarlig og utvikler av AI boter og verktøy som brukes på serverne. Holder også på mye med utvikling på GITHUB på hobbybasis, hvor jeg kan skilte med å være Norges mest aktive utvikler.På PROSJEKTER kan du se eksempler på arbeid jeg har gjort i nyere tid.Har også bidratt med utvikling av flere open-source prosjekter på GITHUB."
+    );
+  });
+});

playwright/kontakt.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Contact page', () => {
+  test('loads and displays form elements correctly', async ({ page }) => {
+    await page.goto('/kontakt');
+
+    // Check if form labels are visible
+    await expect(page.getByText('Fullt navn')).toBeVisible();
+    await expect(page.getByText('Telefonnummer')).toBeVisible();
+    await expect(page.getByText('Hva ønsker du å si?')).toBeVisible();
+
+    // Check if submit button is visible using the new data-testid
+    await expect(page.getByTestId('submit-button')).toBeVisible();
+  });
+
+  test('submit button has correct text', async ({ page }) => {
+    await page.goto('/kontakt');
+
+    // Check if the submit button has the correct text
+    const submitButton = page.getByTestId('submit-button');
+    await expect(submitButton).toHaveText('Send skjema');
+  });
+});

playwright/prosjekter.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Prosjekter page', () => {
+  test('loads and displays main content correctly', async ({ page }) => {
+    await page.goto('/prosjekter');
+
+    // Check main heading
+    await expect(page.getByRole('heading', { name: 'Prosjekter' })).toBeVisible();
+
+    // Check if 'Dfweb versjon' heading is visible
+    await expect(page.getByRole('heading', { name: 'Dfweb versjon' })).toBeVisible();
+  });
+
+  test('displays project images correctly', async ({ page }) => {
+    await page.goto('/prosjekter');
+
+    // Check if project images are visible
+    await expect(page.getByRole('img', { name: 'Earth Doom' })).toBeVisible();
+    await expect(page.getByRole('img', { name: 'NextJS WooCommerce' })).toBeVisible();
+  });
+
+  test('displays project details correctly', async ({ page }) => {
+    await page.goto('/prosjekter');
+
+    const portfolioContent = page.getByLabel('Innhold portefølje');
+
+    // Check project title
+    await expect(portfolioContent).toContainText('Earth Doom');
+
+    // Check project description
+    await expect(portfolioContent).toContainText('Fullstack strategispill inspirert av Planetarion. Prosjektet inkluderer innlogging, database, grafer, responsivt design med mer.');
+
+    // Check project technologies
+    await expect(portfolioContent).toContainText('Typescript, Tailwind, Prisma, Clerk, tRPC, mySQL, Chart.js');
+
+    // Check if 'Besøk' and 'GitHub' links are visible
+    await expect(page.getByText('BesøkGitHub').first()).toBeVisible();
+  });
+});