如何将Playwright Locator锁定到特定已存在的DOM元素以稳定测试？

你的代码不稳定的核心原因是：定位器this.loadMoreButton是动态解析的，每次调用方法（比如waitFor）都会重新查找页面元素。当点击loadMoreButtonA后，新的loadMoreButtonB快速出现时，waitFor({ state: 'detached' })会转而匹配新按钮，导致永远等待旧按钮移除的逻辑失效。

要锁定到当前的loadMoreButtonA，你需要获取具体的DOM元素句柄（ElementHandle），而不是依赖定位器动态查找。元素句柄绑定到特定的DOM节点，不会被新出现的同选择器元素替换。

修改后的代码如下：

while (await this.loadMoreButton.isVisible()) {
    // 获取当前匹配定位器的具体DOM元素实例，锁定到loadMoreButtonA
    const currentLoadMoreBtn = await this.loadMoreButton.elementHandle();
    if (!currentLoadMoreBtn) break; // 兜底处理，防止元素获取失败

    // 基于当前元素实例等待其从DOM中移除，而非定位器
    const detachEvent = currentLoadMoreBtn.waitFor({ state: 'detached' });
    await currentLoadMoreBtn.click();
    await detachEvent;
    await this.page.waitForLoadState('networkidle');
}

关键说明 #

• elementHandle()会返回当前页面中匹配定位器的第一个DOM元素句柄，这个句柄指向的是点击前的loadMoreButtonA，不会被后续出现的loadMoreButtonB替换。
• 增加if (!currentLoadMoreBtn) break的兜底判断，避免因元素获取失败导致后续代码报错。
• 如果页面中存在多个同选择器的按钮，需确保this.loadMoreButton的定位逻辑足够精确（比如结合父容器选择器），保证每次只匹配当前要点击的“加载更多”按钮。

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