1.text selecter
# Find by text.
page.locator("text=Sign up").click()
2.Css selecter
# Find by CSS.
page.locator("#nav-bar .contact-us-item").click()
3.css and text selecter
page.locator("article:has-text('Playwright')").click()
page.locator("#nav-bar :text('Contact us')").click()
4.css and another selecter
page.locator(".item-description:has(.item-promo-banner)").click()
5.layout selecter
# Fill an input to the right of "Username".
page.locator("input:right-of(:text(\"Username\"))").fill("value")
# Click a button near the promo card.
page.locator("button:near(.promo-card)").click()
# Click the radio input in the list closest to the "Label 3".
page.locator("[type=radio]:left-of(:text(\"Label 3\"))").first.click()
2.Filtering Locators
page.locator("button", has_text="Sign up").click()
page.locator("article", has=page.locator("button.subscribe"))
3.pick n-th application
For Example:
<section> <button>Buy</button> </section>
<article><div> <button>Buy</button> </div></article>
<div><div> <button>Buy</button> </div></div>
# Click the third "Buy" button
page.locator(":nth-match(:text('Buy'), 3)").click()
# Wait until all three buttons are visible
page.locator(":nth-match(:text('Buy'), 3)").wait_for()
