diff --git a/.eslintignore b/.eslintignore index 46bb1ad2b2..5ccd2d1ba0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,3 +9,4 @@ **/microsite/** **/templates/** **/sample-templates/** +playwright.config.ts diff --git a/.gitignore b/.gitignore index 4ad888b46c..7149dbabc1 100644 --- a/.gitignore +++ b/.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 diff --git a/package.json b/package.json index dcdd66f7c3..f027658ffd 100644 --- a/package.json +++ b/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:*", diff --git a/packages/app/e2e-tests/SearchPage.test.ts b/packages/app/e2e-tests/SearchPage.test.ts new file mode 100644 index 0000000000..9c42cf3d0a --- /dev/null +++ b/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(); +}); diff --git a/packages/app/e2e-tests/app.test.ts b/packages/app/e2e-tests/app.test.ts new file mode 100644 index 0000000000..7449e4d9cb --- /dev/null +++ b/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(); +}); diff --git a/packages/app/package.json b/packages/app/package.json index d9aa5ee847..174db2c19b 100644 --- a/packages/app/package.json +++ b/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", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000000..ee8228e413 --- /dev/null +++ b/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 +});