Add e2e test for meditor validation

.github/workflows/frontend-ci.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Build Vue app
         run: yarn run build
 
-  test-e2e:
+  test-e2e-puppeteer:
     runs-on: ubuntu-latest
     services:
       postgres:
@@ -122,23 +122,132 @@ jobs:
 
       - name: Install E2E tests
         run: yarn install --frozen-lockfile
-        working-directory: e2e
+        working-directory: e2e/puppeteer
 
       - name: Lint E2E tests
         run: yarn run lint --no-fix --max-warnings=0
-        working-directory: e2e
+        working-directory: e2e/puppeteer
 
       - name: Run E2E tests
         run: |
           # start vue dev server and wait for it to start
-          yarn --cwd ../web/ run dev 2> /dev/null &
+          yarn --cwd ../../web/ run dev 2> /dev/null &
           while ! nc -z localhost 8085; do
             sleep 3
           done
 
           # start the dandi-api server
-          python ../manage.py runserver &
+          python ../../manage.py runserver &
 
           # run the E2E tests
           yarn run test
-        working-directory: e2e
+        working-directory: e2e/puppeteer
+
+  test-e2e-playwright:
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:latest
+        env:
+          POSTGRES_DB: django
+          POSTGRES_PASSWORD: postgres
+        ports:
+          - 5432:5432
+      rabbitmq:
+        image: rabbitmq:management
+        ports:
+          - 5672:5672
+      minio:
+        # This image does not require any command arguments (which GitHub Actions don't support)
+        image: bitnami/minio:latest
+        env:
+          MINIO_ROOT_USER: minioAccessKey
+          MINIO_ROOT_PASSWORD: minioSecretKey
+        ports:
+          - 9000:9000
+    env:
+      # API server env vars
+      DJANGO_DATABASE_URL: postgres://postgres:postgres@localhost:5432/django
+      DJANGO_MINIO_STORAGE_ENDPOINT: localhost:9000
+      DJANGO_MINIO_STORAGE_ACCESS_KEY: minioAccessKey
+      DJANGO_MINIO_STORAGE_SECRET_KEY: minioSecretKey
+      DJANGO_STORAGE_BUCKET_NAME: dandi-bucket
+      DJANGO_DANDI_DANDISETS_BUCKET_NAME: dandi-bucket
+      DJANGO_DANDI_DANDISETS_LOG_BUCKET_NAME: dandiapi-dandisets-logs
+      DJANGO_DANDI_DANDISETS_EMBARGO_BUCKET_NAME: dandi-embargo-dandisets
+      DJANGO_DANDI_DANDISETS_EMBARGO_LOG_BUCKET_NAME: dandiapi-embargo-dandisets-logs
+      DJANGO_DANDI_WEB_APP_URL: http://localhost:8085
+      DJANGO_DANDI_API_URL: http://localhost:8000
+      DJANGO_DANDI_JUPYTERHUB_URL: https://hub.dandiarchive.org/
+      DANDI_ALLOW_LOCALHOST_URLS: 1
+
+      # Web client env vars
+      VITE_APP_DANDI_API_ROOT: http://localhost:8000/api/
+      VITE_APP_OAUTH_API_ROOT: http://localhost:8000/oauth/
+      VITE_APP_OAUTH_CLIENT_ID: Dk0zosgt1GAAKfN8LT4STJmLJXwMDPbYWYzfNtAl
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+
+    - name: Set up Python
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.11'
+
+    - name: Install web app
+      run: yarn install --frozen-lockfile
+      working-directory: web
+
+    - name: Install latest version of pip
+      run: pip install --upgrade pip
+
+    - uses: actions/cache@v4
+      id: pip-cache
+      with:
+        path: ${{ env.pythonLocation}}/lib/python3.11/site-packages/*
+        key: ${{ env.pythonLocation }}-${{ hashFiles('requirements.txt') }}-${{ hashFiles('setup.py') }}
+
+    - name: Install dandi-api dependencies
+      run: pip install --upgrade --upgrade-strategy eager -e .[dev]
+
+    - name: Apply migrations to API server
+      run: python manage.py migrate
+
+    - name: Create any cache tables
+      run: python manage.py createcachetable
+
+    - name: Install test data
+      run: python manage.py loaddata playwright
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+      working-directory: e2e/playwright
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+      working-directory: e2e/playwright
+
+    - name: Run Playwright tests
+      run: |
+          # start vue dev server
+          yarn --cwd ../../web/ run dev 2> /dev/null &
+          while ! nc -z localhost 8085; do
+            sleep 3
+          done
+
+          # start the dandi-api server
+          python ../../manage.py runserver &
+
+          # run the tests
+          npx playwright test
+      working-directory: e2e/playwright
+
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: e2e/playwright/playwright-report/
+        retention-days: 30

e2e/playwright/.gitignore

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

e2e/playwright/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "dandi-playwright-test",
+  "scripts": {},
+  "devDependencies": {
+    "@playwright/test": "^1.41.2",
+    "@types/node": "^20.11.19",
+    "axios": "^1.6.7",
+    "lodash": "^4.17.21"
+  }
+}

e2e/playwright/playwright.config.ts

@@ -0,0 +1,47 @@
+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: './.',
+  /* 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,
+  workers: 4,
+  /* 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',
+
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop 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,
+  // },
+});