[[Playwright]]の[[Filtering Locators]] (`.filter({ hasText: "hoge" })`) と [[page.getByText]] (`.getByText("hoge")`) は似通っているが少し違う。
たとえば以下の[[HTML]]があるとき。
```html
<div
data-testid="banner"
class="v-banner v-sheet theme--light v-banner--has-icon v-banner--single-line"
>
<div class="v-banner__wrapper">
<div class="v-banner__content">
<div
class="v-avatar v-banner__icon"
style="height: 40px; min-width: 40px; width: 40px"
>
<i
aria-hidden="true"
data-testid="icon"
class="v-icon notranslate mdi mdi-wifi-strength-alert-outline theme--light warning--text"
style="font-size: 36px"
></i>
</div>
<div class="v-banner__text">
<div>インターネットにつながっていません</div>
</div>
</div>
<div class="v-banner__actions">
<button
type="button"
class="v-btn v-btn--text theme--light v-size--default primary--text"
>
<span class="v-btn__content"> 再接続 </span>
</button>
</div>
</div>
</div>
```
`page.getByTestId("banner").getByText("再接続")`は、**対象の[[Locator]]の子孫で`再接続`を含む要素を取得する**。つまり、フォーカスされるのは以下。
```html
<button
type="button"
class="v-btn v-btn--text theme--light v-size--default primary--text"
>
<span class="v-btn__content"> 再接続 </span>
</button>
```
一方、`page.getByTestId("banner").filter({ hasText: "再接続" })`は、**対象の[[Locator]]から`再接続`のテキストを含むもののみをフィルタリングする**。つまり、**子孫を取得するわけではなく、呼び出し元の[[Locator]]をフィルタリングするだけ**である。つまり、フォーカスされるのは1つ目のコードブロックすべてとなる。