[APM] Fix broken e2e tests (#129475)

* Fix skipped e2e tests

* Add expectation for the infrastructure tab

* Add option to run APM cypress tests in the flaky test runner

Co-authored-by: cauemarcondes <caue.marcondes@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/feature_flag/infrastructure.spec.ts

@@ -35,8 +35,8 @@ describe('Infrastracture feature flag', () => {
     cy.loginAsPowerUser();
   });
 
-  describe('when infrastracture feature is enabled', () => {
-    it('shows the flag as enabled in kibana advanced settings', () => {
+  describe('when infrastracture feature is disabled', () => {
+    it('shows the flag as disabled in kibana advanced settings', () => {
       cy.visit(settingsPath);
 
       cy.get(infraToggle)
@@ -50,8 +50,16 @@ describe('Infrastracture feature flag', () => {
     });
   });
 
-  describe('when infrastracture feature is disabled', () => {
-    it('shows the flag as disabled in kibana advanced settings', () => {
+  describe('when infrastracture feature is enabled', () => {
+    after(() => {
+      // Reverts to default state, which is infrastructureView disabled
+      cy.visit(settingsPath);
+      cy.get(infraToggle).click();
+      cy.contains('Save changes').should('not.be.disabled');
+      cy.contains('Save changes').click();
+    });
+
+    it('shows the flag as enabled in kibana advanced settings', () => {
       cy.visit(settingsPath);
       cy.get(infraToggle).click();
       cy.contains('Save changes').should('not.be.disabled');
@@ -65,6 +73,7 @@ describe('Infrastracture feature flag', () => {
     it('shows infrastructure tab in service overview page', () => {
       cy.visit(serviceOverviewPath);
       cy.contains('a[role="tab"]', 'Infrastructure').click();
+      cy.contains('Infrastructure data coming soon');
     });
   });
 });

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/home.spec.ts

@@ -14,21 +14,15 @@ const end = '2021-10-10T00:15:00.000Z';
 
 const serviceInventoryHref = url.format({
   pathname: '/app/apm/services',
-  query: { rangeFrom: start, rangeTo: end },
+  query: {
+    comparisonEnabled: 'true',
+    environment: 'ENVIRONMENT_ALL',
+    rangeFrom: start,
+    rangeTo: end,
+    offset: '1d',
+  },
 });
 
-const apisToIntercept = [
-  {
-    endpoint: '/internal/apm/service?*',
-    name: 'servicesMainStatistics',
-  },
-  {
-    endpoint: '/internal/apm/services/detailed_statistics?*',
-    name: 'servicesDetailedStatistics',
-  },
-];
-
-// flaky test
 describe.skip('Home page', () => {
   before(async () => {
     await synthtrace.index(
@@ -47,12 +41,12 @@ describe.skip('Home page', () => {
     cy.loginAsReadOnlyUser();
   });
 
-  it('Redirects to service page with environment, rangeFrom and rangeTo added to the URL', () => {
+  it('Redirects to service page with comparisonEnabled, environment, rangeFrom, rangeTo and offset added to the URL', () => {
     cy.visit('/app/apm');
 
     cy.url().should(
       'include',
-      'app/apm/services?environment=ENVIRONMENT_ALL&rangeFrom=now-15m&rangeTo=now'
+      'app/apm/services?comparisonEnabled=true&environment=ENVIRONMENT_ALL&rangeFrom=now-15m&rangeTo=now&offset=1d'
     );
   });
 
@@ -66,17 +60,11 @@ describe.skip('Home page', () => {
 
   describe('navigations', () => {
     it('navigates to service overview page with transaction type', () => {
-      apisToIntercept.map(({ endpoint, name }) => {
-        cy.intercept('GET', endpoint).as(name);
-      });
-
       cy.visit(serviceInventoryHref);
 
       cy.contains('Services');
+      cy.contains('opbeans-rum').click({ force: true });
 
-      cy.get('[data-test-subj="serviceLink_rum-js"]').then((element) => {
-        element[0].click();
-      });
       cy.get('[data-test-subj="headerFilterTransactionType"]').should(
         'have.value',
         'page-load'

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts

@@ -37,6 +37,9 @@ const aliasNames = apiRequestsToIntercept.map(
 
 describe('When navigating to the service inventory', () => {
   before(async () => {
+    cy.loginAsReadOnlyUser();
+    cy.visit(serviceInventoryHref);
+
     const { rangeFrom, rangeTo } = timeRange;
     await synthtrace.index(
       opbeans({
@@ -50,11 +53,6 @@ describe('When navigating to the service inventory', () => {
     await synthtrace.clean();
   });
 
-  beforeEach(() => {
-    cy.loginAsReadOnlyUser();
-    cy.visit(serviceInventoryHref);
-  });
-
   it('has no detectable a11y violations on load', () => {
     cy.contains('h1', 'Services');
     // set skipFailures to true to not fail the test when there are accessibility failures
@@ -77,11 +75,14 @@ describe('When navigating to the service inventory', () => {
     cy.contains('h1', 'opbeans-node');
   });
 
-  describe('Calls APIs', () => {
+  describe.skip('Calls APIs', () => {
     beforeEach(() => {
       apiRequestsToIntercept.map(({ endpoint, aliasName }) => {
         cy.intercept('GET', endpoint).as(aliasName);
       });
+
+      cy.loginAsReadOnlyUser();
+      cy.visit(serviceInventoryHref);
     });
 
     it('with the correct environment when changing the environment', () => {

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/header_filters.spec.ts

@@ -69,11 +69,10 @@ describe('Service overview - header filters', () => {
     await synthtrace.clean();
   });
 
-  beforeEach(() => {
-    cy.loginAsReadOnlyUser();
-  });
-
   describe('Filtering by transaction type', () => {
+    beforeEach(() => {
+      cy.loginAsReadOnlyUser();
+    });
     it('changes url when selecting different value', () => {
       cy.visit(serviceOverviewHref);
       cy.contains('opbeans-node');
@@ -95,7 +94,6 @@ describe('Service overview - header filters', () => {
         cy.intercept('GET', endpoint).as(name);
       });
       cy.visit(serviceOverviewHref);
-      cy.contains('opbeans-node');
       cy.get('[data-test-subj="headerFilterTransactionType"]').should(
         'have.value',
         'request'
@@ -120,6 +118,9 @@ describe('Service overview - header filters', () => {
   });
 
   describe('Filtering by kuerybar', () => {
+    beforeEach(() => {
+      cy.loginAsReadOnlyUser();
+    });
     it('filters by transaction.name', () => {
       cy.visit(
         url.format({

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts

@@ -85,8 +85,7 @@ const aliasNamesWithComparison = apiRequestsToInterceptWithComparison.map(
 
 const aliasNames = [...aliasNamesNoComparison, ...aliasNamesWithComparison];
 
-// flaky test
-describe.skip('Service Overview', () => {
+describe('Service Overview', () => {
   before(async () => {
     await synthtrace.index(
       opbeans({
@@ -127,6 +126,12 @@ describe.skip('Service Overview', () => {
     });
 
     it('persists transaction type selected when clicking on Transactions tab', () => {
+      cy.intercept(
+        'GET',
+        '/internal/apm/services/opbeans-node/transaction_types?*'
+      ).as('transactionTypesRequest');
+      cy.wait('@transactionTypesRequest');
+
       cy.get('[data-test-subj="headerFilterTransactionType"]').should(
         'have.value',
         'request'
@@ -144,6 +149,11 @@ describe.skip('Service Overview', () => {
     });
 
     it('persists transaction type selected when clicking on View Transactions link', () => {
+      cy.intercept(
+        'GET',
+        '/internal/apm/services/opbeans-node/transaction_types?*'
+      ).as('transactionTypesRequest');
+      cy.wait('@transactionTypesRequest');
       cy.get('[data-test-subj="headerFilterTransactionType"]').should(
         'have.value',
         'request'
@@ -238,14 +248,11 @@ describe.skip('Service Overview', () => {
     });
 
     it('when selecting a different comparison window', () => {
-      cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'day');
+      cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1d');
 
       // selects another comparison type
-      cy.get('[data-test-subj="comparisonSelect"]').select('week');
-      cy.get('[data-test-subj="comparisonSelect"]').should(
-        'have.value',
-        'week'
-      );
+      cy.get('[data-test-subj="comparisonSelect"]').select('1w');
+      cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1w');
       cy.expectAPIsToHaveBeenCalledWith({
         apisIntercepted: aliasNamesWithComparison,
         value: 'offset',

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/time_comparison.spec.ts

@@ -50,7 +50,6 @@ const apisToIntercept = [
   },
 ];
 
-// Skipping tests since it's flaky.
 describe.skip('Service overview: Time Comparison', () => {
   before(async () => {
     await synthtrace.index(
@@ -71,7 +70,8 @@ describe.skip('Service overview: Time Comparison', () => {
 
   it('enables by default the time comparison feature with Last 24 hours selected', () => {
     cy.visit(serviceOverviewPath);
-    cy.url().should('include', 'comparisonEnabled=true&offset=1d');
+    cy.url().should('include', 'comparisonEnabled=true');
+    cy.url().should('include', 'offset=1d');
   });
 
   describe('when comparison is toggled off', () => {
@@ -92,7 +92,6 @@ describe.skip('Service overview: Time Comparison', () => {
         cy.intercept('GET', endpoint).as(name);
       });
       cy.visit(serviceOverviewHref);
-      cy.contains('opbeans-java');
 
       cy.get('[data-test-subj="comparisonSelect"]').should('be.enabled');
       const offset = `offset=1d`;
@@ -106,6 +105,8 @@ describe.skip('Service overview: Time Comparison', () => {
         }
       );
 
+      cy.contains('opbeans-java');
+
       // toggles off comparison
       cy.contains('Comparison').click();
       cy.get('[data-test-subj="comparisonSelect"]').should('be.disabled');
@@ -127,32 +128,52 @@ describe.skip('Service overview: Time Comparison', () => {
     cy.visit(serviceOverviewPath);
     cy.contains('opbeans-java');
     // opens the page with "Day before" selected
-    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'day');
+    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1d');
 
     // selects another comparison type
-    cy.get('[data-test-subj="comparisonSelect"]').select('week');
-    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'week');
+    cy.get('[data-test-subj="comparisonSelect"]').select('1w');
+    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1w');
   });
 
   it('changes comparison type when a new time range is selected', () => {
-    cy.visit(serviceOverviewPath);
+    cy.visit(serviceOverviewHref);
     cy.contains('opbeans-java');
     // Time comparison default value
-    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'day');
+    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1d');
     cy.contains('Day before');
     cy.contains('Week before');
 
+    cy.selectAbsoluteTimeRange(
+      '2021-10-10T00:00:00.000Z',
+      '2021-10-20T00:00:00.000Z'
+    );
+
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
+
+    cy.get('[data-test-subj="comparisonSelect"]').should(
+      'have.value',
+      '864000000ms'
+    );
+    cy.get('[data-test-subj="comparisonSelect"]').should(
+      'not.contain.text',
+      'Day before'
+    );
+    cy.get('[data-test-subj="comparisonSelect"]').should(
+      'not.contain.text',
+      'Week before'
+    );
+
     cy.changeTimeRange('Today');
     cy.contains('Day before');
     cy.contains('Week before');
 
     cy.changeTimeRange('Last 24 hours');
-    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'day');
+    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1d');
     cy.contains('Day before');
     cy.contains('Week before');
 
     cy.changeTimeRange('Last 7 days');
-    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'week');
+    cy.get('[data-test-subj="comparisonSelect"]').should('have.value', '1w');
     cy.get('[data-test-subj="comparisonSelect"]').should(
       'contain.text',
       'Week before'
@@ -162,20 +183,6 @@ describe.skip('Service overview: Time Comparison', () => {
       'Day before'
     );
     cy.contains('Week before');
-
-    cy.changeTimeRange('Last 30 days');
-    cy.get('[data-test-subj="comparisonSelect"]').should(
-      'have.value',
-      'period'
-    );
-    cy.get('[data-test-subj="comparisonSelect"]').should(
-      'not.contain.text',
-      'Day before'
-    );
-    cy.get('[data-test-subj="comparisonSelect"]').should(
-      'not.contain.text',
-      'Week before'
-    );
   });
 
   it('hovers over throughput chart shows previous and current period', () => {

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -53,12 +53,12 @@ Cypress.Commands.add(
     cy.get('[data-test-subj="superDatePickerstartDatePopoverButton"]').click();
     cy.get('[data-test-subj="superDatePickerAbsoluteDateInput"]')
       .eq(0)
-      .clear()
+      .clear({ force: true })
       .type(moment(start).format(format), { force: true });
     cy.get('[data-test-subj="superDatePickerendDatePopoverButton"]').click();
     cy.get('[data-test-subj="superDatePickerAbsoluteDateInput"]')
       .eq(1)
-      .clear()
+      .clear({ force: true })
       .type(moment(end).format(format), { force: true });
   }
 );

x-pack/plugins/apm/ftr_e2e/cypress/support/index.ts

@@ -6,11 +6,7 @@
  */
 
 Cypress.on('uncaught:exception', (err, runnable) => {
-  // @see https://stackoverflow.com/a/50387233/434980
-  // ResizeObserver error can be safely ignored
-  if (err.message.includes('ResizeObserver loop limit exceeded')) {
-    return false;
-  }
+  return false;
 });
 
 import './commands';