test(e2e): run e2e test suite in Dashboard (#568)

* test(e2e): run test suite in dashboard

* chore(e2e): add README info for page context

* chore(e2e): simplify pagecontext type

Author: cngonzalez

.env.example

@@ -4,13 +4,25 @@
 # Copy this file to `.env.local` (`cp .env.example .env.local`) and fill in the values there
 # (`.env.local` is ignored by git)
 
-# This is a write token that allows Playwright to interact with the kitchensink app / project as an authenticated user
-# You can generate your own token by heading over to the tokens-section of
-# https://www.sanity.work/manage/, or 
-# by using your CLI user token (`SANITY_INTERNAL_ENV=staging sanity debug --secrets`)
-SDK_E2E_SESSION_TOKEN=
+# Because tests run both in Dashboard and in a standalone app, we need full user information
+# to login and interact with our APIs. You can find the details for SDK_E2E_USER_PASSWORD and
+# RECAPTCHA_E2E_STAGING_KEY in 1Password.
 SDK_E2E_PROJECT_ID=3j6vt2rg
+SDK_E2E_ORGANIZATION_ID=oFvj4MZWQ
+SDK_E2E_USER_ID=[email protected]
+SDK_E2E_USER_PASSWORD=
+RECAPTCHA_E2E_STAGING_KEY=
+
 
 # we test with multiple Resource configurations at once. For now, these are in the same project
 SDK_E2E_DATASET_0=production
 SDK_E2E_DATASET_1=testing
+
+
+# This is a write token that allows us to use the client to create / destroy / edit resources
+# (which Playwright will then load in the kitchensink app to test against)
+# You can generate your own token by heading over to the tokens section of
+# https://www.sanity.work/manage/, or
+# by using your CLI user token (`SANITY_INTERNAL_ENV=staging sanity debug --secrets`)
+SDK_E2E_SESSION_TOKEN=
+

.github/workflows/e2e.yml

@@ -62,11 +62,12 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium, firefox, webkit]
+        browser: [chromium, firefox, webkit, dashboard-chromium]
 
     # Shared env required by the SDK E2E helpers. Configure these in the repo → Settings → Secrets / Variables
     env:
       SDK_E2E_PROJECT_ID: ${{ secrets.SDK_E2E_PROJECT_ID }}
+      SDK_E2E_ORGANIZATION_ID: ${{ secrets.SDK_E2E_ORGANIZATION_ID }}
       SDK_E2E_DATASET_0: ${{ github.event_name == 'pull_request' && format('pr-{0}-{1}-{2}', github.event.number, matrix.browser, github.run_id) || format('main-{0}-{1}', matrix.browser, github.run_id) }}
       SDK_E2E_DATASET_1: ${{ github.event_name == 'pull_request' && format('pr-{0}-{1}-secondary-{2}', github.event.number, matrix.browser, github.run_id) || format('main-{0}-secondary-{1}', matrix.browser, github.run_id) }}
       SDK_E2E_SESSION_TOKEN: ${{ secrets.SDK_E2E_SESSION_TOKEN }}
@@ -109,6 +110,13 @@ jobs:
         if: matrix.browser == 'webkit'
         run: pnpm exec playwright install-deps webkit
 
+      - name: 🚀 Start preview server
+        run: |
+          cd apps/kitchensink-react
+          pnpm build --mode e2e && pnpm run preview --mode e2e --port 3333 &
+          timeout 60 bash -c 'until curl -f -s http://localhost:3333 > /dev/null; do echo "Waiting for server..."; sleep 2; done'
+          echo "Server is ready!"
+
       - name: 🧪 Run E2E tests
         run: pnpm test:e2e -- --project ${{ matrix.browser }}
 

apps/kitchensink-react/e2e/authenticated.spec.ts

