Playwright全局配置：遇加载元素自动暂停执行（添加可操作性检查）

针对你遇到的每次操作后都要手动调用waitForLoadingBar的冗余问题，下面提供几个实用的解决办法：

1. 封装核心操作方法 #

最直接的方式是把click()、check()这些常用操作封装成自定义函数，在函数内部自动附加加载条等待逻辑，后续脚本统一调用封装后的方法即可：

// 复用你已有的waitForLoadingBar函数
const waitForLoadingBar = async (page, expect) => {
  await expect(page.locator('#loading-bar')).toHaveCount(0, {timeout: 30000});
};

// 封装click操作
async function customClick(page, locator, options = {}) {
  await locator.click(options);
  await waitForLoadingBar(page, expect);
}

// 封装check操作
async function customCheck(page, locator, options = {}) {
  await locator.check(options);
  await waitForLoadingBar(page, expect);
}

使用时直接替换原生方法：

// 原写法：
// await page.locator('#menu-item').click();
// await waitForLoadingBar(page, expect);

// 新写法：
await customClick(page, page.locator('#menu-item'));

2. 全局重写原生操作方法（无需修改原有调用） #

如果不想改动现有脚本里的方法调用，可以通过重写Playwright locator的原型方法，让所有原生click()、check()自动触发加载条等待：

const waitForLoadingBar = async (page, expect) => {
  await expect(page.locator('#loading-bar')).toHaveCount(0, {timeout: 30000});
};

// 重写click方法
const originalClick = page.locator.prototype.click;
page.locator.prototype.click = async function(options) {
  await originalClick.call(this, options);
  await waitForLoadingBar(page, expect);
};

// 重写check方法
const originalCheck = page.locator.prototype.check;
page.locator.prototype.check = async function(options) {
  await originalCheck.call(this, options);
  await waitForLoadingBar(page, expect);
};

这样原有脚本里的await page.locator('#checkbox').check();会自动在执行后等待加载条消失，完全不用修改原有代码。注意：这种原型链修改方式要确保在所有操作调用前执行，且Playwright版本更新后可能需要验证兼容性，但当前场景下是高效的解决方案。

3. 自定义可操作性检查逻辑 #

如果需要更严谨的操作前检查（比如确保元素可操作且加载条已消失），可以封装一个通用的就绪等待函数，结合操作方法使用：

async function waitForElementReady(page, locator) {
  // 等待元素可见且可用
  await locator.waitFor({ state: 'visible', timeout: 10000 });
  await locator.waitFor({ state: 'enabled', timeout: 10000 });
  // 确保当前没有加载条
  await waitForLoadingBar(page, expect);
}

// 结合封装的click使用
async function customClick(page, locator, options = {}) {
  await waitForElementReady(page, locator);
  await locator.click(options);
  await waitForLoadingBar(page, expect);
}

这个方案适合需要严格控制操作时机的场景，避免在加载条未消失时误触发操作。

内容的提问来源于stack exchange，提问作者Josh M.