UI 自動化神器：Playwright 有哪些元素定位方法

Playwright 是微軟開發的 Web 應用 的 自動化測試框架 ，它可以彌補傳統 UI 自動化框架 selenium 很多的不足，在目前衆多的 UI 自動化測試工具中脫穎而出。所以，本文章給大家介紹這個 UI 自動化神器的安裝使用和元素定位方法，如果還沒有用過的同學可以趕緊 get 起來哦~！

前****言

1、playwright 介紹：

Playwright 是由微軟 2020 年開發發佈的一款新型自動化測試框架， 可以 UI 自動化測試 和接口自動化測試 移動端的 web 仿真應用。Playwright 是基於 Node.js 語言開發的，而且不需要再重新下載一個瀏覽器驅動，相當於已經寫好了，僅僅需要安裝這個庫即可。

官方中文文檔：https://playwright.net.cn/python/docs/intro

相比於 selenium 的優勢：

• 不用自己安裝瀏覽器，也不用安裝驅動，不用考慮驅動和瀏覽器的兼容性，更穩定且兼容性更好

• 內部自帶等待機制  不用自己寫太多的等待

• 自帶很豐富的斷言的方法

• Playwright 通過使用瀏覽器的底層調試協議來進行操作，相比於 Selenium 和 pyppeteer，它具有更快的執行速度和更低的資源消耗

• 支持異步請求操作， 可以跨多個窗口操作 不相互影響 能實現相互隔離， 快速執行

• 支持屏幕錄製功能：根據屏幕錄製指定生成相關操作代碼。

• 自帶定位檢測器：幫助我們做元素定位 ，也可以像 selenium F12 自己寫元素定位，支持豐富的元素定位的方法

playwright 的特色：

1）跨瀏覽器支持：包括 Chrome、Firefox 和 WebKit 內核的瀏覽器。

2）跨平臺：在 Windows、Linux 和 macOS 上進行本地或 CI 測試，無頭或有頭模式。

3）跨語言： 在 TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API

4）測試移動端：適用於 Android 的 Google Chrome 和 Mobile Safari 的原生移動模擬。

2、安裝環境：

• 1）安裝 playwright： pip install playwright

• 2）安裝瀏覽器驅動：

• playwright install ： 會安裝 Chromium、Firefox 和 WebKit 的瀏覽器二進制文件

• 也可以通過提供參數來安裝特定瀏覽器 ：playwright install webkit

• playwright install --help 可以查看支持哪些瀏覽器

• 3）安裝 pytest 插件： Playwright 推薦使用官方的 Playwright Pytest 插件來編寫端到端測試。

• pip install pytest-playwright

3、playwright 的元素定位

playwright 的元素定位方法有很多，官方文檔：https://playwright.net.cn/python/docs/locators  

第一類：get_by_xx 定位

1、 get_by_role: 通過角色方式定位元素，適用按鈕、複選框、彈框等 ； 常用的參數有兩個，第一個是角色名稱 role，第二個是元素的文本 name 或者 value 的值

• page.get_by_role("link", ).click()  # 百度新聞鏈接

• page.get_by_role("button",).click()  # 百度一下按鈕

2、get_by_text: 通過元素的文本內容來查找元素，適用於鏈接文本、或者 span 標籤中的文本等 ；包含兩個參數，一個是 text 標識定位的文本內容， 第二個是 exact 表示是否精確匹配；

• 默認是模糊匹配的，要精準匹配就加上參數 exact=True；

• page.get_by_text("百度一下",exact=True).click()

• page.get_by_text("新聞", exact=True).click()     #會自動忽略文本開頭和結尾的空白字符

3、get_by_placeholder: 通過元素的 placeholder 屬性來查找元素 ，也就是我們輸入框的提示信息。他的參數和 get_by_text 相同

• exact=True：表示是否精確匹配

• page.get_by_placeholder("請輸入郵箱 / 手機號 / 賬號").fill("tricy")    # 課堂派的用戶名輸入框

還有很多其他的定位，但是這種定位方法瞭解即可， 我們只需要使用第二種定位器 locator，因爲可以實現一切元素定位。

第二類：locator 定位器，重點掌握，後面只需要用這個

這個 locator 方法返回的是一個 locator 定位器對象 【不是 selenium 的 element 對象】：這個 locator 對象 支持各種操作方法，通過 locator 定位器來找元素 :

• 1）id 屬性定位： page.locator("id=kw").fill("檸檬班")

• 2）元素指定屬性定位：page.locator("[attribute=value]")

• page.locator("[name=wd]").fill("檸檬班")

• page.locator("[class=s_ipt]").fill("檸檬班")

• 3）CSS selector 定位

• 4）Xpath 定位

