[Synthetics] e2e tests - adjust navigating to pages and add video to …

…help diagnose flaky test (elastic#205420)

## Summary

Adjusts navigating to pages. Directly navigates to some pages instead of
clicking on a button to navigate. Also adds video for certain tests to
help with debugging any flakiness.

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');