Repository: elastic/synthetics
Pull request #461 (2022-02-22 14:57:58)

feat: add inline e2e test for real world page
Adds an inline browser monitor to test to Synthetics e2e tests.

This test is intended to replace the flaky test skipped here: https://github.com/elastic/synthetics/blob/main/__tests__/core/runner.test.ts#L701


Patch:
diff --git a/package-lock.json b/package-lock.json
index c064c7f..93fc644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@elastic/synthetics",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 1f04041..45f2f60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elastic/synthetics",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
   "description": "Elastic synthetic monitoring agent",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/core/gatherer.ts b/src/core/gatherer.ts
index 86f369b..fbdeda1 100644
--- a/src/core/gatherer.ts
+++ b/src/core/gatherer.ts
@@ -56,7 +56,7 @@ export class Gatherer {
     }
     const context = await Gatherer.browser.newContext({
       ...playwrightOptions,
-      userAgent: await Gatherer.getUserAgent(),
+      userAgent: await Gatherer.getUserAgent(playwrightOptions?.userAgent),
     });
     await Gatherer.setNetworkConditions(context, networkConditions);
 
@@ -65,10 +65,13 @@ export class Gatherer {
     return { browser: Gatherer.browser, context, page, client };
   }
 
-  static async getUserAgent() {
-    const session = await Gatherer.browser.newBrowserCDPSession();
-    const { userAgent } = await session.send('Browser.getVersion');
-    return userAgent + ' Elastic/Synthetics';
+  static async getUserAgent(userAgent?: string) {
+    const syntheticsIdentifier = ' Elastic/Synthetics';
+    if (!userAgent) {
+      const session = await Gatherer.browser.newBrowserCDPSession();
+      ({ userAgent } = await session.send('Browser.getVersion'));
+    }
+    return userAgent + syntheticsIdentifier;
   }
 
   static async setNetworkConditions(


Test patch:
diff --git a/__tests__/core/gatherer.test.ts b/__tests__/core/gatherer.test.ts
index 3b8740a..cbb638f 100644
--- a/__tests__/core/gatherer.test.ts
+++ b/__tests__/core/gatherer.test.ts
@@ -129,11 +129,11 @@ describe('Gatherer', () => {
     it('works with device emulation', async () => {
       const driver = await Gatherer.setupDriver({
         wsEndpoint,
-        playwrightOptions: { ...devices['Galaxy S9+'] },
+        playwrightOptions: { ...devices['iPhone 12 Pro Max'] },
       });
-      expect(await driver.page.evaluate(() => navigator.userAgent)).toContain(
-        ' Elastic/Synthetics'
-      );
+      const userAgent = await driver.page.evaluate(() => navigator.userAgent);
+      expect(userAgent).toContain('Elastic/Synthetics');
+      expect(userAgent).toContain('iPhone');
       await Gatherer.dispose(driver);
       await Gatherer.stop();
     });
diff --git a/__tests__/e2e/package.json b/__tests__/e2e/package.json
index 74f4a5f..7a49abc 100644
--- a/__tests__/e2e/package.json
+++ b/__tests__/e2e/package.json
@@ -13,6 +13,8 @@
   },
   "devDependencies": {
     "@elastic/synthetics": "file:../../",
-    "axios": "^0.21.0"
-  }
+    "axios": "^0.21.0",
+    "semver": "^7.3.5"
+  },
+  "dependencies": {}
 }
diff --git a/__tests__/e2e/synthetics.journey.ts b/__tests__/e2e/synthetics.journey.ts
index 9d49758..f5cd093 100644
--- a/__tests__/e2e/synthetics.journey.ts
+++ b/__tests__/e2e/synthetics.journey.ts
@@ -25,6 +25,9 @@
 
 import { beforeAll, journey, step } from '@elastic/synthetics';
 import axios from 'axios';
+import semver from 'semver';
+
+const stackVersion = process.env.STACK_VERSION.split('-')[0];
 
 beforeAll(async () => {
   await waitForElasticSearch();
@@ -188,6 +191,36 @@ journey('E2e test synthetics - browser', async ({ page }) => {
   });
 });
 
+if (semver.satisfies(stackVersion, '>=8.0.1')) {
+  journey('E2e test synthetics - browser - inline', async ({ page }) => {
+    const journeyName = 'Sample browser inline integration policy';
+
+    step('Go to synthetics integration page', async () => {
+      await goToSyntheticsIntegrationPage(page);
+    });
+
+    step('create an browser monitor', async () => {
+      await createIntegrationPolicyName({ page, policyName: journeyName });
+      await page.selectOption('[data-test-subj="syntheticsMonitorTypeField"]', 'browser');
+      await page.click('[data-test-subj="syntheticsSourceTab__inline"]');
+      await page.fill('[data-test-subj=codeEditorContainer] textarea', `
+        step('load homepage', async () => {
+          await page.goto('https://www.elastic.co');
+        });
+      `);
+      await confirmAndSavePolicy(page);
+    });
+
+    step('go to uptime', async () => {
+      await goToUptime(page);
+    });
+
+    step('wait for synthetics data', async () => {
+      await checkForSyntheticsData({ page, journeyName });
+    });
+  });
+}
+
 async function waitForElasticSearch() {
   console.info('Waiting for Elastic Search  to start');
   let esStatus = false;