Edge浏览器中Nightwatch锚点元素点击事件失效问题求助

Hey Kevin, let's break down this Edge-specific issue with your Nightwatch takeover test command and fix it up.

First, let's talk about why this might be happening: Edge often has stricter handling of element interactivity compared to Chrome, especially for elements early in the DOM. Your current code runs click operations in parallel via forEach, which can overwhelm Edge's event queue. Plus, relying solely on waitForElementVisible doesn't guarantee an element is actually clickable—Edge might consider an element "visible" but still block the click if it's partially off-screen or hasn't finished initializing event listeners.

Here's a revised version of your command with targeted fixes, along with explanations:

exports.command = function(client) {
  client.elements('css selector', '[data-action="takeover"]', function(elements) {
    // Use recursion to process elements one at a time (avoids parallel execution chaos in Edge)
    const processNextElement = (index) => {
      if (index >= elements.value.length) return;

      const element = elements.value[index];
      client.elementIdAttribute(element.ELEMENT, 'data-rel', function(attribute) {
        const targetSelector = `[data-rel="${attribute.value}"]`;
        const takeoverSelector = attribute.value;

        client
          // Scroll the element into view first—Edge won't auto-scroll for clicks like Chrome sometimes does
          .scrollIntoView(targetSelector)
          // Wait for the element to be not just visible, but actually clickable
          .waitForElementClickable(targetSelector, 5000)
          // Click the directly retrieved element ID instead of re-querying via selector
          // This avoids any potential selector matching ambiguity
          .elementIdClick(element.ELEMENT)
          .waitForElementVisible(takeoverSelector, 5000)
          .collapsibleInTakeover(takeoverSelector, client)
          .keys(client.Keys.ESCAPE)
          .pause(250)
          .waitForElementNotVisible(takeoverSelector, 5000)
          // Ensure the current element's workflow finishes before moving to the next
          .perform(() => processNextElement(index + 1));
      });
    };

    processNextElement(0);
  });

  return this; // Maintain Nightwatch's chainable command pattern
};

Key improvements here:

• Sequential element processing: Recursion ensures we don't flood Edge with simultaneous click commands, which was likely causing the early anchor elements to miss their click events.
• Scroll into view: Edge requires elements to be in the viewport for reliable clicks—Chrome sometimes skips this check, hence the discrepancy.
• Wait for clickability: waitForElementClickable checks that the element is not just visible, but also enabled and not blocked by other UI elements (a common issue with early DOM elements that might have overlays loading late).
• Direct element ID click: Using elementIdClick on the already retrieved element avoids re-querying the DOM, eliminating any chance of selector mismatches or race conditions.

Additional troubleshooting steps if the issue persists:

• Check Edge DevTools for JS errors during test execution—early anchor elements might have event listeners that haven't finished binding when your test runs. Add a short pause before processing elements if needed.
• Verify no invisible overlays are blocking the early anchors (use DevTools' "Inspect" tool to check element z-index and visibility).

内容的提问来源于stack exchange，提问作者Kevin Schuit