Get playwright working with docker compose (#7)

* Get playwright working with docker compose

* Access secrets and pass to compose file

* Remove old -e args

* Fix var names

* Try without deps

* Add deps back in

* Branch tidy up

.github/workflows/validate-e2e.yaml

@@ -9,12 +9,21 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
+    name: Run Playwright Tests
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '18'
 
+      - name: Run Docker Compose
+        working-directory: ./src
+        env:
+          CONTENTFUL_DELIVERY_API_KEY: ${{ secrets.CONTENTFUL_DELIVERY_API_KEY }}
+          CONTENTFUL_PREVIEW_API_KEY: ${{ secrets.CONTENTFUL_PREVIEW_API_KEY }}
+          CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
+        run: docker compose -f infrastructure/docker/docker-compose.yml up -d
+
       - name: Install dependencies
         working-directory: ./src/e2e/CareLeavers.E2ETests
         run: yarn install
@@ -25,4 +34,4 @@ jobs:
 
       - name: Run Playwright Tests
         working-directory: ./src/e2e/CareLeavers.E2ETests
-        run: yarn playwright test
+        run: yarn playwright test -c playwright-ci.config.ts

.github/workflows/validate-sonarcloud.yml

@@ -1,10 +1,10 @@
 name: Validate - SonarQube
 
 on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
+#  push:
+#    branches: [ "main" ]
+#  pull_request:
+#    branches: [ "main" ]
   workflow_dispatch:
 
 permissions:

src/e2e/CareLeavers.E2ETests/package.json

@@ -23,5 +23,6 @@
     "playwright-core": "^1.50.0",
     "ts-node": "^10.9.2"
   },
-  "description": ""
+  "description": "",
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/e2e/CareLeavers.E2ETests/playwright-ci.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@playwright/test';
+import * as dotenv from 'dotenv';
+
+// Load environment variables from .env file
+dotenv.config();
+
+export default defineConfig({
+    testDir: './src/tests',
+    testMatch: '**/*.spec.ts',
+    timeout: 30 * 1000, // 30 seconds
+    expect: {
+        timeout: 5000, // 5 seconds
+    },
+    fullyParallel: true,
+    retries: 1,
+    workers: 4,
+    reporter: [['list'], ['html', { open: 'never' }]],
+    use: {
+        trace: 'on-first-retry',
+        screenshot: 'only-on-failure',
+        video: 'retain-on-failure',
+        baseURL: 'http://localhost:7050/',
+    },
+    projects: [
+        {
+            name: 'Chromium',
+            use: { browserName: 'chromium' },
+        },
+        {
+            name: 'Firefox',
+            use: { browserName: 'firefox' },
+        },
+        {
+            name: 'WebKit',
+            use: { browserName: 'webkit' },
+        },
+        {
+            name: 'Mobile Chrome',
+            use: {
+                browserName: 'chromium',
+                ...devices['Pixel 8'],
+            },
+        },
+        {
+            name: 'Mobile Safari',
+            use: {
+                browserName: 'webkit',
+                ...devices['iPhone 15'],
+            },
+        },
+    ],
+});

src/e2e/CareLeavers.E2ETests/playwright.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',
-    baseURL: 'https://localhost:7050/', 
+    baseURL: 'https://localhost:7050/',
   },
   projects: [
     {

src/e2e/CareLeavers.E2ETests/src/pages/HomePage.ts

@@ -9,8 +9,8 @@ export class HomePage {
     constructor(page: Page) {
         this.page = page;
         this.mainHeading = page.locator('h1');
-        this.whoIsThisFor = page.locator('#main-content h3').first();
-        this.firstParagraph = page.locator('#main-content p.govuk-body').first();
+        this.whoIsThisFor = page.locator('h3').first();
+        this.firstParagraph = page.locator('p.govuk-body').first();
         //this.firstParagraph = page.locator('p:has-text("Starting life as an adult can be challenging")');
         this.footer = page.locator('footer');
     }

src/infrastructure/docker/docker-compose.yml

@@ -7,4 +7,8 @@ services:
     ports:
       - "7050:8080"
     environment:
-      ASPNETCORE_ENVIRONMENT: EndToEnd
+      ASPNETCORE_ENVIRONMENT: EndToEnd
+      Caching__Type: "None"
+      ContentfulOptions__DeliveryApiKey: ${CONTENTFUL_DELIVERY_API_KEY}
+      ContentfulOptions__PreviewApiKey: ${CONTENTFUL_PREVIEW_API_KEY}
+      ContentfulOptions__SpaceId: ${CONTENTFUL_SPACE_ID}