@@ -1,15 +1,17 @@
-// we may want to have our own unauthenticated fixture in the future.
 import {expect, test} from '@repo/e2e'
 
 test.describe('Authenticated', () => {
-  test('Kitchen sink loads when authenticated', async ({page}) => {
-    await page.goto('/')
+  test('Kitchen sink loads when authenticated', async ({page, getPageContext}) => {
+    await page.goto('./')
 
     // wait a bit -- the redirect can happen too quickly and then be misleading
     await page.waitForTimeout(1000)
 
+    // we may be in an iframe or just a page -- get the right locators
+    const pageContext = await getPageContext(page)
+
     // should be able to see the component beneath the AuthBoundary
-    await expect(page.getByTestId('project-auth-home')).toBeVisible()
+    await expect(pageContext.getByTestId('project-auth-home')).toBeVisible()
     // Verify we're authenticated by checking for the absence of the sign-in link
     await expect(page.getByRole('link', {name: 'Sign in with email'})).not.toBeVisible()
   })
@@ -18,8 +20,13 @@ test.describe('Authenticated', () => {
 // We might go for a dedicated unauthenticated fixture in the future
 // rather than just clearing the localStorage
 test.describe('Unauthenticated', () => {
-  test('Can test unauthenticated state', async ({page}) => {
-    await page.goto('/')
+  test('Can test unauthenticated state', async ({page, getPageContext}) => {
+    await page.goto('./')
+
+    const pageContext = await getPageContext(page)
+
+    // Skip this test if we're in dashboard context - auth is handled by the dashboard
+    test.skip(pageContext.isDashboard, 'Skipping unauthenticated test in dashboard context')
 
     await page.evaluate(() => {
       window.localStorage.clear()
@@ -28,8 +35,8 @@ test.describe('Unauthenticated', () => {
     await page.reload()
 
     // should not be able to see the component beneath the AuthBoundary
-    await expect(page.getByTestId('project-auth-home')).not.toBeVisible()
+    await expect(pageContext.getByTestId('project-auth-home')).not.toBeVisible()
     // The sign in link should be visible when not authenticated
-    await expect(page.getByRole('link', {name: 'Sign in with email'})).toBeVisible()
+    await expect(pageContext.getByRole('link', {name: 'Sign in with email'})).toBeVisible()
   })
 })

apps/kitchensink-react/e2e/document-editor.spec.ts

@@ -1,7 +1,7 @@
 import {expect, test} from '@repo/e2e'
 
 test.describe('Document Editor', () => {
-  test('can edit an author document', async ({page, createDocuments}) => {
+  test('can edit an author document', async ({page, createDocuments, getPageContext}) => {
     // Create an author document
     const {
       documentIds: [id],
@@ -14,26 +14,29 @@ test.describe('Document Editor', () => {
     ])
 
     // Navigate to the document editor
-    await page.goto('/document-editor')
+    await page.goto('./document-editor')
+
+    // we may be in an iframe or just a page -- get the right locators
+    const pageContext = await getPageContext(page)
 
     // Wait for the document to load
-    await page.getByTestId('document-id-input').fill(id.replace('drafts.', ''))
-    await page.getByTestId('load-document-button').click()
+    await pageContext.getByTestId('document-id-input').fill(id.replace('drafts.', ''))
+    await pageContext.getByTestId('load-document-button').click()
 
     // Wait for the document to be loaded and match expected initial values
     await expect(async () => {
-      const content = await page.getByTestId('document-content').textContent()
+      const content = await pageContext.getByTestId('document-content').textContent()
       const document = JSON.parse(content || '{}')
       expect(document.name).toBe('Test Author for document editor')
       expect(document.biography).toBe('This is a test biography')
     }).toPass({timeout: 5000})
 
     // Update content
-    await page.getByTestId('name-input').fill('Updated Author Name')
-    await page.getByTestId('name-input').press('Enter')
+    await pageContext.getByTestId('name-input').fill('Updated Author Name')
+    await pageContext.getByTestId('name-input').press('Enter')
 
     // Verify the changes are reflected
-    const updatedContent = await page.getByTestId('document-content').textContent()
+    const updatedContent = await pageContext.getByTestId('document-content').textContent()
     const updatedDocument = JSON.parse(updatedContent || '{}')
     expect(updatedDocument.name).toBe('Updated Author Name')
     expect(updatedDocument.biography).toBe('This is a test biography')

apps/kitchensink-react/e2e/document-list.spec.ts

@@ -1,7 +1,12 @@
 import {expect, test} from '@repo/e2e'
 
 test.describe('Document List', () => {
-  test('can list and update author documents', async ({page, getClient, createDocuments}) => {
+  test('can list and update author documents', async ({
+    page,
+    getClient,
+    createDocuments,
+    getPageContext,
+  }) => {
     const client = getClient()
 
     // Create 10 author documents in a single transaction
@@ -11,30 +16,35 @@ test.describe('Document List', () => {
         name: `Test Author ${i}`,
         biography: `This is a test biography for author ${i}`,
       })),
+      {asDraft: false},
     )
 
     // Query for the most recent document by _updatedAt
     // (it should be at the top of the list and thus visible in the viewport for the test)
     const mostRecentDoc = await client.fetch(
-      `*[_type == "author"] | order(_updatedAt desc)[0]{_id}`,
+      `*[_id in $documentIds] | order(_updatedAt desc)[0]{_id}`,
       {documentIds},
     )
-    const id = mostRecentDoc._id.replace('drafts.', '')
+
+    const id = mostRecentDoc._id
 
     // Navigate to the document list
-    await page.goto('/document-list')
+    await page.goto('./document-list')
+
+    // we may be in an iframe or just a page -- get the right locators
+    const pageContext = await getPageContext(page)
 
     // Wait for the target document to be visible
-    const targetDocumentPreview = page.getByTestId(`document-preview-${id}`)
+    const targetDocumentPreview = pageContext.getByTestId(`document-preview-${id}`)
     await targetDocumentPreview.waitFor()
     await expect(targetDocumentPreview).toBeVisible()
 
     // Update the document using the client
-    await client.patch(`drafts.${id}`).set({name: 'Updated Author Name'}).commit()
+    await client.patch(id).set({name: 'Updated Author Name'}).commit()
 
     // Wait for the document preview to update with the new name
     await expect(async () => {
-      const updatedDocumentPreview = page.getByTestId(`document-preview-${id}`)
+      const updatedDocumentPreview = pageContext.getByTestId(`document-preview-${id}`)
       await expect(updatedDocumentPreview).toBeVisible()
 
       const updatedDocumentTitle = await updatedDocumentPreview

apps/kitchensink-react/playwright.config.ts

@@ -7,8 +7,7 @@ export default createPlaywrightConfig({
     command: process.env['CI']
       ? 'pnpm build --mode e2e && pnpm preview --mode e2e --port 3333'
       : 'pnpm dev --mode e2e',
-    url: 'http://localhost:3333',
-    reuseExistingServer: !process.env['CI'],
+    reuseExistingServer: true,
     stdout: 'pipe',
   },
 })

packages/@repo/e2e/README.md

@@ -4,11 +4,38 @@
 
 The tests expect to find the below env variables. Either define them in your shell, or add them to the `.env.local` file in the repository root.
 
-- `SDK_E2E_SESSION_TOKEN`: As a developer running locally, you should use a user token. The client fixture also needs to use this token. Running `SANITY_INTERNAL_ENV=staging sanity debug --secrets` will give you your token provided you are logged in (`sanity login`).
+-- `SDK_E2E_SESSION_TOKEN`: The client fixture needs to use this token. Running `SANITY_INTERNAL_ENV=staging sanity debug --secrets` will give you your token provided you are logged in (`SANITY_INTERNAL_ENV=staging sanity login`).
+
 - `SDK_E2E_PROJECT_ID`: We use 3j6vt2rg internally
+- `SDK_E2E_ORGANIZATION_ID`: We use oFvj4MZWQ internally
+- `SDK_E2E_USER_ID`: [email protected]
+- `SDK_E2E_USER_PASSWORD`: found in 1Password
+- `RECAPTCHA_E2E_STAGING_KEY`: found in 1Password
 - `SDK_E2E_DATASET_0`=production
 - `SDK_E2E_DATASET_1`=testing
 
+## Writing tests
+
+@repo/e2e provides a specialized fixture for your tests, called `getPageContext`. This is because the tests run both standalone and in the Dashboard, meaning locators work a bit differently. Please use this fixture to ensure your tests work well in both environments. To do so, you should write your tests so that they do the following:
+
+1. Navigate to the route you intend to test on, i.e., `await page.goto('./my-route')` (otherwise Playwright will be at about:blank and not know anything about iframes or not)
+2. Use the `getPageContext` function with your page, like `const pageContext = await getPageContext(page)`
+3. Use the locators provided by `pageContext`, like `const button = pageContext.getByTestId('my-button')
+
+Here is a full example:
+
+```ts
+import {expect, test} from '@repo/e2e'
+
+test('can click a button', async ({page, getPageContext}) => {
+  await page.goto('./button-test-page')
+
+  const pageContext = await getPageContext(page)
+
+  await pageContext.getByTestId('my-button').click()
+})
+```
+
 ## Running tests
 
 To run E2E tests run the following commands from the root of the project
@@ -27,7 +54,7 @@ To run E2E tests run the following commands from the root of the project
 
 - For help, run
   ```sh
-  pnpm test:e2e --help
+  pnpm test:e2e -- --help
   ```
 
 Other useful helper commands
@@ -42,9 +69,6 @@ You can run your tests in your editor with the help of some useful editor plugin
 
 ### Running in CI mode
 
-These tests run in CI with a dedicated e2e test user. If you'd like to replicate that, you should add the following variables to your .env.local file:
+These tests run in CI with a built application (rather than dev server). It also runs its tests in the Dashboard. If you'd like to replicate that, you should add the following variables to your .env.local file:
 
 - `CI`: true
-- `SDK_E2E_USER_ID`: [email protected]
-- `SDK_E2E_USER_PASSWORD` (found in 1Password under "SDK e2e user Sanity login")
-- `RECAPTCHA_E2E_STAGING_KEY` (found in 1Password under "Legion E2E staging reCAPTCHA bypass token")

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

@@ -1,8 +1,9 @@
-import {test as base} from '@playwright/test'
+import {type Page, test as base} from '@playwright/test'
 import {type MultipleMutationResult, SanityClient} from '@sanity/client'
 
 import {getClient} from './helpers/clients'
 import {cleanupDocuments, createDocuments, type DocumentStub} from './helpers/documents'
+import {createPageContext, type PageContext} from './helpers/pageContext'
 
 interface SanityFixtures {
   createDocuments: (
@@ -11,6 +12,7 @@ interface SanityFixtures {
     dataset?: string,
   ) => Promise<MultipleMutationResult>
   getClient: (dataset?: string) => SanityClient
+  getPageContext: (page: Page) => Promise<PageContext>
 }
 
 /**
@@ -30,6 +32,13 @@ export const test = base.extend<SanityFixtures>({
   getClient: async ({}, use) => {
     await use(getClient)
   },
+  // eslint-disable-next-line no-empty-pattern
+  getPageContext: async ({}, use, testInfo) => {
+    const getPageContext = async (page: Page) => {
+      return await createPageContext(page, testInfo.project.name)
+    }
+    await use(getPageContext)
+  },
 })
 
 export {expect} from '@playwright/test'

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

@@ -8,7 +8,7 @@ const baseConfig = {
   projectId: env.SDK_E2E_PROJECT_ID,
   token: env.SDK_E2E_SESSION_TOKEN,
   useCdn: false,
-  apiVersion: '2021-08-31',
+  apiVersion: '2025-06-01',
   apiHost: 'https://api.sanity.work',
 }
 

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

@@ -3,6 +3,8 @@ import {loadEnvFiles} from './loadEnvFiles'
 interface E2EEnv {
   /** The project ID for the primary dataset */
   SDK_E2E_PROJECT_ID: string
+  /** The organization  ID for the project */
+  SDK_E2E_ORGANIZATION_ID: string
   /** The dataset for the primary dataset */
   SDK_E2E_DATASET_0: string
   /** The dataset for the secondary dataset (for multi-resource tests) */
@@ -12,11 +14,11 @@ interface E2EEnv {
   /** Whether we're running in CI */
   CI?: boolean
   /** E2E test user ID */
-  SDK_E2E_USER_ID?: string
+  SDK_E2E_USER_ID: string
   /** E2E test user password */
-  SDK_E2E_USER_PASSWORD?: string
+  SDK_E2E_USER_PASSWORD: string
   /** E2E test recaptcha key for CI */
-  RECAPTCHA_E2E_STAGING_KEY?: string
+  RECAPTCHA_E2E_STAGING_KEY: string
 }
 
 type KnownEnvVar = keyof E2EEnv
@@ -55,23 +57,18 @@ function findEnv(name: KnownEnvVar): string | undefined {
 export function getE2EEnv(): E2EEnv {
   const CI = findEnv('CI') === 'true'
   const SDK_E2E_PROJECT_ID = readEnv('SDK_E2E_PROJECT_ID')
+  const SDK_E2E_ORGANIZATION_ID = readEnv('SDK_E2E_ORGANIZATION_ID')
   const SDK_E2E_DATASET_0 = readEnv('SDK_E2E_DATASET_0')
   const SDK_E2E_DATASET_1 = readEnv('SDK_E2E_DATASET_1')
   const SDK_E2E_SESSION_TOKEN = readEnv('SDK_E2E_SESSION_TOKEN')
-
-  let SDK_E2E_USER_ID: string | undefined
-  let SDK_E2E_USER_PASSWORD: string | undefined
-  let RECAPTCHA_E2E_STAGING_KEY: string | undefined
-
-  if (CI) {
-    SDK_E2E_USER_ID = readEnv('SDK_E2E_USER_ID')
-    SDK_E2E_USER_PASSWORD = readEnv('SDK_E2E_USER_PASSWORD')
-    RECAPTCHA_E2E_STAGING_KEY = readEnv('RECAPTCHA_E2E_STAGING_KEY')
-  }
+  const SDK_E2E_USER_ID = readEnv('SDK_E2E_USER_ID')
+  const SDK_E2E_USER_PASSWORD = readEnv('SDK_E2E_USER_PASSWORD')
+  const RECAPTCHA_E2E_STAGING_KEY = readEnv('RECAPTCHA_E2E_STAGING_KEY')
 
   return {
     CI,
     SDK_E2E_PROJECT_ID,
+    SDK_E2E_ORGANIZATION_ID,
     SDK_E2E_DATASET_0,
     SDK_E2E_DATASET_1,
     SDK_E2E_SESSION_TOKEN,