test(e2e): AVR-549 replace Protractor tests with Playwright

.github/workflows/deploy-staging.yml

@@ -2,7 +2,7 @@ name: Deploy Staging
 
 on:
   release:
-    types: [ published ]
+    types: [published]
   push:
     branches:
       - dev
@@ -12,7 +12,7 @@ on:
 permissions:
   contents: read
   id-token: write
-  
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -22,8 +22,8 @@ jobs:
       - name: Use Node.js 14
         uses: actions/setup-node@v4
         with:
-          node-version: '14'
-          cache: 'npm'
+          node-version: "14"
+          cache: "npm"
 
       - name: Install deps
         run: |
@@ -38,7 +38,7 @@ jobs:
 
       - name: Run E2E Tests
         run: |
-          npm run e2e
+          npm run e2e:stg
 
       - name: Build SSR
         run: |

.github/workflows/deploy.yml

@@ -2,13 +2,13 @@ name: Deploy to ECS
 
 on:
   release:
-    types: [ published ]
+    types: [published]
   workflow_dispatch:
 
 permissions:
   contents: read
   id-token: write
-  
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -18,8 +18,8 @@ jobs:
       - name: Use Node.js 14
         uses: actions/setup-node@v4
         with:
-          node-version: '14'
-          cache: 'npm'
+          node-version: "14"
+          cache: "npm"
 
       - name: Install deps
         run: |
@@ -35,7 +35,7 @@ jobs:
       - name: Run E2E Tests
         continue-on-error: true
         run: |
-          npm run e2e
+          npm run e2e:live
 
       - name: Build SSR
         run: |

.github/workflows/deploy_dev.yml

@@ -2,12 +2,12 @@ name: Deploy to GH Pages (dev)
 
 on:
   push:
-    branches: [ dev ]
+    branches: [dev]
 
 permissions:
   contents: read
   id-token: write
-  
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -17,8 +17,8 @@ jobs:
       - name: Use Node.js 14
         uses: actions/setup-node@v4
         with:
-          node-version: '14'
-          cache: 'npm'
+          node-version: "14"
+          cache: "npm"
 
       - name: Install deps
         run: |
@@ -33,7 +33,7 @@ jobs:
 
       - name: Run E2E Tests
         run: |
-          npm run e2e
+          npm run e2e:dev
 
       - name: Build Beta
         run: |

.github/workflows/test-e2e.yml

@@ -0,0 +1,29 @@
+name: E2E Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "14"
+          cache: "npm"
+      - 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: 14

.gitignore

@@ -41,3 +41,8 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/app.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("avrae frontpage", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("should display welcome message", async ({ page }) => {
+    const paragraphText = await page.textContent("css=.about-avrae");
+    expect(paragraphText).toContain("I am Avrae");
+  });
+});

e2e/commands.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from "@playwright/test";
+import { CommandsPage } from "./pages/commands";
+
+test.describe("avrae commands page", () => {
+  let commandsPage: CommandsPage;
+
+  test.beforeEach(async ({ page }) => {
+    commandsPage = new CommandsPage(page);
+    await commandsPage.navigate();
+  });
+
+  test("should display a header", async () => {
+    const headerText = await commandsPage.getHeaderText();
+    expect(headerText).toEqual("Avrae Commands");
+  });
+
+  test("should show some modules", async () => {
+    const renderedModules = await commandsPage.getRenderedModules();
+    for (const moduleElement of await renderedModules.all()) {
+      expect(moduleElement);
+    }
+  });
+
+  test("should show some commands in each module", async () => {
+    const renderedModules = await commandsPage.getRenderedModules();
+    for (const moduleElement of await renderedModules.all()) {
+      const moduleCommands = await commandsPage.getModuleCommands(
+        moduleElement
+      );
+      for (const commandElement of await moduleCommands.all()) {
+        expect(commandElement).toBeVisible();
+      }
+    }
+  });
+});

e2e/pages/commands.ts

@@ -0,0 +1,25 @@
+import { Page } from "@playwright/test";
+
+export class CommandsPage {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async navigate() {
+    await this.page.goto("/commands");
+  }
+
+  async getHeaderText() {
+    return this.page.textContent("h1");
+  }
+
+  async getRenderedModules() {
+    return this.page.locator("css=.module-container");
+  }
+
+  async getModuleCommands(moduleElement) {
+    return moduleElement.locator("css=avr-command-display");
+  }
+}

e2e/urls.ts

@@ -0,0 +1,6 @@
+export const URLS = {
+  live: "https://avrae.io",
+  stg: "",
+  dev: "http://localhost:4200",
+  docker: "http://localhost:8000",
+};