Add Playwright Tests and Update Dependencies

This commit introduces Playwright tests for the application. A new GitHub workflow has been added to run these tests on push and pull request events on the main and master branches. The tests are configured to run on the latest Ubuntu environment and use Node version 18.

The Playwright configuration file and test specifications have also been added. The tests are designed to run on Chromium, Firefox, and Webkit browsers.

In addition, this commit updates the .gitignore file to ignore test results and Playwright cache.

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -16,4 +16,12 @@ package-lock.json
 
 *.log
 *.pid
-*.db
+*.db
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -9,7 +9,8 @@
     "api": "exec node api/server.js || true",
     "bump": "npm version $VERSION --no-git-tag-version --allow-same-version && cd ./api && npm version $VERSION --no-git-tag-version --allow-same-version && cd ../frontend && npm version $VERSION --no-git-tag-version --allow-same-version",
     "lint:eslint": "eslint --fix",
-    "lint:prettier": "prettier --write --loglevel warn"
+    "lint:prettier": "prettier --write --loglevel warn",
+    "start": "cd ./frontend && npm run build && cd .. && NODE_ENV=\"development\" node api/server.js"
   },
   "repository": {
     "type": "git",
@@ -25,6 +26,8 @@
   },
   "homepage": "https://github.com/skrashevich/double-take#readme",
   "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@types/node": "^18.18.0",
     "eslint": "^8.34.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",

playwright.config.js

@@ -0,0 +1,79 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './tests',
+  /* 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. */
+
+
+  /* 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: 'npm run start',
+    url: 'http://127.0.0.1:3000',
+    // reuseExistingServer: !process.env.CI,
+  },
+  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',
+  },
+});

tests/test-2.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('pages', async ({ page }) => {
+  await page.goto('./');
+  await page.getByLabel('Matches').click();
+  await expect(page.locator('.match-wrapper')).toBeVisible();
+  await page.getByLabel('Train').click();
+  await expect(page.locator('.train-wrapper')).toBeVisible();
+  await page.getByLabel('Config').click();
+  await expect(page.locator('.ace_content')).toBeVisible({timeout: 15000});
+  await page.getByLabel('Logs').click();
+  await expect(page.locator('pre')).toBeVisible();
+});
+test('right-menu', async ({ page }) => {
+  await page.goto('./');
+  await page.getByText('Double Take').click();
+  await expect(page.getByLabel('v1.13.11.7').locator('a')).toBeVisible();
+  await page.locator('#pv_id_1_0_2 a').click();
+  await page.getByText('Double Take').click();
+  await expect(page.locator('#pv_id_1_0_2 a')).toBeVisible();
+});