如何在Playwright中精准定位并点击文本相同的指定Login按钮？

以下几种方法可以解决多个Login按钮的定位冲突问题：

• 利用元素层级关联定位：通过邮箱输入框与目标按钮的结构关系锁定元素，这种方式稳定性最高，不受元素顺序变化影响

  // 方式1：定位邮箱输入框的直接同级Login按钮
  const loginBtn = await page.locator('input[type="email"] + button:has-text("Login")');
  await loginBtn.click();
  
  // 方式2：定位包含邮箱输入框的父容器内的Login按钮
  const loginBtn = await page.locator('div:has(input[type="email"]) button:has-text("Login")');
  await loginBtn.click();
  

• 指定匹配元素的索引：如果邮箱旁的按钮在匹配结果中位置固定，可以通过索引选取（注意：页面元素顺序变更会导致失效）

  // 选取第一个匹配的Login按钮
  const loginBtn = await page.locator('button:has-text("Login")').first();
  await loginBtn.click();
  
  // 选取第二个匹配的Login按钮（索引从0开始）
  const loginBtn = await page.locator('button:has-text("Login")').nth(1);
  await loginBtn.click();
  

• 利用按钮的唯一属性定位：如果目标按钮有唯一的id、class或自定义属性，直接通过这些属性定位

  // 通过唯一id定位
  const loginBtn = await page.locator('#email-login-btn');
  await loginBtn.click();
  
  // 通过特定class组合定位
  const loginBtn = await page.locator('button.email-login-btn:has-text("Login")');
  await loginBtn.click();
  

• 使用XPath关联邮箱输入框：通过XPath的兄弟节点语法精准定位

  const loginBtn = await page.locator('xpath=//input[@type="email"]/following-sibling::button[text()="Login"]');
  await loginBtn.click();
  

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