diff --git a/.gitignore b/.gitignore index 195546799..6c612328a 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,7 @@ hail-*.log # vscode settings **/.vscode/ + +# Playright test dirs +/tests/playwright/ +/playwright/.cache/ diff --git a/package.json b/package.json index b8f06d2bc..a3406e667 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "lint:js": "eslint .", "test:jest": "jest", "test:jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand", - "test:full": "pnpm test:jest", + "test:playwright": "playwright test --reporter=list --workers=1", + "test:full": "pnpm test:jest && pnpm test:playwright", "typecheck": "pnpm tsc --noEmit", "typecheck:watch": "pnpm tsc -w --noEmit" }, @@ -30,6 +31,7 @@ "@babel/preset-react": "^7.10.4", "@babel/preset-typescript": "^7.18.6", "@jest/globals": "^29.0.0", + "@playwright/test": "^1.43.0", "@types/d3-array": "^3.0.3", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 000000000..6249bcf97 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,80 @@ +import { defineConfig, devices } from '@playwright/test' + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './tests/e2e', + outputDir: './tests/playwright/', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: process.env.URL ? process.env.URL : 'http://127.0.0.1:8008', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + // { + // name: 'firefox', + // use: { ...devices['Desktop Firefox'] }, + // }, + + // { + // name: 'webkit', + // use: { ...devices['Desktop Safari'] }, + // }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: process.env.GNOMAD_API_URL + ? `GNOMAD_API_URL=${process.env.GNOMAD_API_URL} pnpm start:browser` + : `pnpm start:browser`, + url: 'http://127.0.0.1:8008', + reuseExistingServer: !process.env.CI, + }, +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6aa0383ec..a44903aa7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,9 @@ importers: '@jest/globals': specifier: ^29.0.0 version: 29.7.0 + '@playwright/test': + specifier: ^1.43.0 + version: 1.43.0 '@types/d3-array': specifier: ^3.0.3 version: 3.0.8 @@ -3670,6 +3673,14 @@ packages: requiresBuild: true optional: true + /@playwright/test@1.43.0: + resolution: {integrity: sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright: 1.43.0 + dev: true + /@sinclair/typebox@0.27.8: resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} dev: true @@ -7765,6 +7776,14 @@ packages: /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + /fsevents@2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + dev: true + optional: true + /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -10871,6 +10890,22 @@ packages: dependencies: find-up: 4.1.0 + /playwright-core@1.43.0: + resolution: {integrity: sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==} + engines: {node: '>=16'} + hasBin: true + dev: true + + /playwright@1.43.0: + resolution: {integrity: sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright-core: 1.43.0 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /polished@3.7.2: resolution: {integrity: sha512-pQKtpZGmsZrW8UUpQMAnR7s3ppHeMQVNyMDKtUyKwuvDmklzcEyM5Kllb3JyE/sE/x7arDmyd35i+4vp99H6sQ==} engines: {node: '>=10'} diff --git a/tests/e2e/HomePage.playwright.spec.ts b/tests/e2e/HomePage.playwright.spec.ts new file mode 100644 index 000000000..2ddf91f2c --- /dev/null +++ b/tests/e2e/HomePage.playwright.spec.ts @@ -0,0 +1,8 @@ +import { test, expect } from '@playwright/test' + +test('has title', async ({ page }) => { + await page.goto('/gene/ENSG00000169174?dataset=gnomad_r4') + + // Expect a title "to contain" a substring. + await expect(page).toHaveTitle(/PCSK9 | gnomAD v4.0.0 | gnomAD/) +})