Merge pull request #7162 from Shopify/psyw-0401-E2E-migrate-remaining-tests-to-use-new-infra

E2E: migrate tests to use new infra

Author: phyllis-sy-wu

.github/workflows/tests-pr.yml

@@ -219,7 +219,7 @@ jobs:
     name: 'E2E tests'
     if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
-    timeout-minutes: 15
+    timeout-minutes: 30
     continue-on-error: true
     steps:
       - uses: actions/checkout@v3
@@ -241,11 +241,9 @@ jobs:
       - name: Run E2E tests
         working-directory: packages/e2e
         env:
-          SHOPIFY_FLAG_CLIENT_ID: ${{ secrets.E2E_CLIENT_ID }}
           E2E_ACCOUNT_EMAIL: ${{ secrets.E2E_ACCOUNT_EMAIL }}
           E2E_ACCOUNT_PASSWORD: ${{ secrets.E2E_ACCOUNT_PASSWORD }}
           E2E_STORE_FQDN: ${{ secrets.E2E_STORE_FQDN }}
-          E2E_SECONDARY_CLIENT_ID: ${{ secrets.E2E_SECONDARY_CLIENT_ID }}
           E2E_ORG_ID: ${{ secrets.E2E_ORG_ID }}
         run: npx playwright test
       - name: Upload Playwright report

packages/e2e/.env.example

@@ -1,7 +1,3 @@
-# Required: Client ID of the primary test app (must be in the genghis account's org)
-# CI secret: E2E_CLIENT_ID
-SHOPIFY_FLAG_CLIENT_ID=
-
 # Required: Genghis account email for browser-based OAuth login
 # CI secret: E2E_ACCOUNT_EMAIL
 E2E_ACCOUNT_EMAIL=
@@ -14,6 +10,5 @@ E2E_ACCOUNT_PASSWORD=
 # CI secret: E2E_STORE_FQDN
 E2E_STORE_FQDN=
 
-# Optional: Client ID of a secondary app for config link tests
-# CI secret: E2E_SECONDARY_CLIENT_ID
-E2E_SECONDARY_CLIENT_ID=
+# Required: dedicated e2e org ID
+E2E_ORG_ID=

packages/e2e/data/invalid-tomls/bad-syntax.toml

@@ -1,5 +1,5 @@
 # Invalid TOML: malformed syntax (missing closing quote)
-client_id = "__E2E_CLIENT_ID__"
+client_id = "1234567890"
 name = "Bad Syntax App
 application_url = "https://example.com"
 embedded = true

packages/e2e/data/invalid-tomls/invalid-webhook.toml

@@ -1,5 +1,5 @@
 # Invalid TOML: bad webhook config (missing required uri)
-client_id = "__E2E_CLIENT_ID__"
+client_id = "1234567890"
 name = "Invalid Webhook App"
 application_url = "https://example.com"
 embedded = true

packages/e2e/data/invalid-tomls/wrong-type.toml

@@ -1,5 +1,5 @@
 # Invalid TOML: wrong types for known fields
-client_id = "__E2E_CLIENT_ID__"
+client_id = "1234567890"
 name = "Wrong Type App"
 application_url = "https://example.com"
 embedded = "not-a-boolean"

packages/e2e/data/valid-app/shopify.app.toml

@@ -1,7 +1,7 @@
 # Comprehensive shopify.app.toml for E2E regression testing
-# client_id is injected at runtime by the toml-app fixture
-client_id = "__E2E_CLIENT_ID__"
-name = "E2E TOML Regression Test"
+# client_id and name are patched at runtime via injectFixtureToml()
+client_id = "placeholder"
+name = "placeholder"
 application_url = "https://example.com"
 embedded = true
 

packages/e2e/helpers/browser-login.ts

