选择器与断言
定位元素并断言状态
选择器与断言 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
优秀的选择器让测试更稳定
查找元素的方式决定了测试的稳健程度。与 CSS 类或 DOM 结构绑定的选择器在每次重新设计后都可能失效。语义化、面向用户的定位器能够经受重构，因为它们反映的是用户实际感知到的内容。
getByRole：首选定位器
getByRole 根据元素的无障碍角色和可访问名称查找元素。它是最可靠的定位器，同时也能起到无障碍检查的作用。
page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });getByLabel 和 getByPlaceholder
对于表单字段，请根据其关联标签或占位符进行定位，这正是用户识别它们的方式。
page.getByLabel('Email address');
page.getByPlaceholder('Search products');getByText 和 getByTestId
getByText 会匹配可见文本。当不存在语义化句柄时，可以退而使用 getByTestId，它读取的是您有意添加的 data-testid 属性。
page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">避免脆弱的 CSS 选择器
您仍然可以使用 page.locator('.css-selector')，但应将其视为最后的手段。类名和嵌套结构经常变化，而角色和标签很少变化。
// Fragile, avoid when possible:
page.locator('div.row > button.primary');面向 Web 的断言
Playwright 针对定位器提供的 expect 是面向 Web 的：它会自动重试，直到条件满足或超时。这是不稳定断言能够避免的关键。
await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();常见断言匹配器
匹配器用于描述元素或页面的预期状态。
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);断言列表数量
要检查重复出现的元素，请定位所有元素并断言数量。定位器会匹配每个元素，而 toHaveCount 会持续重试，直到结果稳定。
const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');否定断言
使用 .not 断言某个内容不存在或处于隐藏状态，例如删除项目后进行断言。
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();过滤和链式定位器
使用 filter 缩小定位器范围，或通过链式调用将范围限定在父元素内部，从而让断言更加精确。
const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();面向 Web 的断言为何优于手动轮询
面向 Web 的断言会重试整个表达式，而不只是重新读取过时的快照。因此，await expect(loc).toHaveText('Done') 会等待文本出现，消除手写等待经常导致的竞态条件。
快速检查
请选择最可靠的定位器。
回顾
优先使用语义定位器：getByRole、getByLabel、getByText，并将 getByTestId 作为备用方案。使用具备自动重试能力的面向 Web 匹配器（toBeVisible、toHaveText、toHaveCount、toHaveURL）进行断言，并使用 .not 和 filter 保持精确。
常见问题解答
「选择器与断言」课时是免费的吗？
是的 — 「选择器与断言」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「选择器与断言」这节课中我会学到什么？
定位元素并断言状态 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「选择器与断言」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。