CSS セレクター

CSS セレクターは、スタイルシートがどの要素にルールを適用するかを決めるときに使うパターンそのものです。テストツールはこれを要素の検索に再利用しています。Selenium では By.cssSelector、Playwright では page.locator()、Cypress では cy.get() を通じて使います。セレクターはブラウザによってネイティブに評価され、同等の XPath より短いことが多く、ほとんどのフロントエンド開発者が読めます。

具体例

#email                          id
.alert.alert-error              element with both classes
button[type="submit"]           tag plus attribute
[data-testid="checkout"]        dedicated test attribute
form.login > button             direct child
ul.results li:nth-child(2)      second list item
a[href^="/invoices/"]           attribute starts with
input:not([disabled])           negation

driver.findElement(By.cssSelector("[data-testid='checkout']")).click();

await page.locator('[data-testid="checkout"]').click();

XPath との違い

• テキストのマッチング。 標準の CSS ではテキスト内容で要素を選択できません。XPath ではでき、Playwright は独自のテキストエンジン（getByText や、page.locator() 内の :has-text() 疑似クラス）を追加していますが、これらは Playwright の拡張であり CSS ではありません。
• 方向。 CSS は長年、下方向にしかたどれませんでした。現在のブラウザでサポートされている :has() 疑似クラスを使えば、子要素によって親要素にマッチさせられ（tr:has(td.overdue)）、この差の多くが埋まりました。
• 読みやすさ。 id、クラス、属性でのマッチングなら、CSS の方が短く明快です。

よくある間違い

• スタイル用のクラスをロケーターに使う。 .btn-blue はデザインが変わると変わります。ユーティリティクラス系のフレームワークではさらに悪化します。
• 長い構造的な連鎖。 div > div > div:nth-child(3) span はレイアウトをそのままコード化しており、ラッパー要素が 1 つ追加されるだけで壊れます。
• :nth-child と :nth-of-type の混同。 li:nth-child(2) は「親の 2 番目の子である li」という意味で、「2 番目の li」ではありません。

マークアップを管理できる場合は、開発者と合意した data-testid 属性が最も安定した CSS ロケーターです。管理できない場合は、フレームワークが提供していればロールベースのロケーターを優先します。