Playwright POM中locator().all()报执行上下文销毁错误的原因

场景复现 #

我基于Playwright的页面对象模型（POM）编写测试，其中的InventoryPage类代码如下：

import { Expect, Page, Locator } from "@playwright/test";

export class InventoryPage {
  readonly page: Page;
  readonly addToCartBtn: Locator;
  readonly addToCartBtnAll: Promise<Array<Locator>>;
  readonly cartIcon: Locator;

  constructor(page: Page) {
    this.page = page;
    this.addToCartBtn = page.locator("button.btn_inventory");
    this.addToCartBtnAll = page.locator("button.btn_inventory").all();
    this.cartIcon = page.locator(".shopping_cart_badge");
  }

  async addAllItemsToCart() {
    for (let item of await this.addToCartBtnAll) await item.click();
  }

  async addRandomItemToCart() {
    await this.addToCartBtn
      .nth(Math.floor(Math.random() * (await this.addToCartBtnAll).length))
      .click();
  }
}

其中存在问题的代码片段：

readonly addToCartBtnAll: Promise<Array<Locator>>;
this.addToCartBtnAll = page.locator("button.btn_inventory").all();

在测试的beforeEach钩子中创建该类实例时，测试未启动就报错：

Error: locator.all: Execution context was destroyed, most likely because of a navigation
    at InventoryPage

我已经有规避方案（不在类属性中存储Promise<Array<Locator>>，而是在方法内调用.all()），但想了解为什么Playwright不允许在构造函数中这么用。

问题分析与原因解释 #

1. locator.all()的本质 #

Locator本身是惰性求值的，它仅存储定位查询条件，不会立即执行DOM查询。但locator.all()是立即执行的异步操作——调用它时会立刻向浏览器发送指令，尝试获取当前页面中所有匹配的元素。

2. 构造函数执行时机的冲突 #

在beforeEach中创建页面对象实例时，页面可能还处于导航加载过程中，或者后续测试会触发页面跳转：

• 构造函数中调用locator.all()会立刻执行DOM查询，若后续发生页面导航，之前的执行上下文（浏览器对应页面的JS环境）会被销毁。
• 你存储的是这个查询的Promise，后续在方法中await该Promise时，对应的执行上下文已不存在，因此抛出"执行上下文已销毁"的错误。

3. Playwright的设计逻辑限制 #

Playwright定位器的设计核心是延迟DOM查询，确保每次操作都针对当前最新的页面状态。而在构造函数中提前执行locator.all()，违背了这种惰性设计：

• 存储的Promise对应的是构造时的页面状态，一旦页面导航，该Promise的结果彻底失效，因为元素依赖的上下文已不存在。
• 直接存储Locator（比如addToCartBtn）则是安全的，因为每次调用它的方法（如.nth()、.click()）时，才会重新执行DOM查询，自动适配当前页面的最新状态。

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