Playwright JS脚本添加指定商品到购物车超时问题排查

你的代码存在几个关键问题，直接导致了超时错误：

1. Locator调用逻辑错误 #

await this.addToCartButton是完全错误的用法：this.addToCartButton本身就是一个初始化好的Locator对象，不需要加await；而且.locator()方法不需要传入另一个已创建的Locator，正确的做法是在过滤后的产品元素下直接定位按钮。

2. 产品过滤精度不足 #

filter({ hasText: productName })会匹配产品卡片内的任意文本（比如描述里的相似内容），导致无法精准定位到目标产品，进而找不到对应的加购按钮。

3. XPath格式异常 #

你的productLocator的XPath包含换行，可能导致Playwright解析失败，建议写成单行格式。

修正后的代码 #

exports.ProductListing = class ProductListing {
  constructor(page) {
    this.page = page;
    // 修正XPath为单行格式
    this.productLocator = page.locator("//*[@class='inventory_item']");
  }
        
  async addProductToCart(productName) {
    // 先精准定位到包含目标产品名称的卡片，再在卡片内查找加购按钮
    await this.productLocator
      .filter({ 
        has: this.page.locator(".inventory_item_name", { hasText: productName })
      })
      .getByRole("button", { name: "Add to cart" })
      .click();
  }
}

额外优化建议 #

可以把产品名称的Locator提取为类属性，提升代码复用性：

constructor(page) {
  this.page = page;
  this.productLocator = page.locator("//*[@class='inventory_item']");
  this.productNameLocator = page.locator(".inventory_item_name");
}

async addProductToCart(productName) {
  await this.productLocator
    .filter({ has: this.productNameLocator.filter({ hasText: productName }) })
    .getByRole("button", { name: "Add to cart" })
    .click();
}

修改后就能精准定位到目标产品对应的加购按钮，解决超时问题。

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