定位篇

UI 自動化很多時候的苦惱都是定位不到,其實說實話我到現在有時候也是莫名其妙的定位到或者定位不到。好在這個框架定位方式的上限非常以及特別的高，這就像人有錢和沒錢的區別主要在于選擇權一樣，有選擇的人生才是幸福的。出門想開法拉利就開法拉利，想開拖拉機就開拖拉機。

定位的詳細介紹

1、官方是不推薦 xpath 和 css 的,原話意思是 CSS 和 XPATH 是綁定于 DOM 上的，當 DOM 結構出現更改他們將失效。

2、文本內容，輸入框內的 placeholder，labels 等這些我們可以理解成面向業務的屬性這些反而不那么容易改變所以定位應該盡量的去面向業務。

文本選擇器定位

下文這樣是一個基礎的文本定位 特點有

1、模糊匹配

2、不缺分英文的大小寫

3、如果存在多個會報錯

page.locator("text=社區").click()

也可以使用簡寫的方式，注意其中的單引號

page.locator("'Log in'").click()

比較精準的方式,點擊 id=main-nav-menu 包含的元素里文本='社區'的元素，這里使用了 text() 偽類

page.locator("#main-nav-menu :text('社區')").click()

結合 CSS 使用，僅匹配 article 元素

page.locator('article:has-text("All products")').click()

CSS 選擇器定位

點擊 button 按鈕

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

通過屬性定位，點擊屬性中存在 href="/topics"的元素

page.locator('[href="/topics"    ]').click()

通過屬性精準定位：點擊 ID=nav-bar 元素下的 href="/topics"的元素

page.locator('#main-nav-menu [href="/topics"    ]').click()

通過 placeholder 定位以及輸入

page.locator('[placeholder="搜索"]').fill('電子校的故事')

布局定位結合 CSS,也是我最喜歡的

page.locator("input:right-of(:text('開源項目'))").fill('電子校的故事')

非常的實用，尤其是在我們經常測的管理系統里邊 dialog 里,只要左側的 label 不變~ 代碼就不用改

解釋下上邊這段代碼，大家一邊看代碼一邊把頭往顯示器的右上偏左側看下。

定位的的呢是一個 Input,一個在文本為'開源項目'右側的 input。

同理這里可以使用:right-of、:left-of、:above、:below、:near 這幾種布局定位的方式

根據元素可用

點擊一個可用的 button

page.locator("button:visible").click()
page.locator("button >> visible=true").click()

繼續說說屬性

點擊一個按鈕，它的文本包含了 Click me。另這里也可使用正則表達式

page.locator("button", has_text="Click me").click()