✅ [RUM-17233] Add Shopify checkout views and actions e2e test

.env.example

@@ -6,4 +6,7 @@ BS_ACCESS_KEY=xxx
 SF_LWC_CLIENT_ID=xxx
 SF_LWC_USERNAME=xxx
 SF_LWC_INSTANCE_URL=xxx
-SF_LWC_JWT_PRIVATE_KEY_B64=xxx
+SF_LWC_JWT_PRIVATE_KEY_B64=xxx
+
+# Shopify credentials
+SHOPIFY_STORE_PASSWORD=xxx

.gitlab-ci.yml

@@ -254,7 +254,8 @@ e2e:
     - yarn build:apps
     # Browsers are pre-installed in the CI image. If playwright (current or pinned 1.40.1)
     # is upgraded without rebuilding the image, this job will crash — rebuild the image to fix it.
-    - FORCE_COLOR=1 PW_BROWSER=$BROWSER yarn test:e2e --project=$BROWSER
+    # Shopify is excluded here: it only runs on a schedule (see e2e-shopify-scheduled)
+    - FORCE_COLOR=1 PW_BROWSER=$BROWSER yarn test:e2e --project=$BROWSER --grep-invert "shopify"
   after_script:
     - node ./scripts/test/export-test-result.ts e2e
 
@@ -633,6 +634,30 @@ api-performance-benchmark:
     - yarn
     - node ./scripts/api-performance/index.ts
 
