Global父选择器：如何将任意选择器的作用域限制在指定父元素内

可以通过封装全局查询上下文的方式，实现和iframe场景下switchToIframe()完全一致的使用体验，测试人员无需感知底层模态框是div还是iframe实现，具体方案如下：

• 首先定义全局默认查询根节点，初始值为页面根文档（document/测试框架的全局page实例），所有测试用例中使用的选择器API都统一从该根节点发起查询，不直接调用全局原生查询方法。
• 封装switchToModal()方法，逻辑与原switchToIframe()对齐：调用时自动匹配页面当前激活的div模态框节点（可通过模态框专属标识类、最高z-index属性等规则匹配），匹配成功后将全局默认查询根节点赋值为该模态框节点即可。
• 配套封装switchToMainContent()方法，调用时将全局默认查询根节点重置为页面根文档，对应原iframe场景下的跳出iframe操作。

示例实现（基于Playwright测试框架） #

// 全局查询上下文变量
let currentQueryRoot = page;

// 切换到模态框作用域
async function switchToModal(modalIdent = '.ant-modal-root .ant-modal-wrap:not(.ant-modal-hidden)') {
  currentQueryRoot = page.locator(modalIdent).last(); // 取最后打开的最高层级模态框
}

// 重置到主文档作用域
function switchToMainContent() {
  currentQueryRoot = page;
}

// 统一封装测试用例使用的选择器入口
function getSelector(selectorStr) {
  return currentQueryRoot.locator(selectorStr);
}

测试人员编写用例时的使用流程和原iframe场景完全一致：弹出模态框后调用switchToModal()，之后所有通过getSelector()获取的元素都会自动限定在模态框范围内，操作完成后调用switchToMainContent()即可回到主文档作用域。

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