Puppeteer中元素可通过Page.$()点击却无法用locator()点击的原因

我正在尝试自动化发布内容到Facebook（假设无需登录），代码如下：

import { Page } from "npm:puppeteer@23.6";

// 初始化浏览器
const browser = await puppeteer.launch({
  headless: false,
  userDataDir: "./user_data",
  args: minimal_args.concat(args),
});
const page = await browser.newPage();
await page.goto("https://facebook.com/");

// 创建帖子
await page.locator("::-p-text(What's on your mind)").click();
await page.keyboard.type(text);

// 点击Next按钮
const nextButtonSelector = '*[aria-label="Next"][role="button"]';
await (await page.$(nextButtonSelector))!.click(); // 此方法可行
// await page.locator(nextButtonSelector).click(); // 会触发超时

// 点击发布按钮
await page.locator('*[aria-label="Post"][role="button"]').click();

在点击“Next”按钮的步骤中，我必须使用Page.$()方法，而非Page.locator()方法，后者会触发超时。我注意到未输入内容时该按钮呈灰色（处于禁用状态），怀疑这与此问题相关，但无法给出明确解释。虽了解两者差异，但不知如何应用到该场景中。

以下是该按钮的完整HTML元素代码：

<div class="x9f619 x1ja2u2z x78zum5 x1n2onr6 x1r8uery x1iyjqo2 xs83m0k xeuugli x1qughib x6s0dn4 xozqiw3 x1q0g3np x1pi30zi x1swvt13 xyamay9 xcud41i x139jcc6 x4vbgl9 x1rdy4ex">
  <div class="x9f619 x1n2onr6 x1ja2u2z x78zum5 xdt5ytf x193iq5w xeuugli x1r8uery x1iyjqo2 xs83m0k x150jy0e x1e558r4 xjkvuk6 x1iorvi4">
    <div aria-label="Next" class="x1i10hfl xjbqb8w x1ejq31n xd10rxx x1sy0etr x17r0tee x972fbf xcfux6l x1qhh985 xm0m39n x1ypdohk xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1o1ewxj x3x9cwd x1e5q0jg x13rtm0m x87ps6o x1lku1pv x1a2a7pz x9f619 x3nfvp2 xdt5ytf xl56j7k x1n2onr6 xh8yej3"
      role="button" tabindex="0">
      <div role="none" class="x1ja2u2z x78zum5 x2lah0s x1n2onr6 xl56j7k x6s0dn4 xozqiw3 x1q0g3np xi112ho x17zwfj4 x585lrc x1403ito x972fbf xcfux6l x1qhh985 xm0m39n x9f619 xn6708d x1ye3gou xtvsq51 x1r1pt67">
        <div class="x6s0dn4 x78zum5 xl56j7k x1608yet xljgi0e x1e0frkt">
          <div role="none" class="x9f619 x1n2onr6 x1ja2u2z x193iq5w xeuugli x6s0dn4 x78zum5 x2lah0s x1fbi1t2 xl8fo4v"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x1lliihq x1s928wv xhkezso x1gmr53x x1cpjm7i x1fgarty x1943h6x xudqn12 x3x7a5m x6prxxf xvq8zen x1s688f xtk6v10" dir="auto"><span class="x1lliihq x6ikm8r x10wlt62 x1n2onr6 xlyipyv xuxw1ft">Next</span></span>
          </div>
        </div>
        <div class="x1ey2m1c xds687c x17qophe xg01cxk x47corl x10l6tqk x13vifvy x1ebt8du x19991ni x1dhq9h x1o1ewxj x3x9cwd x1e5q0jg x13rtm0m" role="none" data-visualcompletion="ignore" style="inset: 0px;"></div>
      </div>
    </div>
  </div>
</div>

问题原因 #

1. locator的默认等待逻辑：page.locator().click()会默认等待元素进入完全可交互状态——即元素可见、启用（无disabled属性或JS控制的禁用状态）且可点击。而page.$().click()是直接调用DOM元素的点击方法，不会做这些严格检查，哪怕元素的前端状态还没完全同步到可交互，也能触发点击。
2. Facebook按钮的状态更新延迟：输入内容后，Facebook的Next按钮虽然视觉上从灰色变为可点击，但内部的可交互状态标记可能存在延迟更新，导致locator的等待条件无法满足，最终触发超时。

解决方法 #

方法1：修改locator.click()的等待选项 #

跳过对“启用状态”的检查，只等待元素可见后点击：

await page.locator(nextButtonSelector).click({
  waitForEnabled: false,
  waitForVisible: true
});

方法2：显式等待元素可见后再点击 #

先确保元素已可见，再执行点击操作：

await page.locator(nextButtonSelector).waitFor({ state: "visible" });
await page.locator(nextButtonSelector).click();

方法3：优化定位器，使用文本定位 #

直接通过按钮文本定位，避免依赖动态class或属性：

await page.locator('::-p-text("Next")').click();

方法4：添加操作延迟 #

输入文本后等待短暂时间，让Facebook的前端状态完全更新：

await page.keyboard.type(text);
await page.waitForTimeout(1000); // 可根据实际情况调整等待时长
await page.locator(nextButtonSelector).click();

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