@@ -1,3 +1,4 @@
+import {BROWSER_TIMEOUT} from '../setup/constants.js'
 import type {Page} from '@playwright/test'
 
 /**
@@ -23,24 +24,50 @@ async function fillSensitive(page: Page, selector: string, value: string): Promi
  * Completes the Shopify OAuth login flow on a Playwright page.
  */
 export async function completeLogin(page: Page, loginUrl: string, email: string, password: string): Promise<void> {
+  // Disable WebAuthn so passkey/security key system dialogs never appear when headed
+  const cdp = await page.context().newCDPSession(page)
+  await cdp.send('WebAuthn.enable', {enableUI: false})
+
   await page.goto(loginUrl)
 
   try {
     // Fill in email
-    await page.waitForSelector('input[name="account[email]"], input[type="email"]', {timeout: 60_000})
+    await page.waitForSelector('input[name="account[email]"], input[type="email"]', {timeout: BROWSER_TIMEOUT.max})
     await fillSensitive(page, 'input[name="account[email]"], input[type="email"]', email)
     await page.locator('button[type="submit"]').first().click()
 
+    // Handle passkey prompt — navigate to password login if needed
+    const passwordInput = page.locator('input[name="account[password]"], input[type="password"]')
+    const differentMethodBtn = page.locator('text=Log in using a different method')
+
+    // Wait for either password field or passkey page
+    await Promise.race([
+      passwordInput.waitFor({timeout: BROWSER_TIMEOUT.max}),
+      differentMethodBtn.waitFor({timeout: BROWSER_TIMEOUT.max}),
+    ]).catch(() => {})
+
+    // If passkey page shown, navigate to password login
+    if (await differentMethodBtn.isVisible({timeout: BROWSER_TIMEOUT.short}).catch(() => false)) {
+      await differentMethodBtn.click()
+      await page.waitForTimeout(BROWSER_TIMEOUT.short)
+
+      const continueWithPassword = page.locator('text=Continue with password')
+      if (await continueWithPassword.isVisible({timeout: BROWSER_TIMEOUT.medium}).catch(() => false)) {
+        await continueWithPassword.click()
+        await page.waitForTimeout(BROWSER_TIMEOUT.short)
+      }
+    }
+
     // Fill in password
-    await page.waitForSelector('input[name="account[password]"], input[type="password"]', {timeout: 60_000})
+    await passwordInput.waitFor({timeout: BROWSER_TIMEOUT.max})
     await fillSensitive(page, 'input[name="account[password]"], input[type="password"]', password)
     await page.locator('button[type="submit"]').first().click()
 
     // Handle any confirmation/approval page
-    await page.waitForTimeout(3000)
+    await page.waitForTimeout(BROWSER_TIMEOUT.medium)
     try {
       const btn = page.locator('button[type="submit"]').first()
-      if (await btn.isVisible({timeout: 5000})) await btn.click()
+      if (await btn.isVisible({timeout: BROWSER_TIMEOUT.long})) await btn.click()
       // eslint-disable-next-line no-catch-all/no-catch-all
     } catch (_error) {
       // No confirmation page — expected

packages/e2e/package.json

@@ -29,7 +29,9 @@
     }
   },
   "devDependencies": {
+    "@iarna/toml": "2.2.5",
     "@playwright/test": "^1.50.0",
+    "@shopify/toml-patch": "0.3.0",
     "@types/node": "18.19.70",
     "dotenv": "16.4.7",
     "execa": "^7.2.0",

packages/e2e/playwright.config.ts

@@ -1,4 +1,5 @@
 /* eslint-disable line-comment-position */
+import {TEST_TIMEOUT} from './setup/constants.js'
 import {config} from 'dotenv'
 import {defineConfig} from '@playwright/test'
 
@@ -14,8 +15,8 @@ export default defineConfig({
   workers: 1,
   maxFailures: isCI ? 3 : 0, // Stop early in CI after 3 failures
   reporter: isCI ? [['html', {open: 'never'}], ['list']] : [['list']],
-  timeout: 3 * 60 * 1000, // 3 minutes per test
-  globalTimeout: 15 * 60 * 1000, // 15 minutes total
+  timeout: TEST_TIMEOUT.default, // Heavy tests override via test.setTimeout()
+  globalTimeout: 20 * 60 * 1000,
 
   use: {
     trace: isCI ? 'on' : 'off',