improve test resiliance

Author: shahzad31

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts

@@ -14,16 +14,40 @@ When(/^the user filters by "([^"]*)"$/, (filterName) => {
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
   cy.get(`#local-filter-${filterName}`).click();
 
-  if (filterName === 'os') {
-    cy.get('span.euiSelectableListItem__text', DEFAULT_TIMEOUT)
-      .contains('Mac OS X')
-      .click();
-  } else {
-    cy.get('span.euiSelectableListItem__text', DEFAULT_TIMEOUT)
-      .contains('DE')
-      .click();
-  }
-  cy.get('[data-cy=applyFilter]').click();
+  cy.get(`#local-filter-popover-${filterName}`, DEFAULT_TIMEOUT).within(() => {
+    if (filterName === 'os') {
+      const osItem = cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(2);
+      osItem.should('have.text', 'Mac OS X8 ');
+      osItem.click();
+
+      // sometimes click doesn't work as expected so we need to retry here
+      osItem.invoke('attr', 'aria-selected').then((val) => {
+        if (val === 'false') {
+          cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(2).click();
+        }
+      });
+    } else {
+      const deItem = cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(0);
+      deItem.should('have.text', 'DE28 ');
+      deItem.click();
+
+      // sometimes click doesn't work as expected so we need to retry here
+      deItem.invoke('attr', 'aria-selected').then((val) => {
+        if (val === 'false') {
+          cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(0).click();
+        }
+      });
+    }
+    cy.get('[data-cy=applyFilter]').click();
+  });
+
+  cy.get(`div#local-filter-values-${filterName}`, DEFAULT_TIMEOUT).within(
+    () => {
+      cy.get('span.euiBadge__content')
+        .eq(0)
+        .should('have.text', filterName === 'os' ? 'Mac OS X' : 'DE');
+    }
+  );
 });
 
 Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts

@@ -5,15 +5,13 @@
  */
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
-import { DEFAULT_TIMEOUT } from '../apm';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { DEFAULT_TIMEOUT } from './csm_dashboard';
 
-When('the user changes the selected service name', (filterName) => {
+When('the user changes the selected service name', () => {
   // wait for all loading to finish
   cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get(`[data-cy=serviceNameFilter]`, { timeout: DEFAULT_TIMEOUT }).select(
-    'client'
-  );
+  cy.get(`[data-cy=serviceNameFilter]`, DEFAULT_TIMEOUT).select('client');
 });
 
 Then(`it displays relevant client metrics`, () => {

x-pack/plugins/apm/e2e/ingest-data/replay.js

@@ -96,7 +96,7 @@ function setRumAgent(item) {
   if (item.body) {
     item.body = item.body.replace(
       '"name":"client"',
-      '"name":"opbean-client-rum"'
+      '"name":"elastic-frontend"'
     );
   }
 }

x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx

@@ -19,16 +19,17 @@ const BadgeText = styled.div`
 interface Props {
   value: string[];
   onRemove: (val: string) => void;
+  name: string;
 }
 
 const removeFilterLabel = i18n.translate(
   'xpack.apm.uifilter.badge.removeFilter',
   { defaultMessage: 'Remove filter' }
 );
 
-function FilterBadgeList({ onRemove, value }: Props) {
+function FilterBadgeList({ onRemove, value, name }: Props) {
   return (
-    <EuiFlexGrid gutterSize="s">
+    <EuiFlexGrid gutterSize="s" id={`local-filter-values-${name}`}>
       {value.map((val) => (
         <EuiFlexItem key={val} grow={false}>
           <EuiBadge

x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx

@@ -113,7 +113,7 @@ function Filter({ name, title, options, onChange, value, showCount }: Props) {
           searchable={true}
         >
           {(list, search) => (
-            <SelectContainer>
+            <SelectContainer id={`local-filter-popover-${name}`}>
               <EuiFlexGroup direction="column" gutterSize="none">
                 <FlexItem grow={true}>
                   <EuiTitle size="xxxs" textTransform="uppercase">
@@ -159,6 +159,7 @@ function Filter({ name, title, options, onChange, value, showCount }: Props) {
       {value.length ? (
         <>
           <FilterBadgeList
+            name={name}
             onRemove={(val) => {
               onChange(value.filter((v) => val !== v));
             }}