test: document ui e2e with backend test instructions for local (#9005)

* local config

* update readme with running instructions

* linter fixes

* move tests to folder

* linting

* exculde typo

---------

Co-authored-by: Justin Comins <[email protected]>

webui/react/package.json

@@ -27,7 +27,7 @@
     "format-check:misc": "prettier --check \"src/**/*.{md,json}\"",
     "test": "vitest",
     "e2e": "playwright test",
-    "test:coverage": "vitest --run --coverage --silent",
+    "test:coverage": "vitest --run --coverage --silent --exclude \"src/e2e/tests/**\"",
     "analyze": "source-map-explorer --no-border-checks 'build/assets/*.js'",
     "unimported": "unimported"
   },

webui/react/playwright.config.ts

@@ -26,7 +26,16 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' }
+    },
+
+    {
+      name: 'chromium-no-cors',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome', 
+      bypassCSP: true,
+      launchOptions: {
+        args: ['--disable-web-security']
+      }},
     },
 
     {
@@ -78,7 +87,8 @@ export default defineConfig({
     baseURL: 'http://localhost:3001/',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure'
   },
 
   /* Run your local dev server before starting the tests */

webui/react/src/e2e/README.md

@@ -18,6 +18,17 @@ Deteremined AI uses [Playwright 🎭](https://playwright.dev/).
 
 \*\*Avoid using `make` command because it does not take env variables
 
+### Quick start testing using det deploy
+
+If you don't want to use dev cluster, you can use det deploy to initiate the backend. These commands should run and pass tests on chrome:
+
+1. `det deploy local cluster-up --det-version="0.29.0" --no-gpu --master-port=8080`
+   - use whatever det-version you want here.
+2. `SERVER_ADDRESS="http://localhost:8080" npm run build --prefix webui/react`
+3. Optional if you want an experiment created for the test: `det experiment create ./examples/tutorials/mnist_pytorch/const.yaml ./examples/tutorials/mnist_pytorch/`
+4. To run the tests: `CI=true PW_SERVER_ADDRESS="http://localhost:8080"  PW_USER_NAME="admin" PW_PASSWORD="" npm run e2e --prefix webui/react -- --project=chromium-no-cors`
+   - `CI=true` currently causes Playwright to start a frontend webserver for the test. If `CI=false` you'll need to do `npm run preview` manually and point the tests at the right port.
+
 ## CI
 
 CI is setup as `test-e2e-react` in `.circleci/config.yml`.

webui/react/src/e2e/global-fixtures.ts → webui/react/src/e2e/fixtures/global-fixtures.ts

@@ -1,7 +1,7 @@
 import { test as base } from '@playwright/test';
 
-import { AuthFixture } from './fixtures/auth.fixture';
-import { DevFixture } from './fixtures/dev.fixture';
+import { AuthFixture } from './auth.fixture';
+import { DevFixture } from './dev.fixture';
 
 type CustomFixtures = {
   dev: DevFixture;

webui/react/src/e2e/auth.spec.ts → webui/react/src/e2e/tests/auth.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 
-import { test } from './global-fixtures';
+import { test } from 'e2e/fixtures/global-fixtures';
 
 test.describe('Authentication', () => {
   test.beforeEach(async ({ dev }) => {

webui/react/src/e2e/navigation.spec.ts → webui/react/src/e2e/tests/navigation.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 
-import { test } from './global-fixtures';
+import { test } from 'e2e/fixtures/global-fixtures';
 
 test.describe('Navigation', () => {
   const USERNAME = process.env.PW_USER_NAME ?? '';