feat(web): Improve web e2e tests and move them to their directory

.github/workflows/pullrequest.yml

@@ -34,7 +34,9 @@ jobs:
 
     outputs:
       TEST_CHUNKS: ${{ steps.test_projects.outputs.CHUNKS }}
+      E2E_CI_CHUNKS: ${{ steps.e2e_ci_projects.outputs.CHUNKS }}
       E2E_CHUNKS: ${{ steps.e2e_projects.outputs.CHUNKS }}
+      E2E_CI_BUILD_ID: ${{ steps.e2e_ci_projects.outputs.BUILD_ID }}
       E2E_BUILD_ID: ${{ steps.e2e_projects.outputs.BUILD_ID }}
       LINT_CHUNKS: ${{ steps.lint_projects.outputs.CHUNKS }}
       BUILD_CHUNKS: ${{ steps.build_projects.outputs.CHUNKS }}
@@ -141,13 +143,25 @@ jobs:
             echo "CHUNKS={\"projects\":$CHUNKS}" >> "$GITHUB_OUTPUT"
           fi
 
+      - name: Prepare e2e-ci targets
+        id: e2e_ci_projects
+        env:
+          CHUNK_SIZE: 1
+        run: |
+          set -euo pipefail
+          CHUNKS="$(./scripts/ci/generate-chunks.sh e2e-ci)"
+          if [[ "$CHUNKS" != "[]" ]]; then
+            echo "CHUNKS={\"projects\":$CHUNKS}" >> "$GITHUB_OUTPUT"
+          fi
+          echo BUILD_ID="$GITHUB_RUN_ID-$GITHUB_RUN_NUMBER-$(uuidgen)" >> "$GITHUB_OUTPUT"
+
       - name: Prepare e2e targets
         id: e2e_projects
         env:
           CHUNK_SIZE: 1
         run: |
           set -euo pipefail
-          CHUNKS="$(./scripts/ci/generate-chunks.sh e2e-ci)"
+          CHUNKS="$(./scripts/ci/generate-chunks.sh e2e)"
           if [[ "$CHUNKS" != "[]" ]]; then
             echo "CHUNKS={\"projects\":$CHUNKS}" >> "$GITHUB_OUTPUT"
           fi
@@ -213,10 +227,10 @@ jobs:
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           docker-registry: 821090935708.dkr.ecr.eu-west-1.amazonaws.com/
 
-  e2e:
+  e2e-ci:
     needs:
       - prepare
-    if: needs.prepare.outputs.E2E_CHUNKS
+    if: needs.prepare.outputs.E2E_CI_CHUNKS
     runs-on: ec2-runners
     container:
       image: public.ecr.aws/m3u4c4h9/island-is/actions-runner-public:latest
@@ -227,10 +241,10 @@ jobs:
       CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
       API_MOCKS: 'true'
       NODE_OPTIONS: --max-old-space-size=4096
-      E2E_BUILD_ID: '${{ needs.prepare.outputs.E2E_BUILD_ID }}-${{ github.run_attempt }}'
+      E2E_CI_BUILD_ID: '${{ needs.prepare.outputs.E2E_CI_BUILD_ID }}-${{ github.run_attempt }}'
     strategy:
       fail-fast: false
-      matrix: ${{ fromJson(needs.prepare.outputs.E2E_CHUNKS) }}
+      matrix: ${{ fromJson(needs.prepare.outputs.E2E_CI_CHUNKS) }}
     steps:
       - uses: actions/checkout@v4
 
@@ -252,6 +266,42 @@ jobs:
       - name: Running e2e tests
         run: ./scripts/ci/40_e2e.sh "${AFFECTED_PROJECT}"
 
