add check if mobile menu is open before clicking it

Author: Mai-Saad

src/support/steps/general.ts

@@ -16,7 +16,7 @@ import { ICustomWorld } from "../../common/custom-world";
 import { Given, When, Then } from '@cucumber/cucumber';
 import {WP_BASE_URL} from '../../../config/wp.config';
 import scenarioUrls from "./../../../config/scenarioUrls.json";
-import { compareReference, isTagPresent, getScenarioTag, batchUpdateVRTestUrl, openMobileMenu} from "../../../utils/helpers";
+import { compareReference, isTagPresent, getScenarioTag, batchUpdateVRTestUrl, openMobileMenu, isMobileMenuOpen, isMobileMenuOpenSimple} from "../../../utils/helpers";
 import type { Section } from "../../../utils/types";
 import { Page, ConsoleMessage } from '@playwright/test';
 import {
@@ -296,8 +296,8 @@ When('expand mobile menu and validate no console error', async function (this:IC
     const theme = process.env.THEME ? process.env.THEME : '';
 
     // Get console messages when expanding menu on both versions
-    const consoleMsg1 = await getConsoleMsgWithMenuExpansion(this.page, `${WP_BASE_URL}/?nowprocket`);
     const consoleMsg2 = await getConsoleMsgWithMenuExpansion(this.page, `${WP_BASE_URL}/`);
+    const consoleMsg1 = await getConsoleMsgWithMenuExpansion(this.page, `${WP_BASE_URL}/?nowprocket`);
 
     // Compare console messages
     try {
@@ -572,8 +572,16 @@ const getConsoleMsgWithMenuExpansion = async (page: Page, url: string): Promise<
         });
 
         await page.goto(url);
+
         await page.waitForLoadState('load', { timeout: 30000 });
-    
+
+        await page.mouse.move(0, 0); await page.mouse.down(); await page.mouse.up(); // full user gesture
+ 
+        // Check if mobile menu is already open
+        const menuAlreadyOpen = await isMobileMenuOpen(page);
+        if (menuAlreadyOpen) {
+            throw new Error('Mobile menu is already open before attempting to open it');
+        }
         // Open the mobile menu using the helper function
         try {
             await openMobileMenu(page);

utils/helpers.ts

@@ -589,6 +589,71 @@ export const isWprRelatedError = async(contents: string): Promise<boolean> => {
     return false;
 }
 
+
+/**
+ * Checks if the mobile menu is currently open
+ * This is useful for validating mobile menu state before attempting to open it
+ * 
+ * @param {Page} page - The Playwright page instance to check
+ * @returns {Promise<boolean>} - A Promise that resolves to true if menu is open, false otherwise
+ * 
+ * @example
+ * ```typescript
+ * const isOpen = await isMobileMenuOpen(page);
+ * if (isOpen) {
+ *     console.log('Menu is already open');
+ * }
+ * ```
+ */
+export const isMobileMenuOpen = async (page: Page): Promise<boolean> => {
+    await page.waitForTimeout(5000);
+    return await page.evaluate(() => {
+    const candidates = Array.from(document.querySelectorAll<HTMLElement>(
+      'nav, .mobile-menu, .mobile-navigation, #mobile-menu, .et_mobile_menu, [id*=mobile-menu]'
+    ));
+
+    for (const menu of candidates) {
+      const style = window.getComputedStyle(menu);
+      const rect = menu.getBoundingClientRect();
+
+      // Skip invisible elements
+      if (
+        style.display === 'none' ||
+        style.visibility === 'hidden' ||
+        Number(style.opacity) === 0
+      ) continue;
+
+      // Check if there is a transform
+      const transform = style.transform;
+      if (transform && transform !== 'none') {
+        // Parse the matrix and check if it's fully translated offscreen
+        const values = transform.match(/matrix.*\((.+)\)/)?.[1].split(',').map(Number);
+        if (values) {
+          const translateX = values.length === 6 ? values[4] : 0;
+          const translateY = values.length === 6 ? values[5] : 0;
+
+          // If fully off-screen, menu is closed
+          if (translateX <= -window.innerWidth || translateY <= -window.innerHeight) continue;
+        }
+      }
+
+      // Check if element is large enough to be considered open
+      const coversScreen = rect.width >= window.innerWidth * 0.3 && rect.height >= window.innerHeight * 0.3;
+      if (coversScreen) return true;
+     }
+
+    // Fallback: toggle button aria-expanded
+    const toggles = document.querySelectorAll<HTMLElement>(
+      '.menu-toggle, .nav-toggle, .hamburger, .mobile_menu_bar, .et_mobile_menu'
+    );
+    for (const toggle of toggles) {
+      if (toggle.getAttribute('aria-expanded') === 'true') return true;
+    }
+
+    return false;
+  });
+};
+
 /**
  * Opens the mobile menu by finding and clicking toggle buttons
  * This is useful for testing mobile menu functionality