對 css 和 xpath 後面可以自動識別 xpath 和 css selector 的表達式；我們先來學習一下 css 和 xpath 定位方法：

• xpath 定位 (相對) ：萬能，推薦使用，重點學習。

• css selector：有弊端，不能支持文本定位，但是 xpath 可以。而且只支持 web 頁面，app 不支持。所以，不如 xpath 用的多。

1）css 選擇器元素定位 -- 瞭解

1、根據 ID 定位：兩種寫法都可以

page.locator("#kw").fill("檸檬班")

2、根據 className 定位： 可以支持多個樣式一起寫

page.locator(".s_ipt").fill("python")  # 百度搜索框

page.locator(".s-top-right-text.c-font-normal.c-color-t.s-top-right-new").click()  # 百度設置按鈕

3、單屬性選擇定位： 需要其他的屬性一起定位，可以用標籤 [屬性名 =“屬性值”]

page.locator("input[name='wd']").fill("python")   # 百度搜索框

4、多屬性選擇定位： 如果一個屬性不能唯一定位，用個屬性組合

page.locator("input[name='wd'][id='kw']").fill("python")

2）xpath 元素定位：支持 web 頁面 + App 頁 + 小程序 ，高級強大，重點學習。屬性 + 文本 + 組合方式靈活。

• xpath 其實就是一個 path（路徑），一個描述頁面元素位置信息的路徑，相當於元素的座標

• xpath 基於 XML 文檔樹狀結構，是 XML 路徑語言，用來查詢 xml 文檔中的節點

• 既可以用於 XML，也可以用於 HTML（因爲 XML 與 HTML 結構類似，所以 xpath 都可以解析）

絕對路徑：從根節點開始，一層一層寫出來，直到要找到元素。父 / 子 路徑和位置都涵蓋了，所以特別不穩定。

• 從根節點（/）開始，一層一層寫出來，直到要找到元素。父 / 子 【路徑和位置依賴】

• copy xpath ：/html/body/div[2]/div[2]/div/div[1]/div[2]/ul/li[1]/a[2] -- 9 代單傳的路徑。

相對路徑： 以 // 開頭，相對於某個節點的路徑來找通過條件在 html 裏面找。

• 在頁面當中查看 xpath 表達式，可以匹配多少元素：F12 -- ctrl + F

1、第一種寫法：

• // 元素標籤名稱 [@屬性 = 值] # 屬性值是不變的。 == 區分一下 css 選擇器，不管是什麼屬性都是 @

• // 元素標籤名稱 [text()= 值] # 文本是不變的。

page.locator('//input[@id="kw"]')

2、第二種寫法：and or 來組合多個屬性和文本 // 元 [@屬性素標籤名稱 = 值 and @屬性 = 值 and text()= 值]

page.locator('//input[@id="su"and @type="submit"]')

3、第三種方法：contains(text(), 包含的內容) contains(@屬性名, 包含的內容)

• 什麼情況下去使用：當你的文本 / 屬性的值過長的情況，可以通過它來簡化表達式

• 注意：寫被包含的部分的時候，這部分內容必須是原始值連續的一段字串，不能是間隔的。

• 屬性包含匹配 + 文本包含匹配

page.locator('// 標籤名 [contains(@屬性名,'值')]')

4、層級定位： 按照 html 頁面順序 從上到下定位，//...//...//  

• page.locator('//nav[@class="nav-tabs"]//a[@class="nav__item"]')

5、軸定位：如果元素之間有父子關係（兒子找爸爸）、兄弟關係（找哥哥 / 找弟弟），可以用軸定位

• 從子孫元素，倒着找父元素或者祖先元素。

• 從兄弟姐妹元素，順着關係找到其它的兄弟姐妹。

• 關係疏理：要找的元素，是已知元素的 xxx 關係。

• 以下 6 個軸定位，重點關注標黑的三個：

• 語法 ： // 已找到的元素 / 軸定位名稱:: 元素名稱 [....]

案例:

page.locator('//span[text()="Tom"]/ancestor::td/following-sibling::td//span[text()=" 私信 "]')

總 結

在本文章中，我們詳細介紹了 Playwright 框架，並與 Selenium 進行了比較。介紹了安裝配置流程，並通過實戰項目展示了其強大元素定位的能力。

通過比較 Playwright 和 Selenium，我們可以看到 Playwright 在自動化測試領域的優勢。其跨瀏覽器和跨平臺的特性，以及對現代 Web 技術的全面支持，使其成爲開發人員和測試人員的首選。

我們鼓勵讀者在實際項目中嘗試使用 Playwright 框架，體驗其簡潔的 API 和出色的性能。無論您是開發人員、測試人員還是質量保證專家，Playwright 都將成爲您工作中的得力助手。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/8cCg6qGQ9hG3HRS0fWk43w