+  e2e:
+    needs:
+      - prepare
+    if: needs.prepare.outputs.E2E_CHUNKS
+    runs-on: ec2-runners
+    container:
+      image: public.ecr.aws/m3u4c4h9/island-is/actions-runner-public:latest
+    timeout-minutes: 35
+    env:
+      AFFECTED_PROJECT: ${{ matrix.projects }}
+      NODE_OPTIONS: --max-old-space-size=4096
+      E2E_BUILD_ID: '${{ needs.prepare.outputs.E2E_BUILD_ID }}-${{ github.run_attempt }}'
+    strategy:
+      fail-fast: false
+      matrix: ${{ fromJson(needs.prepare.outputs.E2E_CHUNKS) }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: 'package.json'
+
+      - name: Setup yarn
+        run: corepack enable
+
+      - name: Get cache
+        id: get-cache
+        uses: ./.github/actions/get-cache
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          keys: ${{ needs.prepare.outputs.CACHE_KEYS }}
+          enable-cache: 'node_modules,generated-files'
+
+      - name: Running e2e tests
+        run: yarn e2e "${AFFECTED_PROJECT}"
+
   linting-workspace:
     needs:
       - prepare
@@ -410,13 +460,16 @@ jobs:
       - linting
       - run-shellcheck
       - formatting
+      - e2e-ci
       - e2e
       - build
     steps:
       - name: Check prepare success
         run: '[[ ${{ needs.prepare.result }} == "success" ]] || exit 1'
       - name: Check tests success
         run: '[[ ${{ needs.tests.result }} != "failure" ]] || exit 1'
+      - name: Check e2e-ci success
+        run: '[[ ${{ needs.e2e-ci.result }} != "failure" ]] || exit 1'
       - name: Check e2e success
         run: '[[ ${{ needs.e2e.result }} != "failure" ]] || exit 1'
       - name: Check linting success

apps/web/README.md

@@ -90,6 +90,43 @@ yarn nx extract-strings web
 
 Currently, in this project, only the `Custom Page` content type utilizes the `Translation Namespace` content type for translations
 
+## E2E Testing
+
+### Quick Start
+
+To run the E2E tests for the `web` app:
+
+1. **Install dependencies** (if not already installed):
+
+   ```bash
+   yarn install && yarn playwright install
+   ```
+
+2. **Run the tests**:
+
+   ```bash
+   yarn e2e web
+   ```
+
+### Folder Structure
+
+The `e2e` directory is organized as follows:
+
+```shell
+web/
+└── e2e/
+    ├── smoke/                # Smoke tests for basic functionality
+    └── acceptance/           # Acceptance tests for detailed workflows
+```
+
+### Mocking with Mockoon
+
+Mock responses can be set up using Mockoon to simulate API behavior. Refer to the [Mockoon Usage Guide](../../libs/testing/e2e/README.md) for detailed instructions.
+
+### More Resources
+
+Refer to the [E2E Testing Library README](../../libs/testing/e2e/README.md) for common helper functions and utilities.
+
 ## Further Documentation
 
 [Subpages](./docs/subpages.md) - Information on Layouts and Components used when

apps/web/e2e/smoke/homepage.spec.ts

@@ -0,0 +1,212 @@
+import {
+  type BrowserContext,
+  createPageAndNavigate,
+  expect,
+  session,
+  test,
+  urls,
+} from '@island.is/testing/e2e'
+
+test.use({ baseURL: urls.islandisBaseUrl })
+
+test.describe('Front page', () => {
+  let context: BrowserContext
+
+  test.beforeAll(async ({ browser }) => {
+    context = await session({
+      browser: browser,
+      storageState: 'homepage.json',
+      homeUrl: `${urls.islandisBaseUrl}/`,
+      phoneNumber: '0103019',
+      idsLoginOn: false,
+    })
+  })
+
+  test.afterAll(async () => {
+    await context.close()
+  })
+
+  test('has expected sections @lang:is', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    await expect(
+      page.locator('text=Öll opinber þjónusta á einum stað'),
+    ).toBeVisible()
+    await expect(page.locator('data-testid=home-banner')).toBeVisible()
+    await expect(page.locator('data-testid=home-heading')).toBeVisible()
+    await expect(page.locator('data-testid=home-news')).toBeVisible()
+  })
+
+  test(`should have life event @lang:is`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    await expect(lifeEventsCards.count()).resolves.toBeGreaterThan(3)
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      const result = await lifeEventPage.goto(url ?? '')
+      await expect(
+        lifeEventPage.getByRole('link', { name: 'island.is logo' }),
+      ).toBeVisible()
+      expect(result?.status()).toBe(200)
+    }
+    await lifeEventPage.close()
+  })
+
+  test(`should have life event @lang:en`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/en')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    await expect(lifeEventsCards.count()).resolves.toBeGreaterThan(3)
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      const result = await lifeEventPage.goto(url ?? '')
+      await expect(
+        lifeEventPage.getByRole('link', { name: 'island.is logo' }),
+      ).toBeVisible()
+      expect(result?.status()).toBe(200)
+    }
+    await lifeEventPage.close()
+  })
+
+  test(`should navigate to featured link @lang:is`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/')
+    const featuredLinks = page.locator('[data-testid="featured-link"]')
+    await expect(featuredLinks.count()).resolves.toBeGreaterThan(3)
+    const featuredLinksHandles = await featuredLinks.elementHandles()
+    const featuresLinksUrls = await Promise.all(
+      featuredLinksHandles.map((item) => item.getAttribute('href')),
+    )
+    const featuredPage = await context.newPage()
+    for (const url of featuresLinksUrls) {
+      if (url) {
+        const result = await featuredPage.goto(url)
+        await expect(
+          featuredPage.getByRole('link', { name: 'island.is logo' }),
+        ).toBeVisible()
+        if (result) {
+          expect(result.status()).toBe(200)
+        }
+      }
+    }
+    await featuredPage.close()
+  })
+
+  test(`should navigate to featured link @lang:en`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/en')
+    const featuredLinks = page.locator('[data-testid="featured-link"]')
+    await expect(featuredLinks.count()).resolves.toBeGreaterThan(3)
+    const featuredLinksHandles = await featuredLinks.elementHandles()
+    const featuresLinksUrls = await Promise.all(
+      featuredLinksHandles.map((item) => item.getAttribute('href')),
+    )
+    const featuredPage = await context.newPage()
+    for (const url of featuresLinksUrls) {
+      if (url) {
+        const result = await featuredPage.goto(url)
+        await expect(
+          featuredPage.getByRole('link', { name: 'island.is logo' }),
+        ).toBeVisible()
+        if (result) {
+          expect(result.status()).toBe(200)
+        }
+      }
+    }
+    await featuredPage.close()
+  })
+
+  test(`should have link on life events pages to navigate back to the main page @lang:is`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      if (url) {
+        await lifeEventPage.goto(url)
+        await lifeEventPage.locator('[data-testid="link-back-home"]').click()
+      }
+      await expect(
+        lifeEventPage.locator('data-testid=home-heading'),
+      ).toBeVisible()
+      await expect(lifeEventPage).toHaveURL('/')
+    }
+    await lifeEventPage.close()
+  })
+
+  test(`should have link on life events pages to navigate back to the main page @lang:en`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/en')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      if (url) {
+        await lifeEventPage.goto(url)
+        await lifeEventPage.locator('[data-testid="link-back-home"]').click()
+      }
+      await lifeEventPage.locator('[data-testid="link-back-home"]').click()
+      await expect(
+        lifeEventPage.locator('data-testid=home-heading'),
+      ).toBeVisible()
+      await expect(lifeEventPage).toHaveURL('/en')
+    }
+    await lifeEventPage.close()
+  })
+
+  test('should change welcome message on language toggle @lang:is', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    const homeHeading = page.locator('h1[data-testid="home-heading"]')
+    const icelandicHeading = await homeHeading.textContent()
+    await page.locator('button[data-testid="language-toggler"]:visible').click()
+    if (icelandicHeading) {
+      await expect(homeHeading).not.toHaveText(icelandicHeading)
+    }
+    await expect(page).toHaveURL('/en')
+  })
+
+  test('should toggle mega-menu @lang:is', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    await page
+      .locator('[data-testid="frontpage-burger-button"]:nth-child(2)')
+      .click()
+    await expect(
+      page.locator('[data-testid="mega-menu-link"] > a').count(),
+    ).resolves.toBeGreaterThan(18)
+  })
+
+  test('burger menu should open and close', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    await page.getByRole('button', { name: 'Valmynd' }).click()
+
+    await expect(page.getByRole('dialog', { name: 'Menu' })).toBeVisible()
+    await expect(
+      page.getByRole('paragraph').filter({ hasText: 'Þjónustuflokkar' }),
+    ).toBeVisible()
+    await expect(page.getByRole('dialog', { name: 'Menu' })).toBeVisible()
+    // Heading is "visible" behind menu
+    // await expect(page.getByTestId('home-heading')).not.toBeVisible()
+    await page
+      .getByRole('dialog', { name: 'Menu' })
+      .getByRole('button')
+      .getByTestId('icon-close')
+      .click()
+    await expect(page.getByTestId('home-heading')).toBeVisible()
+    await expect(page.getByRole('dialog', { name: 'Menu' })).not.toBeVisible()
+  })
+})