create-app: migrate to playwright

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>
2023-09-25 16:55:51 +02:00
parent 47280bccd9
commit 5eacd5d213
11 changed files with 104 additions and 38 deletions
@@ -0,0 +1,9 @@
+---
+'@backstage/create-app': patch
+---
+
+The E2E test setup based on Cypress has been replaced with one based on [Playwright](https://playwright.dev/). Migrating existing apps is not required as this is a standalone setup, only do so if you also want to switch from Cypress to Playwright.
+
+The scripts to run the E2E tests have been removed from `packages/app/package.json`, as they are now instead run from the root. Instead, a new script has been added to the root `package.json`, `yarn test:e2e`, which runs the E2E tests in development mode, unless `CI` is set in the environment.
+
+The Playwright setup uses utilities from the new `@backstage/e2e-test-utils` package to find and include all packages in the monorepo that have an `e2e-tests` folder.
@@ -66,6 +66,7 @@ jest.mock('./versions', () => ({
    '@backstage/core-app-api': '1.0.0',
    '@backstage/core-components': '1.0.0',
    '@backstage/core-plugin-api': '1.0.0',
+    '@backstage/e2e-test-utils': '1.0.0',
    '@backstage/integration-react': '1.0.0',
    '@backstage/plugin-api-docs': '1.0.0',
    '@backstage/plugin-catalog': '1.0.0',
@@ -41,6 +41,7 @@ import { version as config } from '../../../config/package.json';
 import { version as coreAppApi } from '../../../core-app-api/package.json';
 import { version as coreComponents } from '../../../core-components/package.json';
 import { version as corePluginApi } from '../../../core-plugin-api/package.json';
+import { version as e2eTestUtils } from '../../../e2e-test-utils/package.json';
 import { version as errors } from '../../../errors/package.json';
 import { version as integrationReact } from '../../../integration-react/package.json';
 import { version as testUtils } from '../../../test-utils/package.json';
@@ -92,6 +93,7 @@ export const packageVersions = {
  '@backstage/core-app-api': coreAppApi,
  '@backstage/core-components': coreComponents,
  '@backstage/core-plugin-api': corePluginApi,
+  '@backstage/e2e-test-utils': e2eTestUtils,
  '@backstage/errors': errors,
  '@backstage/integration-react': integrationReact,
  '@backstage/plugin-api-docs': pluginApiDocs,
@@ -49,3 +49,6 @@ site

 # vscode database functionality support files
 *.session.sql
+
+# E2E test reports
+e2e-test-report/
@@ -17,6 +17,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/{{defaultBranch}}",
    "lint:all": "backstage-cli repo lint",
@@ -31,6 +32,8 @@
  },
  "devDependencies": {
    "@backstage/cli": "^{{version '@backstage/cli'}}",
+    "@backstage/e2e-test-utils": "^{{version '@backstage/e2e-test-utils'}}",
+    "@playwright/test": "^1.32.3",
    "@spotify/prettier-config": "^12.0.0",
    "concurrently": "^8.0.0",
    "lerna": "^4.0.0",
@@ -1,11 +0,0 @@
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  fixturesFolder: false,
-  retries: 3,
-
-  e2e: {
-    supportFile: false,
-    baseUrl: 'http://localhost:3001',
-  },
-});
@@ -1,12 +0,0 @@
-{
-  "plugins": ["cypress"],
-  "extends": ["plugin:cypress/recommended"],
-  "rules": {
-    "jest/expect-expect": [
-      "error",
-      {
-        "assertFunctionNames": ["expect", "cy.contains", "cy.**.should"]
-      }
-    ]
-  }
-}
@@ -1,6 +0,0 @@
-describe('App', () => {
-  it('should render the catalog', () => {
-    cy.visit('/');
-    cy.contains('My Company Catalog');
-  });
-});
@@ -0,0 +1,23 @@
+/*
+ * 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('/');
+
+  await expect(page.getByText('My Company Catalog')).toBeVisible();
+});
@@ -11,11 +11,7 @@
    "build": "backstage-cli package build",
    "clean": "backstage-cli package clean",
    "test": "backstage-cli package test",
-    "lint": "backstage-cli package lint",
-    "test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev",
-    "test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run",
-    "cy:dev": "cypress open",
-    "cy:run": "cypress run --browser chrome"
+    "lint": "backstage-cli package lint"
  },
  "dependencies": {
    "@backstage/app-defaults": "^{{version '@backstage/app-defaults'}}",
@@ -54,15 +50,13 @@
  },
  "devDependencies": {
    "@backstage/test-utils": "^{{version '@backstage/test-utils'}}",
+    "@playwright/test": "^1.32.3",
    "@testing-library/jest-dom": "^5.10.1",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^14.0.0",
    "@testing-library/dom": "^8.0.0",
    "@types/react-dom": "*",
-    "cross-env": "^7.0.0",
-    "cypress": "^12.0.0",
-    "eslint-plugin-cypress": "^2.10.3",
-    "start-server-and-test": "^1.10.11"
+    "cross-env": "^7.0.0"
  },
  "browserslist": {
    "production": [
@@ -0,0 +1,60 @@
+/*
+ * 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: 60_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,
+        },
+      ],
+
+  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
+});