如何阻止TestCafe操作被遮挡元素并捕获相关Bug？

背景与触发流程 #

引入Bug后，真实用户无法点击原本可交互的“结账”按钮，触发场景如下（支付页面实现HTML Dialog标签后）：

• 用户点击提交按钮
• 弹出包含iframe的第一个弹窗
• 1秒后，第二个包含iframe的弹窗出现在第一个弹窗后方

测试环境：Chrome、Firefox浏览器

TestCafe行为差异 #

• 预期行为：TestCafe应模拟真实用户，无法点击被遮挡的“结账”按钮，测试失败
• 实际行为：测试显示通过（绿色结果），TestCafe允许点击被Dialog元素遮挡的后台按钮

测试警告信息 #

When something overlaps the action target, TestCafe performs the action with the topmost element at the original target's location.
The following element with a greater z-order replaced the original action target: <dialog class="payment_1PLVocjJ" open="" tabindex="-1">...</dialog>.
Review your code to prevent this behavior.

无效尝试 #

曾使用visible和exist断言尝试拦截问题，但未生效——因为TestCafe的可见性判断不考虑以下因素：

• 元素的z-index层级
• 元素的opacity透明度
• 元素在页面上的遮挡位置

核心问题 #

需要使用什么方法来阻止或捕获此类遮挡Bug？

可以通过以下两种方式实现需求：

1. 自定义客户端函数检测元素是否为顶层元素 #

使用TestCafe的ClientFunction编写逻辑，验证目标按钮是否是其所在位置的最顶层可交互元素：

import { ClientFunction, Selector } from 'testcafe';

// 检测元素是否为位置上的顶层元素（或包含顶层子元素）
const isElementTopmost = ClientFunction(selector => {
    const targetEl = document.querySelector(selector);
    if (!targetEl) return false;

    const rect = targetEl.getBoundingClientRect();
    // 取元素中心坐标作为检测点
    const checkX = rect.left + rect.width / 2;
    const checkY = rect.top + rect.height / 2;

    // 获取该坐标点的顶层元素
    const topEl = document.elementFromPoint(checkX, checkY);

    // 验证顶层元素是否为目标元素或其子元素
    return targetEl === topEl || targetEl.contains(topEl);
});

// 测试用例示例
test('验证结账按钮未被遮挡', async t => {
    const checkoutBtn = Selector('#checkout-button');

    // 断言按钮是顶层元素，否则抛出错误
    await t.expect(isElementTopmost('#checkout-button')).ok('结账按钮被其他元素遮挡，无法点击');

    // 仅在验证通过后执行点击
    await t.click(checkoutBtn);
});

2. 验证弹窗状态，确保无意外遮挡 #

通过断言确认只有预期的弹窗处于显示状态，避免后台弹窗被误操作：

import { Selector } from 'testcafe';

test('仅在预期弹窗存在时点击结账', async t => {
    const expectedDialog = Selector('dialog.payment_1PLVocjJ[open]');
    const unexpectedDialog = Selector('dialog.other-dialog-class[open]');

    // 断言意外弹窗不存在
    await t.expect(unexpectedDialog.exists).notOk('出现意外弹窗，遮挡了结账按钮');

    // 确认预期弹窗存在后执行点击
    await t.click('#checkout-button');
});

内容的提问来源于stack exchange，提问作者Emine Cevik