enable use of custom data-test-id (#706)

* use custom data-test * Update __tests__/core/gatherer.test.ts * Update __tests__/core/gatherer.test.ts
elastic · Feb 23, 2023 · 46be5eb · 46be5eb
1 parent cbf4c4e
commit 46be5eb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/__tests__/core/gatherer.test.ts b/__tests__/core/gatherer.test.ts
@@ -164,6 +164,41 @@ describe('Gatherer', () => {
     });
   });
 
+  describe('Set Test ID Attribute', () => {
+    it('uses default when not set', async () => {
+      const driver = await Gatherer.setupDriver({
+        wsEndpoint,
+      });
+      const { page } = driver;
+      await page.goto(server.TEST_PAGE);
+      await page.setContent(
+        '<a target=_blank rel=noopener href="/popup.html" data-testid="username-button">Click me</a>'
+      );
+      expect(await page.getByTestId('username-button').isVisible()).toEqual(
+        true
+      );
+      await Gatherer.dispose(driver);
+      await Gatherer.stop();
+    });
+
+    it('uses custom when provided', async () => {
+      const driver = await Gatherer.setupDriver({
+        wsEndpoint,
+        playwrightOptions: { testIdAttribute: 'data-test-subj' },
+      });
+      const { page } = driver;
+      await page.goto(server.TEST_PAGE);
+      await page.setContent(
+        '<a target=_blank rel=noopener href="/popup.html" data-test-subj="username-button">Click me</a>'
+      );
+      expect(await page.getByTestId('username-button').isVisible()).toEqual(
+        true
+      );
+      await Gatherer.dispose(driver);
+      await Gatherer.stop();
+    });
+  });
+
   describe('Network emulation', () => {
     const networkConditions = {
       downloadThroughput: megabitsToBytes(3),

diff --git a/src/common_types.ts b/src/common_types.ts
@@ -254,7 +254,8 @@ export type ProjectSettings = {
   space: string;
 };
 
-export type PlaywrightOptions = LaunchOptions & BrowserContextOptions;
+export type PlaywrightOptions = LaunchOptions &
+  BrowserContextOptions & { testIdAttribute?: string };
 export type SyntheticsConfig = {
   params?: Params;
   playwrightOptions?: PlaywrightOptions;

diff --git a/src/core/gatherer.ts b/src/core/gatherer.ts
@@ -28,6 +28,7 @@ import {
   ChromiumBrowser,
   BrowserContext,
   request as apiRequest,
+  selectors,
 } from 'playwright-chromium';
 import { PluginManager } from '../plugins';
 import { log } from './logger';
@@ -64,6 +65,10 @@ export class Gatherer {
     });
     Gatherer.setNetworkConditions(context, networkConditions);
 
+    if (playwrightOptions?.testIdAttribute) {
+      selectors.setTestIdAttribute(playwrightOptions.testIdAttribute);
+    }
+
     const page = await context.newPage();
     const client = await context.newCDPSession(page);
     const request = await apiRequest.newContext({ ...playwrightOptions });