test: Operationalize playwright tests

Author: hairmare

.github/workflows/test.yaml

@@ -43,3 +43,35 @@ jobs:
       continue-on-error: true
     - run: yarn tsc
     - run: yarn test
+  test-playwright:
+    runs-on: ubuntu-latest
+    permissions:
+      actions: none
+      checks: write
+      contents: none
+      deployments: none
+      issues: none
+      packages: none
+      pull-requests: none
+      repository-projects: none
+      security-events: none
+      statuses: none
+      id-token: none
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 22
+        cache: 'yarn'
+    - run: yarn install --immutable
+    - run: npx playwright install --with-deps
+    - run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.yarn/patches/@backstage-e2e-test-utils-npm-0.1.1-chromium.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/playwright.cjs.js b/dist/playwright.cjs.js
+index c89c0d982319b8fbc8b6c27814e14d373c5a1e2e..1e69eac0c07472dd3a396aca88a8574a415b2ecd 100644
+--- a/dist/playwright.cjs.js
++++ b/dist/playwright.cjs.js
+@@ -20,7 +20,7 @@ function generateProjects() {
+     name: pkg.packageJson.name,
+     testDir: path.resolve(pkg.dir, "e2e-tests"),
+     use: {
+-      channel: "chrome"
++      channel: "chromium"
+     }
+   }));
+ }

package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.29.4",
-    "@backstage/e2e-test-utils": "^0.1.1",
+    "@backstage/e2e-test-utils": "patch:@backstage/e2e-test-utils@npm%3A0.1.1#~/.yarn/patches/@backstage-e2e-test-utils-npm-0.1.1-chromium.patch",
     "@playwright/test": "^1.49.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",

packages/app/e2e-tests/app.test.ts

@@ -18,9 +18,10 @@ import { test, expect } from '@playwright/test';
 test('App should render the welcome page', async ({ page }) => {
   await page.goto('/');
 
-  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(page.getByText('RaBe Backstage')).toBeVisible();
+
+  const enterButton = page.getByRole('button', { name: 'Sign In' });
   await expect(enterButton).toBeVisible();
-  await enterButton.click();
 
-  await expect(page.getByText('My Company Catalog')).toBeVisible();
+  await expect(page).toHaveScreenshot();
 });

packages/app/e2e-tests/app.test.ts-snapshots/App-should-render-the-welcome-page-1-app-linux.png

@@ -3571,7 +3571,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@backstage/e2e-test-utils@npm:^0.1.1":
+"@backstage/e2e-test-utils@npm:0.1.1":
   version: 0.1.1
   resolution: "@backstage/e2e-test-utils@npm:0.1.1"
   dependencies:
@@ -3586,6 +3586,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@backstage/e2e-test-utils@patch:@backstage/e2e-test-utils@npm%3A0.1.1#~/.yarn/patches/@backstage-e2e-test-utils-npm-0.1.1-chromium.patch":
+  version: 0.1.1
+  resolution: "@backstage/e2e-test-utils@patch:@backstage/e2e-test-utils@npm%3A0.1.1#~/.yarn/patches/@backstage-e2e-test-utils-npm-0.1.1-chromium.patch::version=0.1.1&hash=cbf1b7"
+  dependencies:
+    "@manypkg/get-packages": "npm:^1.1.3"
+    fs-extra: "npm:^11.0.0"
+  peerDependencies:
+    "@playwright/test": ^1.32.3
+  peerDependenciesMeta:
+    "@playwright/test":
+      optional: true
+  checksum: 10c0/9753d78a89f9c8b69296193973a8e7a33f807adad43fbc6b6767dfa9469c512c7350314b8de5b0e9bd08c714e84e0ce1941c6f67cd2cdd03a64e5391806baa7f
+  languageName: node
+  linkType: hard
+
 "@backstage/errors@npm:^1.2.4, @backstage/errors@npm:^1.2.6":
   version: 1.2.6
   resolution: "@backstage/errors@npm:1.2.6"
@@ -28484,7 +28499,7 @@ __metadata:
   resolution: "root@workspace:."
   dependencies:
     "@backstage/cli": "npm:^0.29.4"
-    "@backstage/e2e-test-utils": "npm:^0.1.1"
+    "@backstage/e2e-test-utils": "patch:@backstage/e2e-test-utils@npm%3A0.1.1#~/.yarn/patches/@backstage-e2e-test-utils-npm-0.1.1-chromium.patch"
     "@playwright/test": "npm:^1.49.1"
     "@types/react": "npm:^18"
     "@types/react-dom": "npm:^18"