run e2e tests on every PR

Author: miparnisari

.github/workflows/test.yaml

@@ -9,20 +9,43 @@ on:
       - "*"
 jobs:
   test:
-    name: "Run Tests"
+    name: "Run Unit Tests"
     runs-on: "depot-ubuntu-24.04-small"
     steps:
-      - uses: "actions/checkout@v4"
+      - uses: "actions/checkout@v6"
         with:
           submodules: true
-      - uses: "authzed/action-spicedb@v1"
-        with:
-          version: "latest"
-      - uses: "actions/setup-node@v4"
+      - uses: "actions/setup-node@v6"
         with:
           node-version: 22
           cache-dependency-path: "yarn.lock"
           cache: "yarn"
       - uses: "bahmutov/npm-install@v1"
       - name: "Run tests"
         run: "yarn test"
+  e2e-tests:
+    name: "Run E2E Tests"
+    runs-on: "depot-ubuntu-24.04-arm-small" # Use a larger instance for E2E tests
+    steps:
+      - uses: "actions/checkout@v6"
+      - uses: "actions/setup-node@v6"
+        with:
+          node-version: 22
+          cache-dependency-path: "yarn.lock"
+          cache: "yarn"
+      - uses: "bahmutov/npm-install@v1"
+      - name: "Cypress run"
+        uses: "cypress-io/github-action@v6"
+        with:
+          browser: chrome
+          start: HTTPS=true vite preview -l info --strictPort --port 5173
+          wait-on: "http://localhost:5173"
+          wait-on-timeout: 120
+      - uses: "actions/upload-artifact@v4"
+        if: always()
+        with:
+          name: "cypress-artifacts" # see in "summary" tab of the workflow run
+          path: |
+            cypress/screenshots/
+            cypress/videos/
+            cypress/logs/

.gitignore

@@ -6,3 +6,5 @@ zed
 build
 .vercel
 .env
+cypress/screenshots
+cypress/videos

cypress.config.ts

@@ -1,16 +1,19 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  retries: 1,
-  defaultCommandTimeout: 10000,
-  requestTimeout: 11000,
-  responseTimeout: 60000,
+  retries: 0,
+  pageLoadTimeout: 120000, // 120 seconds
+  defaultCommandTimeout: 10000, // 10 seconds
+  requestTimeout: 11000, // 11 seconds
+  responseTimeout: 60000, // 60 seconds
   viewportHeight: 768,
   viewportWidth: 1400,
   chromeWebSecurity: false,
+  video: true,
+  screenshotOnRunFailure: true,
 
   e2e: {
-    baseUrl: "http://localhost:3000",
+    baseUrl: "http://localhost:5173",
     specPattern: ["cypress/integration/**/*.spec.{js,ts}", "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}"],
   },
 });

cypress/integration/basic.spec.js

@@ -17,12 +17,10 @@ describe("Playground", () => {
 
   it("displays header buttons", () => {
     cy.dismissTour();
-    cy.get("a").contains("Discuss on Discord").should("exist");
     cy.get("header > button").contains("Select Example Schema").should("exist");
     cy.get("header > button").contains("Share").should("exist");
     cy.get("header > button").contains("Download").should("exist");
     cy.get("header > button").contains("Load From File").should("exist");
-    cy.contains("Sign In To Import").should("exist");
   });
 
   it("default validation succeeds", () => {

cypress/support/commands.js

@@ -40,7 +40,7 @@ Cypress.Commands.add("panelText", () => {
 Cypress.Commands.add("waitForWasm", () => {
   cy.waitUntil(() => cy.window().then((win) => !!win.runSpiceDBDeveloperRequest), {
     errorMsg: "WASM development package not loaded",
-    timeout: 30000,
+        timeout: 120000, // 120 seconds
     interval: 500,
   });
   return;

cypress/support/e2e.ts

@@ -17,12 +17,14 @@
 import "./commands";
 
 // Handle uncaught exceptions
-Cypress.on("uncaught:exception", (err) => {
-  // TODO: Ignore transient network errors until either browser caching
-  // or js fixtures are supported
-  // https://github.com/cypress-io/cypress/issues/18335
-  // https://github.com/cypress-io/cypress/issues/1271
-  if (err.message.includes("Uncaught NetworkError")) {
-    return false;
-  }
+Cypress.on("uncaught:exception", (err: Error) => {
+  // https://github.com/suren-atoyan/monaco-react/issues/440
+  // if (err.message.includes("operation is manually canceled")) {
+  //   return false; // Prevents Cypress from failing the test
+  // }
+  //   // https://github.com/cypress-io/cypress/issues/28400
+  //   if (err.message.match(`Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope'`)) {
+  //       return false;
+  //   }
+    return true; // Let other exceptions fail the test
 });

package.json

@@ -12,7 +12,7 @@
     "typecheck": "tsc --noEmit",
     "format": "oxfmt",
     "format:check": "oxfmt --check",
-    "cy:run": "cypress run --browser chrome",
+    "cy:run": "cypress run --browser chrome --headless",
     "cy:open": "cypress open",
     "update:deps": "./scripts/update-spicedb.sh && buf generate && ./scripts/update-zed.sh"
   },
@@ -95,7 +95,7 @@
     "@types/use-deep-compare-effect": "^1.5.1",
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "cypress": "^12.9.0",
+    "cypress": "15.4.0",
     "cypress-wait-until": "^1.7.2",
     "eslint": "^9.18.0",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -122,4 +122,4 @@
     ]
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

src/App.tsx

@@ -29,7 +29,7 @@ const rootRoute = createRootRoute({
   component: () => (
     <>
       <Outlet />
-      <TanStackRouterDevtools />
+      <TanStackRouterDevtools position={"bottom-right"} />
     </>
   ),
 });