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": "backstage:^",
-    "@backstage/e2e-test-utils": "backstage:^",
+    "@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.50.0",
     "@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();
 });