diff --git a/.changeset/twelve-clouds-design.md b/.changeset/twelve-clouds-design.md new file mode 100644 index 0000000000..d71d6caec0 --- /dev/null +++ b/.changeset/twelve-clouds-design.md @@ -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. diff --git a/packages/create-app/src/lib/tasks.test.ts b/packages/create-app/src/lib/tasks.test.ts index c94bf43598..781e6a126c 100644 --- a/packages/create-app/src/lib/tasks.test.ts +++ b/packages/create-app/src/lib/tasks.test.ts @@ -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', diff --git a/packages/create-app/src/lib/versions.ts b/packages/create-app/src/lib/versions.ts index 72f5c2c9d5..67db8b4a78 100644 --- a/packages/create-app/src/lib/versions.ts +++ b/packages/create-app/src/lib/versions.ts @@ -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, diff --git a/packages/create-app/templates/default-app/.gitignore.hbs b/packages/create-app/templates/default-app/.gitignore.hbs index d452ac2932..fbf813909c 100644 --- a/packages/create-app/templates/default-app/.gitignore.hbs +++ b/packages/create-app/templates/default-app/.gitignore.hbs @@ -49,3 +49,6 @@ site # vscode database functionality support files *.session.sql + +# E2E test reports +e2e-test-report/ diff --git a/packages/create-app/templates/default-app/package.json.hbs b/packages/create-app/templates/default-app/package.json.hbs index 9715331d8f..844a7bca9d 100644 --- a/packages/create-app/templates/default-app/package.json.hbs +++ b/packages/create-app/templates/default-app/package.json.hbs @@ -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", diff --git a/packages/create-app/templates/default-app/packages/app/cypress.config.js b/packages/create-app/templates/default-app/packages/app/cypress.config.js deleted file mode 100644 index 113d09ec84..0000000000 --- a/packages/create-app/templates/default-app/packages/app/cypress.config.js +++ /dev/null @@ -1,11 +0,0 @@ -const { defineConfig } = require('cypress'); - -module.exports = defineConfig({ - fixturesFolder: false, - retries: 3, - - e2e: { - supportFile: false, - baseUrl: 'http://localhost:3001', - }, -}); diff --git a/packages/create-app/templates/default-app/packages/app/cypress/.eslintrc.json b/packages/create-app/templates/default-app/packages/app/cypress/.eslintrc.json deleted file mode 100644 index b903ff250a..0000000000 --- a/packages/create-app/templates/default-app/packages/app/cypress/.eslintrc.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "plugins": ["cypress"], - "extends": ["plugin:cypress/recommended"], - "rules": { - "jest/expect-expect": [ - "error", - { - "assertFunctionNames": ["expect", "cy.contains", "cy.**.should"] - } - ] - } -} diff --git a/packages/create-app/templates/default-app/packages/app/cypress/e2e/app.cy.js b/packages/create-app/templates/default-app/packages/app/cypress/e2e/app.cy.js deleted file mode 100644 index 43fb2e32de..0000000000 --- a/packages/create-app/templates/default-app/packages/app/cypress/e2e/app.cy.js +++ /dev/null @@ -1,6 +0,0 @@ -describe('App', () => { - it('should render the catalog', () => { - cy.visit('/'); - cy.contains('My Company Catalog'); - }); -}); diff --git a/packages/create-app/templates/default-app/packages/app/e2e-tests/app.test.ts b/packages/create-app/templates/default-app/packages/app/e2e-tests/app.test.ts new file mode 100644 index 0000000000..d45bc0dbf0 --- /dev/null +++ b/packages/create-app/templates/default-app/packages/app/e2e-tests/app.test.ts @@ -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(); +}); diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs index b934b86945..598f049a4c 100644 --- a/packages/create-app/templates/default-app/packages/app/package.json.hbs +++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs @@ -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": [ diff --git a/packages/create-app/templates/default-app/playwright.config.ts b/packages/create-app/templates/default-app/playwright.config.ts new file mode 100644 index 0000000000..37c7fb14c7 --- /dev/null +++ b/packages/create-app/templates/default-app/playwright.config.ts @@ -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 +});