Set up e2e with Playwright (#1001)

Motivation:

E2E tests are important to verify the correctness of behavior. Mocking
tests are fast and easy to inject inputs but they can't check changes in
other sides.

It will not be easy to test all functions with e2e tests. So I am going
to write e2e tests for core features of the webapp.

Modifications:

- Set up Playwright for e2e tests of the webapp

webapp/.gitignore

@@ -0,0 +1,4 @@
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

webapp/build.gradle

@@ -18,9 +18,15 @@ dependencies {
     testImplementation libs.shiro.core
 }
 
+task installPlayWright(type: NpmTask) {
+    dependsOn tasks.npmInstall
+    args = ['run', 'playwright:install']
+}
+
 // Set `NEXT_ENV=development` to `.env.local` file to produce source maps for the minified JavaScript files.
 task buildWeb(type: NpmTask) {
     dependsOn tasks.npmInstall
+    dependsOn installPlayWright
     args = ['run', 'build']
     inputs.dir('src')
     inputs.file('package.json')

webapp/e2e/landing.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach('Login', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.getByText(/Login/)).toBeVisible();
+  await page.getByPlaceholder('ID').fill('foo');
+  await page.getByPlaceholder('Password').fill('bar');
+  await page.getByRole('button', { name: 'Login' }).click();
+});
+
+test('welcome message', async ({ page }) => {
+  await expect(page.getByRole('heading', { name: 'Welcome to Central Dogma!' })).toBeVisible();
+});
+
+test('search project', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.getByText('Search project ...')).toBeVisible();
+  await expect(page.getByRole('combobox')).toBeVisible();
+  await page.locator('#project-select').click();
+  await expect(page.getByRole('option', { name: 'dogma' })).toBeVisible();
+  await expect(page.getByRole('option', { name: 'foo' })).toBeVisible();
+});

webapp/jest.config.js

@@ -8,6 +8,7 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  modulePathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/out/', '<rootDir>/e2e/'],
   testEnvironment: 'jest-environment-jsdom',
   moduleDirectories: ['node_modules', 'src'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],

webapp/package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "test": "jest --watch",
     "test:ci": "jest --ci",
+    "test:e2e": "npx playwright test",
     "develop": "NEXT_PUBLIC_HOST=\"http://127.0.0.1:36462\" NEXT_ENV=\"development\" next dev",
+    "backend": "../gradlew runTestShiroServer -PnoWeb",
     "mock": "NEXT_ENV=\"development\" next dev",
     "build": "next build",
     "start": "next start",
@@ -14,6 +16,7 @@
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "pretest": "npm run lint",
+    "playwright:install": "npx playwright install --with-deps",
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
@@ -39,6 +42,7 @@
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@next/bundle-analyzer": "^14.2.4",
+    "@playwright/test": "^1.45.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",

webapp/playwright.config.ts

@@ -0,0 +1,71 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Timeout for each test. 60 seconds */
+  timeout: 60 * 1000,
+  /* 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: 'http://127.0.0.1:3000',
+
+    /* 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'] },
+    },
+    // Uncomment the following to run tests in other browsers.
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+
+  // Run your local dev server before starting the tests
+  webServer: [
+    {
+      command: 'npm run backend',
+      url: 'http://127.0.0.1:36462/monitor/l7check',
+      reuseExistingServer: !process.env.CI,
+      stdout: 'ignore',
+      stderr: 'pipe',
+    },
+    {
+      command: 'npm run develop',
+      url: 'http://127.0.0.1:3000',
+      reuseExistingServer: !process.env.CI,
+      stdout: 'ignore',
+      stderr: 'pipe',
+    },
+  ],
+});