Playwright按类与角色筛选元素失败：为何找不到指定链接？

云上老周

2026-8-9

问题原因与解决方案

你的代码逻辑顺序有误——你先筛选所有role="link"的元素，再在这些元素内部查找带.navbar__brand类的子元素，但Playwright官网的导航栏品牌链接是自身带有.navbar__brand类的<a>标签，并非link元素的子元素，所以原写法找不到目标节点。

修正后的代码

test("homepage has title and links to intro page", async ({ page }) => {
  await page.goto("https://playwright.dev/");

  // 写法1：直接用CSS选择器定位带指定类的链接
  const links = page.locator("a.navbar__brand");
  // 写法2：用filter筛选带指定类的link元素（更语义化）
  // const links = page.getByRole("link").filter({ hasClass: "navbar__brand" });

  const count = await links.count();
  console.log("count is " + count); // 现在会输出预期的1
});