add playright setup + migrate a few tests in example app

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

Author: 3 people

.eslintignore

@@ -9,3 +9,4 @@
 **/microsite/**
 **/templates/**
 **/sample-templates/**
+playwright.config.ts

.gitignore

@@ -150,6 +150,9 @@ tsconfig.tmp.json
 # vscode database functionality support files
 *.session.sql
 
+# E2E test reports
+e2e-test-report/
+
 # Lighthouse CI Reports
 **/.lighthouseci/*
 !**/.lighthouseci/scripts

package.json

@@ -18,6 +18,7 @@
     "clean": "backstage-cli repo clean",
     "test": "backstage-cli repo test",
     "test:all": "backstage-cli repo test --coverage",
+    "test:e2e": "playwright test",
     "fix": "backstage-cli repo fix",
     "lint": "backstage-cli repo lint --since origin/master",
     "lint:docs": "node ./scripts/check-docs-quality",
@@ -58,9 +59,11 @@
     "@backstage/cli": "workspace:*",
     "@backstage/codemods": "workspace:*",
     "@backstage/create-app": "workspace:*",
+    "@backstage/e2e-test-utils": "workspace:*",
     "@backstage/repo-tools": "workspace:*",
     "@changesets/cli": "^2.14.0",
     "@octokit/rest": "^19.0.3",
+    "@playwright/test": "^1.32.3",
     "@spotify/eslint-plugin": "^14.1.3",
     "@spotify/prettier-config": "^14.0.0",
     "@techdocs/cli": "workspace:*",

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from '@playwright/test';
+
+test('the results are rendered as expected', async ({ page }) => {
+  await page.goto('/');
+
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
+  await page.goto('/search');
+  await page.route(`http://*/api/search/query?term=*`, async route => {
+    const results = [
+      {
+        type: 'software-catalog',
+        document: {
+          title: 'backstage',
+          text: 'Backstage system documentation',
+          location: '/result/location/path',
+        },
+      },
+    ];
+    await route.fulfill({ json: { results } });
+  });
+
+  await expect(
+    page.getByPlaceholder('Search in Backstage Example App'),
+  ).toBeVisible();
+
+  await expect(page.getByText('Backstage system documentation')).toBeVisible();
+});

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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(enterButton).toBeVisible();
+  await enterButton.click();
+
+  await expect(page.getByText('My Company Catalog')).toBeVisible();
+
+  const supportButton = page.getByTestId('support-button');
+  await expect(supportButton).toBeVisible();
+  await supportButton.click();
+
+  await expect(page.getByText('#backstage')).toBeVisible();
+});

packages/app/package.json

@@ -103,6 +103,7 @@
   },
   "devDependencies": {
     "@backstage/test-utils": "workspace:^",
+    "@playwright/test": "^1.32.3",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",

playwright.config.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from '@playwright/test';
+import { generateProjects } from '@backstage/e2e-test-utils/playwright';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  timeout: 30_000,
+
+  expect: {
+    timeout: 5_000,
+  },
+
+  // Run your local dev server before starting the tests
+  webServer: process.env.CI
+    ? []
+    : [
+        {
+          command: 'yarn start',
+          port: 3000,
+          reuseExistingServer: true,
+          timeout: 60_000,
+        },
+        // TODO: Before encouraging e2e tests for backend we'll want to provide better utilities for mocking auth
+        // {
+        //   command: 'yarn start-backend',
+        //   port: 7007,
+        //   reuseExistingServer: true,
+        //   timeout: 60_000,
+        // },
+      ],
+
+  forbidOnly: !!process.env.CI,
+
+  retries: process.env.CI ? 2 : 0,
+
+  reporter: [['html', { open: 'never', outputFolder: 'e2e-test-report' }]],
+
+  use: {
+    actionTimeout: 0,
+    baseURL:
+      process.env.PLAYWRIGHT_URL ??
+      (process.env.CI ? 'http://localhost:7007' : 'http://localhost:3000'),
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+  },
+
+  outputDir: 'node_modules/.cache/e2e-test-results',
+
+  projects: generateProjects(), // Find all packages with e2e-test folders
+});