[Security Solution] Fix flaky hover actions test

x-pack/test/security_solution_cypress/cypress/e2e/explore/network/hover_actions.cy.ts

@@ -17,15 +17,15 @@ import {
  clickOnFilterIn,
  clickOnFilterOut,
  clickOnShowTopN,
- mouseoverOnToOverflowItem,
+ withHoverActionsReady,
  openHoverActions,
 } from '../../../tasks/network/flows';
 import { openTimelineUsingToggle } from '../../../tasks/security_main';
 
 const testDomain = 'myTest';
 
 // tracked by https:/elastic/kibana/issues/161874
-describe.skip('Hover actions', { tags: ['@ess', '@serverless'] }, () => {
+describe('Hover actions', { tags: ['@ess', '@serverless'] }, () => {
  const onBeforeLoadCallback = (win: Cypress.AUTWindow) => {
  // avoid cypress being held by windows prompt and timeout
  cy.stub(win, 'prompt').returns(true);
@@ -43,17 +43,16 @@ describe.skip('Hover actions', { tags: ['@ess', '@serverless'] }, () => {
  login();
  visit(NETWORK_URL, { onBeforeLoad: onBeforeLoadCallback });
  openHoverActions();
- mouseoverOnToOverflowItem();
  });
 
  it('Adds global filter - filter in', () => {
- clickOnFilterIn();
+ withHoverActionsReady(clickOnFilterIn);
 
  cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should('have.text', `destination.domain: ${testDomain}`);
  });
 
  it('Adds global filter - filter out', () => {
- clickOnFilterOut();
+ withHoverActionsReady(clickOnFilterOut);
  cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM).should(
  'contains.text',
  `NOT destination.domain: ${testDomain}`
@@ -62,22 +61,22 @@ describe.skip('Hover actions', { tags: ['@ess', '@serverless'] }, () => {
 
  it('Adds to timeline', () => {
  const DATA_PROVIDER_ITEM_NUMBER = 1;
- clickOnAddToTimeline();
+ withHoverActionsReady(clickOnAddToTimeline);
  openTimelineUsingToggle();
 
  cy.get(DATA_PROVIDERS).should('have.length', DATA_PROVIDER_ITEM_NUMBER);
  cy.get(DATA_PROVIDERS).should('have.text', `destination.domain: "${testDomain}"`);
  });
 
  it('Show topN', () => {
- clickOnShowTopN();
+ withHoverActionsReady(clickOnShowTopN);
  cy.get(TOP_N_CONTAINER).should('exist').should('contain.text', 'Top destination.domain');
  });
 
  it('Copy value', () => {
  cy.document().then((doc) => cy.spy(doc, 'execCommand').as('execCommand'));
 
- clickOnCopyValue();
+ withHoverActionsReady(clickOnCopyValue);
 
  cy.get('@execCommand').should('have.been.calledOnceWith', 'copy');
  });

x-pack/test/security_solution_cypress/cypress/e2e/explore/network/overflow_items.cy.ts

@@ -15,7 +15,7 @@ import {
 } from '../../../screens/network/flows';
 
 import { login, visit } from '../../../tasks/login';
-import { mouseoverOnToOverflowItem, openHoverActions } from '../../../tasks/network/flows';
+import { openHoverActions, mouseoverOnToOverflowItem } from '../../../tasks/network/flows';
 
 import { NETWORK_URL } from '../../../urls/navigation';
 

x-pack/test/security_solution_cypress/cypress/tasks/network/flows.ts

@@ -25,10 +25,44 @@ export const openHoverActions = () => {
  cy.get(EXPAND_OVERFLOW_ITEMS).first().click({ scrollBehavior: 'center' });
 };
 
+/**
+ * What is crucial here is that we need to verify whether or not the actions portal element is visible,
+ * and only then we can perform the action. This is done immediately before any action is performed on the actions button itself,
+ * and if for some reason the actions portal element is not visible, we will try to hover over the actions activator element again.
+ * @param action
+ * @param actionsActivatorSelector
+ * @param maxTries
+ */
+export function retryUntilHoverActionsAreVisible(
+ action: () => void,
+ actionsActivatorSelector: string,
+ maxTries = 10
+) {
+ // NOTE: not sure if this is precise enough, but it seems to work
+ const actionsButtonInPortal = '[data-euiportal="true"] button[data-test-subj*="cellActions"]';
+
+ // Check if actions portal element is visible
+ cy.get('body').then(($body) => {
+ if ($body.find(actionsButtonInPortal).length > 0) {
+ cy.get(actionsButtonInPortal).should('be.visible');
+ action();
+ } else if (maxTries <= 0) {
+ throw new Error(`Max tries reached. The element ${actionsButtonInPortal} is not visible.`);
+ } else {
+ cy.get(actionsActivatorSelector).first().realHover();
+ retryUntilHoverActionsAreVisible(action, actionsActivatorSelector, maxTries - 1);
+ }
+ });
+}
+
 export const mouseoverOnToOverflowItem = () => {
  cy.get(OVERFLOW_ITEM).first().realHover();
 };
 
+export const withHoverActionsReady = (action: () => void) => {
+ retryUntilHoverActionsAreVisible(action, OVERFLOW_ITEM);
+};
+
 export const clickOnFilterIn = () => {
  cy.get(FILTER_IN).first().click();
 };