[Observability Onboarding] Migrate e2e Playwright tests from oblt-pla…

…ywright repo (#203616)

Closes #199016

This change migrates and and expands tests from
[oblt-playwright](https://github.com/elastic/oblt-playwright) repo.

These tests are part of the [Nightly
workflow](https://github.com/elastic/ensemble/actions/workflows/nightly.yml)
and being run by an Ensemble story on the CI.

The Nightly workflow itself is still in development and does not support
some of the use cases, that's why kubernetes tests are skipped for now
in this PR.

See the `./README.md` on how to run the tests locally.

---------

Co-authored-by: kibanamachine <[email protected]>

packages/kbn-test/src/functional_test_runner/lib/config/run_check_ftr_configs_cli.ts

@@ -25,6 +25,10 @@ const THIS_REL = Path.relative(REPO_ROOT, THIS_PATH);
 const IGNORED_PATHS = [
   THIS_PATH,
   Path.resolve(REPO_ROOT, 'packages/kbn-test/src/jest/run_check_jest_configs_cli.ts'),
+  Path.resolve(
+    REPO_ROOT,
+    'x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/playwright.config.ts'
+  ),
 ];
 
 export async function runCheckFtrConfigsCli() {

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/.gitignore

@@ -0,0 +1,2 @@
+.playwright
+.env*

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/README.md

@@ -0,0 +1,25 @@
+# Observability Onboarding Playwright Tests
+
+These tests are part of the [Nightly CI workflow](https://github.com/elastic/ensemble/actions/workflows/nightly.yml) and do not run on PRs.
+
+Playwright tests are only responsible for UI checks and do not automate onboarding flows fully. On the CI, the missing parts (like executing code snippets on the host) are automated by Ensemble stories, but when running locally you need to do those steps manually.
+
+## Running The Tests Locally
+
+1. Run ES and Kibana
+2. Create a `.env` file in the `./x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/` directory with the following content (adjust the values like Kibana URL according yo your local setup):
+```bash
+KIBANA_BASE_URL = "http://localhost:5601/ftw"
+ELASTICSEARCH_HOST = "http://localhost:9200"
+KIBANA_USERNAME = "elastic"
+KIBANA_PASSWORD = "changeme"
+CLUSTER_ENVIRONMENT = local
+ARTIFACTS_FOLDER = ./.playwright
+```
+3. Run the `playwright test`
+```bash
+# Assuming the working directory is the root of the Kibana repo
+npx playwright test -c ./x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/playwright.config.ts --project stateful --reporter list --headed
+```
+4. Once the test reaches one of the required manual steps, like executing auto-detect command snippet, do the step manually.
+5. The test will proceed once the manual step is done.

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/lib/assert_env.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export function assertEnv(variable: unknown, message: string): asserts variable is string {
+  if (typeof variable !== 'string') {
+    throw new Error(message);
+  }
+}

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/lib/helpers.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Locator } from '@playwright/test';
+import { HeaderBar } from '../stateful/pom/components/header_bar.component';
+import { SpaceSelector } from '../stateful/pom/components/space_selector.component';
+
+type WaitForRes = [locatorIndex: number, locator: Locator];
+
+export async function waitForOneOf(locators: Locator[]): Promise<WaitForRes> {
+  const res = await Promise.race([
+    ...locators.map(async (locator, index): Promise<WaitForRes> => {
+      let timedOut = false;
+      await locator.waitFor({ state: 'visible' }).catch(() => (timedOut = true));
+      return [timedOut ? -1 : index, locator];
+    }),
+  ]);
+  if (res[0] === -1) {
+    throw new Error('No locator is visible before timeout.');
+  }
+  return res;
+}
+
+export async function spaceSelectorStateful(headerBar: HeaderBar, spaceSelector: SpaceSelector) {
+  const [index] = await waitForOneOf([headerBar.helpMenuButton(), spaceSelector.spaceSelector()]);
+  const selector = index === 1;
+  if (selector) {
+    await spaceSelector.selectDefault();
+    await headerBar.assertHelpMenuButton();
+  }
+}

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/lib/logger.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ToolingLog } from '@kbn/tooling-log';
+
+export const log: ToolingLog = new ToolingLog({
+  level: 'info',
+  writeTo: process.stdout,
+});

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/playwright.config.ts

@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import dotenv from 'dotenv';
+import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
+import { log } from './lib/logger';
+import { assertEnv } from './lib/assert_env';
+
+const dotEnvPath = process.env.DOTENV_PATH ?? path.join(__dirname, '.env');
+
+dotenv.config({ path: dotEnvPath });
+
+assertEnv(process.env.ARTIFACTS_FOLDER, 'ARTIFACTS_FOLDER is not defined.');
+
+export const STORAGE_STATE = path.join(__dirname, process.env.ARTIFACTS_FOLDER, '.auth/user.json');
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig({
+  testDir: './',
+  outputDir: './.playwright',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  // workers: 4,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['json'],
+    ['json', { outputFile: path.join(process.env.ARTIFACTS_FOLDER, 'results.json') }],
+  ],
+  /* Timeouts */
+  timeout: 400000,
+  expect: { timeout: 400000 },
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.KIBANA_BASE_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    testIdAttribute: 'data-test-subj',
+    permissions: ['clipboard-read'],
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'auth',
+      testMatch: '*stateful/auth.ts',
+      use: {
+        viewport: { width: 1920, height: 1080 },
+        launchOptions: {
+          logger: {
+            isEnabled: () => true,
+            log: (name, severity, message) => log.info(`[${severity}] ${name} ${message}`),
+          },
+        },
+      },
+    },
+    {
+      name: 'stateful',
+      testMatch: '*stateful/*.spec.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1920, height: 1200 },
+        storageState: STORAGE_STATE,
+        launchOptions: {
+          logger: {
+            isEnabled: () => true,
+            log: (name, severity, message) => log.info(`[${severity}] ${name} ${message}`),
+          },
+        },
+      },
+      dependencies: ['auth'],
+    },
+    {
+      name: 'teardown',
+      testMatch: 'teardown.setup.ts',
+      use: {
+        viewport: { width: 1920, height: 1080 },
+        storageState: STORAGE_STATE,
+        testIdAttribute: 'data-test-subj',
+        launchOptions: {
+          logger: {
+            isEnabled: () => true,
+            log: (name, severity, message) => log.info(`[${severity}] ${name} ${message}`),
+          },
+        },
+      },
+    },
+  ],
+});

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/stateful/auth.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { test as ess_auth, expect } from '@playwright/test';
+import { STORAGE_STATE } from '../playwright.config';
+import { waitForOneOf } from '../lib/helpers';
+import { log } from '../lib/logger';
+import { assertEnv } from '../lib/assert_env';
+
+const isLocalCluster = process.env.CLUSTER_ENVIRONMENT === 'local';
+
+ess_auth('Authentication', async ({ page }) => {
+  assertEnv(process.env.KIBANA_BASE_URL, 'KIBANA_BASE_URL is not defined.');
+  assertEnv(process.env.KIBANA_USERNAME, 'KIBANA_USERNAME is not defined.');
+  assertEnv(process.env.KIBANA_PASSWORD, 'KIBANA_PASSWORD is not defined.');
+
+  await page.goto(process.env.KIBANA_BASE_URL);
+  log.info(`...waiting for login page elements to appear.`);
+  if (!isLocalCluster) {
+    await page.getByRole('button', { name: 'Log in with Elasticsearch' }).click();
+  }
+  await page.getByLabel('Username').fill(process.env.KIBANA_USERNAME);
+  await page.getByLabel('Password', { exact: true }).click();
+  await page.getByLabel('Password', { exact: true }).fill(process.env.KIBANA_PASSWORD);
+  await page.getByRole('button', { name: 'Log in' }).click();
+
+  const [index] = await waitForOneOf([
+    page.getByTestId('helpMenuButton'),
+    page.getByText('Select your space'),
+    page.getByTestId('loginErrorMessage'),
+  ]);
+
+  const spaceSelector = index === 1;
+  const isAuthenticated = index === 0;
+
+  if (isAuthenticated) {
+    await page.context().storageState({ path: STORAGE_STATE });
+  } else if (spaceSelector) {
+    await page.getByRole('link', { name: 'Default' }).click();
+    await expect(page.getByTestId('helpMenuButton')).toBeVisible();
+    await page.context().storageState({ path: STORAGE_STATE });
+  } else {
+    log.error('Username or password is incorrect.');
+    throw new Error('Authentication is failed.');
+  }
+});

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/stateful/auto_detect.spec.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { test } from './fixtures/base_page';
+import { HostDetailsPage } from './pom/pages/host_details.page';
+import { assertEnv } from '../lib/assert_env';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`${process.env.KIBANA_BASE_URL}/app/observabilityOnboarding`);
+});
+
+test('Auto-detect logs and metrics', async ({ page, onboardingHomePage, autoDetectFlowPage }) => {
+  assertEnv(process.env.ARTIFACTS_FOLDER, 'ARTIFACTS_FOLDER is not defined.');
+
+  const fileName = 'code_snippet_logs_auto_detect.sh';
+  const outputPath = path.join(__dirname, '..', process.env.ARTIFACTS_FOLDER, fileName);
+
+  await onboardingHomePage.selectHostUseCase();
+  await onboardingHomePage.selectAutoDetectWithElasticAgent();
+
+  await autoDetectFlowPage.assertVisibilityCodeBlock();
+  await autoDetectFlowPage.copyToClipboard();
+
+  const clipboardData = (await page.evaluate('navigator.clipboard.readText()')) as string;
+
+  /**
+   * Ensemble story watches for the code snippet file
+   * to be created and then executes it
+   */
+  fs.writeFileSync(outputPath, clipboardData);
+
+  await autoDetectFlowPage.assertReceivedDataIndicator();
+  await autoDetectFlowPage.clickAutoDetectSystemIntegrationCTA();
+
+  /**
+   * Host Details pages open in a new tab, so it
+   * needs to be captured using the `popup` event.
+   */
+  const hostDetailsPage = new HostDetailsPage(await page.waitForEvent('popup'));
+
+  /**
+   * There is a glitch on the Hosts page where it can show "No data"
+   * screen even though data is available and it can show it with a delay
+   * after the Hosts page layout was loaded. This workaround waits for
+   * the No Data screen to be visible, and if so - reloads the page.
+   * If the No Data screen does not appear, the test can proceed normally.
+   * Seems like some caching issue with the Hosts page.
+   */
+  try {
+    await hostDetailsPage.noData().waitFor({ state: 'visible', timeout: 10000 });
+    await hostDetailsPage.page.waitForTimeout(2000);
+    await hostDetailsPage.page.reload();
+  } catch {
+    /* Ignore if "No Data" screen never showed up */
+  }
+
+  await hostDetailsPage.clickHostDetailsLogsTab();
+  await hostDetailsPage.assertHostDetailsLogsStream();
+});

