chore: playwright remote config smoke tests (#1277)

Author: daniel-graham-amplitude

.github/workflows/e2e.yml

@@ -13,7 +13,7 @@ jobs:
     name: E2E Tests
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.52.0
+      image: mcr.microsoft.com/playwright:v1.55.0
 
     steps:
       - name: Check out git repository

package.json

@@ -31,6 +31,7 @@
     "test:examples": "jest --env=jsdom --coverage=false examples --setupFiles ./jest.setup.examples.js",
     "test:unit": "lerna run test --stream --ignore @amplitude/analytics-*-test",
     "test:e2e": "lerna run test --stream --scope @amplitude/analytics-*-test",
+    "test:e2e:remote-config": "sh packages/e2e-remote-config/remote-config-test.sh",
     "test:playwright": "lerna run test:playwright --stream",
     "test:playwright:ui": "playwright test --ui",
     "test:playwright:debug": "playwright test --debug",
@@ -41,7 +42,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
-    "@playwright/test": "^1.52.0",
+    "@nx/workspace": "^21.2.1",
+    "@playwright/test": "1.55.0",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.14",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
@@ -57,24 +59,23 @@
     "eslint-plugin-playwright": "^2.2.0",
     "express": "^4.18.2",
     "fake-indexeddb": "4.0.2",
+    "glob": "^10.3.10",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lerna": "^8.1.5",
     "lint-staged": "^13.1.0",
     "morgan": "^1.10.0",
     "nodemon": "^3.0.1",
+    "nx": "^21.2.1",
     "prettier": "^2.8.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
+    "tslib": "^2.4.1",
     "typedoc": "^0.23.22",
     "typescript": "^4.9.4",
     "vite": "^6.3.4",
-    "yargs": "^17.7.1",
-    "nx": "^21.2.1",
-    "@nx/workspace": "^21.2.1",
-    "glob": "^10.3.10",
-    "tslib": "^2.4.1"
+    "yargs": "^17.7.1"
   },
   "lint-staged": {
     "*.ts": [

packages/e2e-remote-config/README.md

@@ -0,0 +1,10 @@
+<p align="center">
+  <a href="https://amplitude.com" target="_blank" align="center">
+    <img src="https://static.amplitude.com/lightning/46c85bfd91905de8047f1ee65c7c93d6fa9ee6ea/static/media/amplitude-logo-with-text.4fb9e463.svg" width="280">
+  </a>
+  <br />
+</p>
+
+# E2E Remote Config
+
+A place for E2E tests that test the Remote Config functionality. Tests against a matrix of SDK versions and API Keys.

packages/e2e-remote-config/remote-config-test.sh

@@ -0,0 +1,44 @@
+# STAGING
+API_KEY="52fbe5356dc7490756a9c26591f2bb37"
+AMPLITUDE_VERSION="2.22.2"
+SERVER_ZONE="STAGING"
+SERVER_ZONE=$SERVER_ZONE API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+# API_KEY empty
+API_KEY="657954c4c37e22e8dc2af0413ac01e2b"
+SERVER_ZONE="US"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+# 2.11.0 -- first mionor version to support remote config for autocapture
+AMPLITUDE_VERSION="2.11.13"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+# 2.13.3 -- first minor version to set remote config fetch default=true
+AMPLITUDE_VERSION="2.13.3"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+# 2.17.12 -- first minor version to use the new Remote Config client
+AMPLITUDE_VERSION="2.22.2"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+# API_KEY nested
+API_KEY="77de0b7de6157d5e7ca409c81778f28e"
+AMPLITUDE_VERSION="2.11.13"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+AMPLITUDE_VERSION="2.13.3"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+AMPLITUDE_VERSION="2.22.2"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+# API_KEY default
+API_KEY="aafc4dd16b5bf88b1cf21693d97665d3"
+AMPLITUDE_VERSION="2.11.13"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+AMPLITUDE_VERSION="2.13.3"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts
+
+AMPLITUDE_VERSION="2.22.2"
+API_KEY=$API_KEY AMPLITUDE_VERSION=$AMPLITUDE_VERSION npx playwright test packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts

packages/e2e-remote-config/test/e2e/fetch-remote-config.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, no-restricted-globals */
+
+// parse query params
+const remoteConfigUrl = 'https://sr-client-cfg.amplitude.com/';
+const amplitudeVersion = process.env.AMPLITUDE_VERSION;
+const apiKey = process.env.API_KEY;
+const serverZone = process.env.SERVER_ZONE || 'US';
+
+let redirectedServerUrl = null;
+if (serverZone === 'STAGING') {
+  redirectedServerUrl = 'https://sr-client-cfg.stag2.amplitude.com/';
+} else if (serverZone === 'EU') {
+  redirectedServerUrl = 'https://sr-client-cfg.eu.amplitude.com/';
+}
+
+if (redirectedServerUrl && !redirectedServerUrl?.endsWith('/')) {
+  redirectedServerUrl += '/';
+}
+
+const LOCAL_SITE = 'http://localhost:5173';
+
+test.describe(`Fetch remote config: remoteConfigUrl=${redirectedServerUrl} sdkVersion=${amplitudeVersion || 'latest'} apiKey=${apiKey || 'default'}`, () => {
+  test('should fetch remote config', async ({ page }) => {
+    // intercept the fetch request to the remote config
+    let fullRemoteConfigUrl = remoteConfigUrl;
+    await page.route(`${remoteConfigUrl}**`, async (route) => {
+      if (redirectedServerUrl) {
+        // edit the request to redirect to the redirectedServerUrl
+        const request = route.request();
+        const newUrl = request.url().replace(remoteConfigUrl, redirectedServerUrl);
+        fullRemoteConfigUrl = newUrl;
+        await route.continue({ url: newUrl });
+      } else {
+        fullRemoteConfigUrl = route.request().url();
+        await route.continue();
+      }
+    });
+    const responsePattern = redirectedServerUrl ? `${redirectedServerUrl}**` : `${remoteConfigUrl}**`;
+    const fetchRemoteConfigPromise = page.waitForResponse(responsePattern);
+
+    // open the page with parameters to define version, api key and server zone
+    let queryParams: Record<string, string> = {};
+    if (amplitudeVersion) {
+      queryParams.amplitudeVersion = amplitudeVersion;
+    }
+    if (apiKey) {
+      queryParams.apiKey = apiKey;
+    }
+    queryParams.serverZone = serverZone;
+    await page.goto(`${LOCAL_SITE}/remote-config-test.html?${new URLSearchParams(queryParams).toString()}`);
+    const response = await fetchRemoteConfigPromise;
+    const body = await response.json();
+    expect(body.configs.analyticsSDK).toBeDefined();
+
+    // perform an interaction on the page to confirm it's still interactable
+    const interactiveButton = page.locator('#interactive-button');
+    const interactiveContent = page.locator('#interactive-content');
+    await expect(interactiveContent).toHaveText('This is the interactive section.');
+    await interactiveButton.click();
+    await expect(interactiveContent).toHaveText('Interactive content has been changed.');
+  });
+});

test-server/autocapture/element-interactions.html

@@ -265,7 +265,10 @@ <h2>Content Changing Button</h2>
         import.meta.env.VITE_AMPLITUDE_USER_ID || 'amplitude-typescript test user',
         {
           fetchRemoteConfig: false,
-          autocapture: true,
+          autocapture: {
+            elementInteractions: true,
+            frustrationInteractions,
+          },
         }
       );