[8.x] [Synthetics] e2e tests - adjust navigating to pages and add video to help diagnose flaky test (#205420) (#205972)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Synthetics] e2e tests - adjust navigating to pages and add video to
help diagnose flaky test
(#205420)](#205420)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dominique
Clarke","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-08T21:36:31Z","message":"[Synthetics]
e2e tests - adjust navigating to pages and add video to help diagnose
flaky test (#205420)\n\n## Summary\r\n\r\nAdjusts navigating to pages.
Directly navigates to some pages instead of\r\nclicking on a button to
navigate. Also adds video for certain tests to\r\nhelp with debugging
any
flakiness.","sha":"c398818d7246934517d32c589ba5a83f6ec6181d","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["chore","release_note:skip","v9.0.0","backport:prev-minor","Team:obs-ux-management"],"title":"[Synthetics]
e2e tests - adjust navigating to pages and add video to help diagnose
flaky
test","number":205420,"url":"https://github.com/elastic/kibana/pull/205420","mergeCommit":{"message":"[Synthetics]
e2e tests - adjust navigating to pages and add video to help diagnose
flaky test (#205420)\n\n## Summary\r\n\r\nAdjusts navigating to pages.
Directly navigates to some pages instead of\r\nclicking on a button to
navigate. Also adds video for certain tests to\r\nhelp with debugging
any
flakiness.","sha":"c398818d7246934517d32c589ba5a83f6ec6181d"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205420","number":205420,"mergeCommit":{"message":"[Synthetics]
e2e tests - adjust navigating to pages and add video to help diagnose
flaky test (#205420)\n\n## Summary\r\n\r\nAdjusts navigating to pages.
Directly navigates to some pages instead of\r\nclicking on a button to
navigate. Also adds video for certain tests to\r\nhelp with debugging
any flakiness.","sha":"c398818d7246934517d32c589ba5a83f6ec6181d"}}]}]
BACKPORT-->

Co-authored-by: Dominique Clarke <[email protected]>

Author: kibanamachine

x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/alerting_default.journey.ts

@@ -6,11 +6,13 @@
  */
 
 import { journey, step, before, after } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-synthetics-test-data';
 import { byTestId } from '../../helpers/utils';
 import { syntheticsAppPageProvider } from '../page_objects/synthetics_app';
 import { cleanSettings } from './services/settings';
 
 journey('AlertingDefaults', async ({ page, params }) => {
+  recordVideo(page);
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl, params });
 
   before(async () => {
@@ -39,6 +41,7 @@ journey('AlertingDefaults', async ({ page, params }) => {
     await page.fill('input[type="text"]', 'Test slack');
     await page.press('input[type="text"]', 'Tab');
   });
+
   step(
     'Fill text=Webhook URLCreate a Slack Webhook URL(external, opens in a new tab or window) >> input[type="text"]',
     async () => {

x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/global_parameters.journey.ts

@@ -6,7 +6,6 @@
  */
 
 import { journey, step, before, after, expect } from '@elastic/synthetics';
-import { byTestId } from '../../helpers/utils';
 import { cleanTestParams } from './services/add_monitor';
 import { syntheticsAppPageProvider } from '../page_objects/synthetics_app';
 
@@ -25,16 +24,10 @@ journey(`GlobalParameters`, async ({ page, params }) => {
     await syntheticsApp.navigateToSettings(true);
   });
 
-  step('go to params tab', async () => {
-    await page.click('text=Global Parameters');
-  });
-
-  step('Click text=Settings', async () => {
-    await page.click(byTestId('settings-page-link'));
-    expect(page.url()).toBe('http://localhost:5620/app/synthetics/settings/alerting');
-  });
-  step('Click text=Global Parameters', async () => {
-    await page.click('text=Global Parameters');
+  step('Add params', async () => {
+    await page.goto('http://localhost:5620/app/synthetics/settings/params', {
+      waitUntil: 'networkidle',
+    });
     expect(page.url()).toBe('http://localhost:5620/app/synthetics/settings/params');
     await page.click('text=No items found');
     await page.click('button:has-text("Create Parameter")');

x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/project_api_keys.journey.ts

@@ -8,9 +8,11 @@
 import { journey, step, expect, before } from '@elastic/synthetics';
 import { SYNTHETICS_API_URLS } from '@kbn/synthetics-plugin/common/constants';
 import { recordVideo } from '@kbn/observability-synthetics-test-data';
+import { syntheticsAppPageProvider } from '../page_objects/synthetics_app';
 
-journey('ProjectAPIKeys', async ({ page }) => {
+journey('ProjectAPIKeys', async ({ page, params }) => {
   recordVideo(page);
+  const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl, params });
 
   let apiKey = '';
 
@@ -33,15 +35,7 @@ journey('ProjectAPIKeys', async ({ page }) => {
   });
 
   step('Go to http://localhost:5620/login?next=%2Fapp%2Fsynthetics%2Fsettings', async () => {
-    await page.goto('http://localhost:5620/login?next=%2Fapp%2Fsynthetics%2Fsettings');
-    await page.click('input[name="username"]');
-    await page.fill('input[name="username"]', 'elastic');
-    await page.press('input[name="username"]', 'Tab');
-    await page.fill('input[name="password"]', 'changeme');
-    await Promise.all([
-      page.waitForNavigation({ url: 'http://localhost:5620/app/synthetics/settings/alerting' }),
-      page.click('button:has-text("Log in")'),
-    ]);
+    await syntheticsApp.navigateToSettings(true);
   });
   step('Click text=Project API Keys', async () => {
     await page.click('text=Project API Keys');