x-pack/plugins/observability_solution/observability_onboarding/e2e/playwright/stateful/fixtures/base_page.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { test as base } from '@playwright/test';
+import { HeaderBar } from '../pom/components/header_bar.component';
+import { OnboardingHomePage } from '../pom/pages/onboarding_home.page';
+import { SpaceSelector } from '../pom/components/space_selector.component';
+import { KubernetesOverviewDashboardPage } from '../pom/pages/kubernetes_overview_dashboard.page';
+import { AutoDetectFlowPage } from '../pom/pages/auto_detect_flow.page';
+import { KubernetesEAFlowPage } from '../pom/pages/kubernetes_ea_flow.page';
+
+export const test = base.extend<{
+  headerBar: HeaderBar;
+  spaceSelector: SpaceSelector;
+  onboardingHomePage: OnboardingHomePage;
+  autoDetectFlowPage: AutoDetectFlowPage;
+  kubernetesEAFlowPage: KubernetesEAFlowPage;
+  kubernetesOverviewDashboardPage: KubernetesOverviewDashboardPage;
+}>({
+  headerBar: async ({ page }, use) => {
+    await use(new HeaderBar(page));
+  },
+
+  spaceSelector: async ({ page }, use) => {
+    await use(new SpaceSelector(page));
+  },
+
+  onboardingHomePage: async ({ page }, use) => {
+    await use(new OnboardingHomePage(page));
+  },
+
+  autoDetectFlowPage: async ({ page }, use) => {
+    await use(new AutoDetectFlowPage(page));
+  },
+
+  kubernetesEAFlowPage: async ({ page }, use) => {
+    await use(new KubernetesEAFlowPage(page));
+  },
+
+  kubernetesOverviewDashboardPage: async ({ page }, use) => {
+    await use(new KubernetesOverviewDashboardPage(page));
+  },
+});