Set up e2e with Playwright

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',
+    },
+  ],
+});