+########################################################################################################################
+# Shopify e2e (scheduled, against a live external store)
+########################################################################################################################
+
+e2e-shopify-scheduled:
+  stage: task
+  extends:
+    - .base-configuration
+    - .resource-allocation-4-cpus
+  only:
+    variables:
+      - $TARGET_TASK_NAME == "e2e-shopify-scheduled"
+  artifacts:
+    when: always
+    reports:
+      junit: test-report/e2e/*.xml
+  script:
+    - yarn
+    - yarn build
+    - yarn build:apps
+    - FORCE_COLOR=1 PW_BROWSER=chromium yarn test:e2e --project=chromium -g "shopify"
+  after_script:
+    - node ./scripts/test/export-test-result.ts e2e
+
 ########################################################################################################################
 # Check expired telemetry
 ########################################################################################################################

scripts/lib/secrets.ts

@@ -111,6 +111,10 @@ export function getSfLwcJwtPrivateKey(): string {
   return process.env.SF_LWC_JWT_PRIVATE_KEY_B64 ?? getSecretKey('ci.browser-sdk.sf_lwc_jwt_private_key_b64')
 }
 
+export function getShopifyStorePassword(): string {
+  return process.env.SHOPIFY_STORE_PASSWORD ?? getSecretKey('ci.browser-sdk.shopify_store_password')
+}
+
 function getSecretKey(name: string): string {
   return command`
     aws ssm get-parameter --region=us-east-1 --with-decryption --query=Parameter.Value --out=text --name=${name}

test/e2e/lib/framework/createTest.ts

@@ -23,12 +23,21 @@ import {
 } from '../helpers/playwright'
 import { buildSalesforceUrl } from './buildSalesforceUrl'
 import type { SalesforceApp } from './buildSalesforceUrl'
+import { SHOPIFY_STORE_URL, unlockShopifyStorePassword } from './shopify'
 import { IntakeRegistry } from './intakeRegistry'
 import { flushEvents } from './flushEvents'
 import type { Servers } from './httpServers'
 import { getTestServers, waitForServersIdle } from './httpServers'
 import type { CallerLocation, EventBridgeOptions, SetupFactory, SetupOptions, UrlHook } from './pageSetups'
-import { html, DEFAULT_SETUPS, npmSetup, appSetup, formatConfiguration, salesforceSetup } from './pageSetups'
+import {
+  html,
+  DEFAULT_SETUPS,
+  npmSetup,
+  appSetup,
+  formatConfiguration,
+  salesforceSetup,
+  shopifySetup,
+} from './pageSetups'
 import { createDatadogHttpApi } from './serverApps/datadogHttpApi'
 import type { DatadogHttpApiControl } from './serverApps/datadogHttpApi'
 import { createMockServerApp } from './serverApps/mock'
@@ -116,6 +125,7 @@ class TestBuilder {
   } = {}
   private worker: Worker | undefined
   private salesforceApp: SalesforceApp | undefined = undefined
+  private shopifyApp = false
 
   constructor(
     private title: string,
@@ -283,6 +293,15 @@ class TestBuilder {
     return this
   }
 
+  withShopifyApp() {
+    this.shopifyApp = true
+    this.setups = [{ factory: shopifySetup }]
+    this.baseUrlHooks.push((baseUrl) => {
+      baseUrl.href = SHOPIFY_STORE_URL
+    })
+    return this
+  }
+
   withHostName(hostName: string) {
     this.baseUrlHooks.push((baseUrl) => {
       baseUrl.hostname = hostName
@@ -313,6 +332,7 @@ class TestBuilder {
       callerLocation: this.callerLocation,
       mockClock: this.mockClock,
       salesforceApp: this.salesforceApp,
+      shopifyApp: this.shopifyApp,
     }
 
     if (this.alsoRunWithRumSlim) {
@@ -534,7 +554,7 @@ function createTestContext(
 
 async function setUpTest(
   browserLogsManager: BrowserLogsManager,
-  { mockClock }: SetupOptions,
+  { mockClock, shopifyApp }: SetupOptions,
   { baseUrl, page, browserContext }: TestContext
 ) {
   browserContext.on('console', (msg) => {
@@ -543,6 +563,7 @@ async function setUpTest(
       message: msg.text(),
       source: 'console',
       timestamp: Date.now(),
+      url: msg.location().url,
     })
   })
 
@@ -563,6 +584,11 @@ async function setUpTest(
     }
   }
   await page.goto(baseUrl)
+
+  if (shopifyApp) {
+    await unlockShopifyStorePassword(page)
+  }
+
   await waitForServersIdle()
 }
 

test/e2e/lib/framework/pageSetups.ts

@@ -37,6 +37,7 @@ export interface SetupOptions {
   callerLocation?: CallerLocation
   mockClock: boolean
   salesforceApp: SalesforceApp | undefined
+  shopifyApp: boolean
 }
 
 export interface CallerLocation {
@@ -304,22 +305,40 @@ export function microfrontendSetup(options: SetupOptions, servers: Servers) {
   })
 }
 
-// Salesforce apps don't serve a locally-generated page body; this factory only drives the
-// page-side setup needed to init RUM on the remote Salesforce page.
+// Salesforce and Shopify apps don't serve a locally-generated page body; this factory only
+// intercepts the remote bundle request and injects the RUM configuration read by the app's
+// own init snippet/component, via globals set on every new document
+async function interceptRemoteBundleAndConfigureRum(
+  page: Page,
+  urlPattern: RegExp,
+  resolveFilePath: (url: string) => string,
+  options: SetupOptions,
+  servers: Servers,
+  headers?: Record<string, string>
+): Promise<void> {
+  await page.route(urlPattern, async (route) => {
+    await route.fulfill({
+      body: await readFile(resolveFilePath(route.request().url())),
+      contentType: 'application/javascript',
+      headers,
+    })
+  })
+
+  if (options.rum) {
+    await page.addInitScript(
+      `window.RUM_CONFIGURATION = ${formatConfiguration(options.rum, servers)}
+      window.RUM_CONTEXT = ${JSON.stringify(options.context)}`
+    )
+  }
+}
+
 export async function salesforceSetup(options: SetupOptions, servers: Servers, page: Page): Promise<string> {
   const salesforceAppDirectory = options.salesforceApp === 'experience-cloud' ? 'sf-experience-app' : 'sf-lwc-app'
   const salesforceBundlePath = resolve(
     __dirname,
     `../../../apps/${salesforceAppDirectory}/force-app/main/default/staticresources/datadog_rum_salesforce.js`
   )
 
-  await page.route(/\/resource(?:\/[^/?#]+)?\/datadog_rum_salesforce(?:\.js)?(?:[/?#].*)?$/, async (route) => {
-    await route.fulfill({
-      body: await readFile(salesforceBundlePath),
-      contentType: 'application/javascript',
-    })
-  })
-
   if (options.salesforceApp === 'lwc') {
     const { accessToken, instanceUrl } = await getSalesforceLwcSession()
     await page.context().addCookies([
@@ -331,15 +350,41 @@ export async function salesforceSetup(options: SetupOptions, servers: Servers, p
     ])
   }
 
-  if (options.rum) {
-    // Both sf-lwc-app and sf-experience-app have a committed datadogInit LWC that reads
-    // these globals and calls DD_RUM.init. On experience-cloud, that component only runs
-    // when the page is loaded with init=true.
-    await page.addInitScript(
-      `window.RUM_CONFIGURATION = ${formatConfiguration(options.rum, servers)}
-      window.RUM_CONTEXT = ${JSON.stringify(options.context)}`
-    )
-  }
+  // Both sf-lwc-app and sf-experience-app have a committed datadogInit LWC that reads the
+  // injected globals and calls DD_RUM.init. On experience-cloud, that component only runs
+  // when the page is loaded with init=true.
+  await interceptRemoteBundleAndConfigureRum(
+    page,
+    /\/resource(?:\/[^/?#]+)?\/datadog_rum_salesforce(?:\.js)?(?:[/?#].*)?$/,
+    () => salesforceBundlePath,
+    options,
+    servers
+  )
+  return ''
+}
+
+// Matches the CDN URL used by the store's Theme Liquid snippet and Custom Pixel for the main
+// bundle and its dynamically-imported chunks (e.g. the session replay recorder), served from
+// `https://www.datadoghq-browser-agent.com/<site>/v<major>/[chunks/]<name->]datadog-rum-shopify.js`
+const SHOPIFY_ASSET_URL_PATTERN =
+  /datadoghq-browser-agent\.com\/[^/]+\/v\d+\/(chunks\/)?([\w-]*datadog-rum-shopify\.js)(?:[?#].*)?$/
+
+export async function shopifySetup(options: SetupOptions, servers: Servers, page: Page): Promise<string> {
+  const shopifyBundleDir = resolve(__dirname, '../../../../packages/browser-rum-shopify/bundle')
+
+  await interceptRemoteBundleAndConfigureRum(
+    page,
+    SHOPIFY_ASSET_URL_PATTERN,
+    (url) => {
+      const [, chunksSegment, fileName] = SHOPIFY_ASSET_URL_PATTERN.exec(url) || []
+      return resolve(shopifyBundleDir, chunksSegment || '', fileName)
+    },
+    options,
+    servers,
+    // The snippets load the script with `crossOrigin = 'anonymous'`, so the browser enforces
+    // CORS on this response even though it never leaves the machine.
+    { 'access-control-allow-origin': '*' }
+  )
   return ''
 }
 

test/e2e/lib/framework/shopify.ts

@@ -0,0 +1,19 @@
+import type { Page } from '@playwright/test'
+import { getShopifyStorePassword } from '../../../../scripts/lib/secrets.ts'
+
+// A Datadog-owned dev store, password-protected, used only to exercise browser-rum-shopify
+// against a real storefront + checkout + Custom Pixel sandbox.
+export const SHOPIFY_STORE_URL = 'https://custom-pixel-e2e.myshopify.com/'
+
+// Dev stores gate every page behind a storefront password until unlocked for the session.
+const PASSWORD_PATH = /\/password\/?$/
+
+export async function unlockShopifyStorePassword(page: Page): Promise<void> {
+  if (!PASSWORD_PATH.test(new URL(page.url()).pathname)) {
+    return
+  }
+
+  await page.getByRole('textbox', { name: /password/i }).fill(getShopifyStorePassword())
+  await page.getByRole('button', { name: /enter/i }).click()
+  await page.waitForURL((url) => !PASSWORD_PATH.test(url.pathname))
+}

test/e2e/lib/helpers/browser.ts

@@ -33,6 +33,7 @@ export interface BrowserLog {
   message: string
   source: string
   timestamp: number
+  url?: string
 }
 
 const IGNORE_LOG_MESSAGES = [