Playwright

.github/workflows/cicd.yaml

@@ -4,7 +4,58 @@ on:
   push:
     branches: [main]
 
+permissions:
+  contents: read
+  id-token: write
+
+env:
+  AZURE_RESOURCE_GROUP: "gh-personal-portfolio"
+  AZURE_STORAGE_ACCOUNT: "ghpersonalportfolio"
+  LOCATION: "West Europe"
+
 jobs:
+  setup-azure-resource:
+    name: Setup Azure Resource
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Azure
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Create Resource Group
+        run: |
+          az group create \
+          --name ${{ env.AZURE_RESOURCE_GROUP }} \
+          --location "${{ env.LOCATION }}"
+
+      - name: Create Azure Storage Account
+        run: |
+          az storage account create \
+          --resource-group ${{ env.AZURE_RESOURCE_GROUP }} \
+          --name ${{ env.AZURE_STORAGE_ACCOUNT }} \
+          --sku Standard_LRS
+
+      - name: Grant Blob Data Contributor permissions to the Service Principal
+        run: |
+          az role assignment create \
+          --assignee ${{ secrets.AZURE_CLIENT_ID }} \
+          --role "Storage Blob Data Contributor" \
+          --scope /subscriptions/${{ secrets.AZURE_SUBSCRIPTION_ID }}/resourceGroups/${{ env.AZURE_RESOURCE_GROUP }}/providers/Microsoft.Storage/storageAccounts/${{ env.AZURE_STORAGE_ACCOUNT }}
+
+      - name: Create Azure Storage Container for the current commit
+        run: |
+          az storage container create \
+          --account-name ${{ env.AZURE_STORAGE_ACCOUNT }} \
+          --name ${{ github.sha }} \
+          --public-access blob \
+          --auth-mode login
+
   build:
     name: Build
     runs-on: ubuntu-latest
@@ -50,9 +101,66 @@ jobs:
       - name: Run tests
         run: npm run test:ci
 
+  e2e-tests:
+    name: E2E Tests
+    needs: [setup-azure-resource, build]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: nextjs-artifacts
+          path: .next/
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run E2E tests
+        id: e2e_tests
+        run: |
+          echo "status=failed" >> $GITHUB_OUTPUT
+          xvfb-run npm run test:e2e
+          echo "status=success" >> $GITHUB_OUTPUT
+        continue-on-error: true
+
+      - name: Log in to Azure
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Upload current commit E2E tests reports
+        run: |
+          az storage blob upload-batch \
+          --account-name ${{ env.AZURE_STORAGE_ACCOUNT }} \
+          --destination ${{ github.sha }} \
+          --destination-path playwright-report \
+          --source ./playwright-report \
+          --overwrite \
+          --auth-mode login
+
+      - name: Generate Job summary with E2E reports link
+        run: |
+          cat <<- EOM >> $GITHUB_STEP_SUMMARY
+            [View E2E Tests report](https://${{ env.AZURE_STORAGE_ACCOUNT }}.blob.core.windows.net/${{ github.sha }}/playwright-report/index.html)
+          EOM
+
+      - name: Check E2E test result
+        run: |
+          if [ "${{ steps.e2e_tests.outputs.status }}" == "failed" ]; then
+            exit 1
+          fi
+
   deploy:
     name: Deploy
-    needs: [build, lint, unit-tests]
+    needs: [build, lint, unit-tests, e2e-tests]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

.gitignore

@@ -33,3 +33,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e/home.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+
+const PORT = process.env.PORT || 3000;
+
+const baseURL = `http://localhost:${PORT}`;
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(baseURL, { waitUntil: "load" });
+});
+
+test("has title", async ({ page }) => {
+  await expect(page).toHaveTitle(/Create Next App/);
+});
+
+test("docs link", async ({ page }) => {
+  const newPage$ = page.waitForEvent("popup");
+
+  await page.getByRole("link", { name: "Docs" }).click();
+
+  const newPage = await newPage$;
+
+  await expect(newPage).toHaveURL(/.*docs/);
+});

package.json

@@ -12,9 +12,11 @@
     "eslint": "eslint",
     "prettier": "prettier",
     "test": "jest --watch",
-    "test:ci": "jest --ci"
+    "test:ci": "jest --ci",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@playwright/test": "^1.38.1",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.5",

playwright.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = process.env.PORT || 3000;
+
+const baseURL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  reporter: "html",
+  webServer: {
+    command: "npm start",
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL,
+    trace: "on",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
+    },
+    // {
+    //   name: "Mobile Safari",
+    //   use: { ...devices["iPhone 13"] },
+    // },
+    {
+      name: "Microsoft Edge",
+      use: { ...devices["Desktop Edge"], channel: "msedge" },
+    },
+    {
+      name: "Google Chrome",
+      use: { ...devices["Desktop Chrome"], channel: "chrome" },
+    },
+  ],
+});