fix(e2e): ensure tests run in dashboard and correct org when not in CI

Author: cngonzalez

apps/kitchensink-react/playwright.config.ts

@@ -1,15 +1,22 @@
 import {createPlaywrightConfig} from '@repo/e2e'
 
+const isWebkitProject =
+  process.argv.includes('--project=webkit') || process.argv.some((arg) => arg.includes('webkit'))
+
 export default createPlaywrightConfig({
   testDir: './e2e',
   /* Run your local dev server before starting the tests */
   ...(process.env['CI']
     ? {} // In CI, don't start a webServer since it's started manually
     : {
         webServer: {
-          command: 'pnpm dev --mode e2e',
+          command: isWebkitProject ? 'pnpm exec vite --port 3333' : 'pnpm dev',
           reuseExistingServer: true,
           stdout: 'pipe',
+          env: {
+            // Pass e2e organization ID to sanity dev
+            SDK_E2E_ORGANIZATION_ID: process.env['SDK_E2E_ORGANIZATION_ID'] || '',
+          },
         },
       }),
 })

apps/kitchensink-react/sanity.cli.ts

@@ -9,7 +9,8 @@ import {
 
 export default defineCliConfig({
   app: {
-    organizationId: 'oblZgbTFj',
+    // Use e2e organization ID if provided, otherwise use dev organization ID
+    organizationId: process.env['SDK_E2E_ORGANIZATION_ID'] || 'oblZgbTFj',
     entry: './src/App.tsx',
     id: 'wkyoigmzawwnnwx458zgoh46',
   },

apps/kitchensink-react/vite.config.ts

@@ -12,7 +12,8 @@ export default defineConfig(({mode}) => {
   const rootDir = resolve(process.cwd(), '../..')
   const env = loadEnv(mode, rootDir, '')
 
-  const isE2E = mode === 'e2e'
+  // Check if we're in e2e mode - either explicitly set or if SDK_E2E_ORGANIZATION_ID is present
+  const isE2E = mode === 'e2e' || !!process.env['SDK_E2E_ORGANIZATION_ID']
 
   return {
     server: {

package.json

@@ -37,6 +37,8 @@
     "test:coverage": "vitest run --coverage",
     "test:coverage:open": "open coverage/index.html",
     "test:e2e": "turbo run test:e2e",
+    "test:e2e:dashboard": "turbo run test:e2e --filter=@sanity/kitchensink-react -- --project=chromium --project=firefox",
+    "test:e2e:webkit": "turbo run test:e2e --filter=@sanity/kitchensink-react -- --project=webkit",
     "test:watch": "vitest watch",
     "ts:check": "turbo run ts:check --filter='./packages/*' --filter='./apps/*'",
     "depcheck": "DEPCHECK=true knip",

packages/@repo/e2e/README.md

@@ -38,23 +38,24 @@ test('can click a button', async ({page, getPageContext}) => {
 
 ## Running tests
 
-To run E2E tests run the following commands from the root of the project
+Right now, tests are split into two separate commands to make local testing easier. This is because we run our tests in the Dashboard, and Safari struggles with an iframed app in localhost. To run E2E tests run the following commands from the root of the project
 
 - Run all the tests
 
   ```sh
-  pnpm test:e2e
+  pnpm test:e2e:dashboard
+  pnpm test:e2e:webkit
   ```
 
 - Run files that have my-spec or my-spec-2 in the file name
 
   ```sh
-  pnpm test:e2e -- my-spec my-spec-2
+  pnpm test:e2e:dashboard -- my-spec my-spec-2
   ```
 
 - For help, run
   ```sh
-  pnpm test:e2e -- --help
+  pnpm test:e2e:dashboard -- --help
   ```
 
 Other useful helper commands

packages/@repo/e2e/src/helpers/pageContext.ts

@@ -9,7 +9,10 @@ export type PageContext = Pick<Page, 'getByTestId' | 'getByText' | 'getByRole' |
   context: Page | FrameLocator
 }
 
-const DASHBOARD_PROJECTS = ['dashboard-chromium']
+// Webkit is excluded from dashboard tests because webkit blocks script execution
+// in sandboxed iframes without 'allow-scripts', and the dashboard creates
+// sandboxed iframes that webkit cannot execute JavaScript in
+const DASHBOARD_PROJECTS = ['chromium', 'firefox']
 
 /**
  * Determines if we're in a dashboard context by checking the project name

packages/@repo/e2e/src/index.ts

@@ -9,9 +9,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const SETUP_DIR = path.join(path.dirname(__dirname), 'src', 'setup')
 const TEARDOWN_DIR = path.join(path.dirname(__dirname), 'src', 'teardown')
 const AUTH_FILE = path.join(path.dirname(__dirname), '.auth', 'user.json')
-const BASE_URL = 'http://localhost:3333/'
 
 const {CI, SDK_E2E_ORGANIZATION_ID} = getE2EEnv()
+const BASE_URL = `https://www.sanity.work/@${SDK_E2E_ORGANIZATION_ID}/application/__dev/`
 
 /**
  * @internal
@@ -65,15 +65,13 @@ export const basePlaywrightConfig: PlaywrightTestConfig = {
     },
     {
       name: 'webkit',
-      use: {...devices['Desktop Safari'], storageState: AUTH_FILE, baseURL: BASE_URL},
-      dependencies: ['setup'],
-    },
-    {
-      name: 'dashboard-chromium',
       use: {
-        ...devices['Desktop Chrome'],
+        ...devices['Desktop Safari'],
         storageState: AUTH_FILE,
-        baseURL: `https://www.sanity.work/@${SDK_E2E_ORGANIZATION_ID}/application/__dev/`,
+        // Webkit cannot execute JavaScript in sandboxed iframes without 'allow-scripts'
+        // The dashboard creates sandboxed iframes for localhost apps that webkit cannot use
+        // So webkit runs as standalone (localhost) instead of in the dashboard
+        baseURL: 'http://localhost:3333/',
       },
       dependencies: ['setup'],
     },

packages/@repo/e2e/src/setup/auth.setup.ts

@@ -44,7 +44,7 @@ const authenticateUser = async (context: BrowserContext, config: AuthConfig) =>
   await page.goto(loginUrl.toString())
 
   // Wait for the redirect to complete AND network to be idle
-  await Promise.all([page.waitForURL(config.expectedRedirectUrl)])
+  await page.waitForURL(config.expectedRedirectUrl)
 
   await page.close()
 }
@@ -68,13 +68,12 @@ setup('setup authentication', async ({browser}) => {
   const context = await browser.newContext()
 
   try {
-    // Authenticate for standalone apps
+    // Authenticate for standalone (webkit)
     await authenticateUser(context, {
       origin: 'http://localhost:3333',
       expectedRedirectUrl: 'http://localhost:3333',
     })
-
-    // Authenticate for embedded apps (Dashboard)
+    // Authenticate for Dashboard (other browsers)
     await authenticateUser(context, {
       origin: 'https://www.sanity.work/api/dashboard/authenticate',
       expectedRedirectUrl: `https://www.sanity.work/@${env.SDK_E2E_ORGANIZATION_ID}`,

turbo.json

@@ -28,8 +28,8 @@
       "dependsOn": ["^build"],
       "outputs": ["docs/**"]
     },
-    "check-types": {
-      "dependsOn": ["^check-types"]
+    "ts:check": {
+      "dependsOn": ["^ts:check"]
     },
     "clean": {},
     "cleanup": {