《最新出爐》系列初窺篇-Python+Playwright自動化測試-5-元素定位大法-上篇

1.簡介

說到元素定位，小夥伴或者童鞋們肯定會首先想到 selenium 的八大元素定位大法。同理Playwright也有自己的元素定位的方法。今天就給小夥伴或者童鞋們講解和分享一下Playwright的元素定位方法。

宏哥對UI自動化的理解：定位元素--->操作元素---->斷言。

2.定位器

定位器（Locator）是 Playwright 的自動等待和重試能力的核心部分。定位器是一種隨時在網頁上查詢元素的方法，用於在元素上執行諸如 .click、.fill 之類的操作。可以使用 page.locator(selector, **kwargs) 方法建立自定義定位器。

選擇器（Selector）是用於建立定位器的字串。Playwright 支援許多不同的選擇器，比如 Text、CSS、XPath 等。閱讀 in-depth guide 檔案，瞭解更多關於可用的選擇器以及如何進行選擇的資訊。

3.內建定位器

這些是 playwright 推薦的內建定位器。

• page.get_by_role()通過顯式和隱式可存取性屬性進行定位。
• page.get_by_text()通過文字內容定位。
• page.get_by_label()通過關聯標籤的文字定位表單控制元件。
• page.get_by_placeholder()按預留位置定位輸入。
• page.get_by_alt_text()通過替代文字定位元素，通常是影象。
• page.get_by_title()通過標題屬性定位元素。
• page.get_by_test_id()根據data-testid屬性定位元素（可以設定其他屬性）。

當然除了這些，還有其他定位方法，selenium的8種by元素定位，id、xpath、css等都可使用，還有W3C標準規定的webDriver協定為5種定位方式CSS、Link text、Partial link text、Tag name、XPath

playwright把這些定位歸類成3種，分別是：css、xpath、text。

如：

page.locator("xpath=//h2")
page.locator("text=文字輸入") 
page.locator("#s-usersetting-top")
page.locator("input[name=\"wd\"]").click()
page.get_by_role("button", name="百度一下").click()
page2.get_by_placeholder("唱片名、表演者、條碼、ISRC").click()
page2.get_by_text("或者，親自來幫豆瓣新增：").click()

官方檔案給出一個登入系統的使用範例如下：

page.get_by_label("User Name").fill("John")

page.get_by_label("Password").fill("secret-password")

page.get_by_role("button", name="Sign in").click()

expect(page.get_by_text("Welcome, John!")).to_be_visible()

3.1角色定位-page.get_by_role()

Playwright帶有多個內建定位器。為了使測試具有彈性，我們建議優先考慮面向使用者的屬性和顯式協定，例如page.get_by_role()。例如：以下 DOM 結構。

button通過名稱為「登入」的角色定位元素。

page.get_by_role("button", name="Sign in").click()

每次將定位器用於操作時，都會在頁面中找到一個最新的 DOM 元素。在下面的程式碼片段中，底層 DOM 元素將被定位兩次，一次在每個動作之前。這意味著如果 DOM 由於重新渲染而在呼叫之間發生變化，則將使用與定位器對應的新元素。

locator = page.get_by_role("button", name="Sign in")

locator.hover()
locator.click()

請注意，所有建立定位器的方法（例如page.get_by_label() ）也可用於Locator和FrameLocator類，因此您可以將它們連結起來並迭代地縮小定位器的範圍。

locator = page.frame_locator("my-frame").get_by_role("button", name="Sign in")

locator.click()

page.get_by_role ()定位器反映了使用者和輔助技術如何感知頁面，例如某個元素是按鈕還是核取方塊。按角色定位時，通常還應傳遞可存取的名稱，以便定位器準確定位元素。

例如，考慮以下 DOM 結構。

 您可以通過其隱式角色定位每個元素：

expect(page.get_by_role("heading", name="Sign up")).to_be_visible()

page.get_by_role("checkbox", name="Subscribe").check()

page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()

角色定位器包括按鈕、核取方塊、標題、連結、列表、表格等，並遵循ARIA 角色、ARIA 屬性和可存取名稱的 W3C 規範。

請注意：許多html元素如：<button>都有一個隱式定義的角色，該角色可被角色定位器識別。

請注意，角色定位器不會取代可存取性稽核和一致性測試，而是提供有關 ARIA 指南的早期反饋。

3.1.1何時使用角色定位器

我們建議優先使用角色定位器來定位元素，因為這是最接近使用者和輔助技術感知頁面的方式。

3.2標籤定位-page.get_by_label()

大多數表單控制元件通常都有專用標籤，可以方便地用於與表單互動。在這種情況下，您可以使用page.get_by_label()通過其關聯標籤定位控制元件。例如：以下 DOM 結構。

您可以在通過標籤文字定位後填寫輸入：

page.get_by_label("Password").fill("secret")

3.2.1何時使用標籤定位器

定位表單區域時，使用標籤定位器。

3.3預留位置定位-page.get_by_placeholder()

輸入可能具有預留位置屬性，以向用戶提示應輸入的值。您可以使用page.get_by_placeholder()定位此類輸入。例如：以下 DOM 結構。

 您可以在通過預留位置文字定位後填充輸入：

page.get_by_placeholder("[email protected]").fill("[email protected]")

3.3.1何時使用預留位置定位器

在定位沒有標籤但具有預留位置文字的表單元素時，使用此定位器。

3.4文字定位-page.get_by_text()

根據元素包含的文字查詢元素。使用page.get_by_text()時，您可以通過子字串、精確字串或正規表示式進行匹配。例如:以下 DOM 結構。

 您可以通過元素包含的文字來查詢該元素：

expect(page.get_by_text("Welcome, John")).to_be_visible()

設定完全匹配：

expect(page.get_by_text("Welcome, John", exact=True)).to_be_visible()

與正規表示式匹配：

expect(page
    .get_by_text(re.compile("welcome, john", re.IGNORECASE)))
    .to_be_visible()

page.get_by_alt_text("playwright logo").click()

expect(page.get_by_title("Issues count")).to_have_text("25 issues")

page.get_by_test_id("directions").click()

playwright.selectors.set_test_id_attribute("data-pw")

page.get_by_test_id("directions").click()

page.locator("css=button").click()
page.locator("xpath=//button").click()

page.locator("button").click()
page.locator("//button").click()

page.locator(
    "#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"
).click()

page.locator('//*[@id="tsf"]/div[2]/div[1]/div[1]/div/div[2]/input').click()

page.click("text=北京-宏哥")
page.click("text='北京-宏哥'")

<input type=button value="百度一下">

<button>百度一下</button>

page.fill("id=kw", "北京-宏哥")

#id 屬性+ css
page.fill('form >> [name="username"]', "北京-宏哥")
page.fill('form >> #TANGRAM__PSP_11__password', "aa123456")
page.click("text=登入")

#page.fill('form >> [name="username"]', "北京-宏哥")
page.locator("form").locator('[name="username"]').fill("北京-宏哥")

<input id="TANGRAM__PSP_11__submit" type="submit" value="登入" class="pass-button pass-button-submit">