Playwright 元素定位

一、get_by_XXXXX

1. get_by_role：根據元素角色進行定位, 常用的參數有兩個，第一個是角色名稱 role，第二個是元素的文本 name。其他參數的解釋大家可以參考源碼注釋。

# 獲取頁面名稱為確定的按鈕
page.get_bt_role('button', name='確定')?

playwright 有大量的角色可以供我們選擇，下面是源碼內的可定位的角色名稱：

    def get_by_role(self, role,name) -> Locator:''':param role: Literal["alert", "alertdialog", "banner","button", "caption", "cell", "checkbox","combobox", "dialog", "directory","document", "form",  "group", "heading", "img",  "link", "list", "listbox","menu", "menubar", "menuitem", progressbar", "radio", "radiogroup", "region", "row",  "scrollbar","search", "searchbox", "separator", "slider", "tab", "table",  "textbox", "time", "timer", "toolbar"]:param name::return:'''return self.page.get_by_role(role,name = name)

2. get_by_text：根據界面文本信息進行定位。包含兩個參數，一個是 text標識定位的文本內容，第二個是 exact 表示是否精確匹配。

# 定位文字信息為返回首頁的元素
page.get_by_text('返回首頁', exact=True)

3.?get_by_placeholder：根據placeholder進行定位，也就是我們輸入框的提示信息。他的參數和 get_by_text相同。

# 定位提示信息為 請輸入名稱 的輸入框
page.get_by_placeholder('請輸入名稱', exact=True).click

4. get_by_title：同上
5. get_by_lable：同上
6. get_by_alt_test: 同上
這一部分建議直接查看源碼，源碼每個方法的使用寫的挺清楚的。

二、locator

1. 根據元素 id 進行定位

# 定位id=user的元素
page.locator('#user')

2. 根據元素 css 進行定位

# 定位css為 homepage的元素
page.locator('.homepage')

3. 根據元素 xpath 進行定位

# 定位相對位置為/html/body/div[1]/div[3] 的元素
page.locator('/html/body/div[1]/div[3]')

以上是基礎版的元素定位方式，當遇到頁面樣式比較復雜的頁面時，會需要一些其他的定位方式

在 playwright中是支持多層篩選的，我們可以根據一個元素的信息來定位其子元素的信息。

三、nth()

根據元素索引來選擇元素，當符合定位信息的元素有多個時，我們通常要挑選出我們需要的元素，可以使用 nth()來進行挑選我們需要的是哪一個元素。索引是從 0 開始的

# 定位文本信息為 班級 的第三個元素
page.get_by_text('班級'， exact=True).nth(2)

四、first 和 last

根據名稱我們就可以知道，這是定位的第一個和最后一個元素，這兩個是作為類屬性使用的，使用時不需要加（）

# 定位第一個名稱為啟動的按鈕
page.get_by_role('button', name='啟動').first

五、filter()

是用來做篩選的。它的作用主要是在元素定位后，進行二次篩選。有利于在復雜的頁面當中，過濾出需要的元素。主要用到的參數有兩個，has_text: 包含的文本信息 has_not_text: 不包含的文本信息。

# 在 div 中定位文本信息為班級的元素
page.locator('div').filter(has_text='班級')

通常還會進一步進行篩選

# 在 div 中定位文本信息為班級的字段，并定位到其提示信息為請輸入的輸入框
page.locator('div').filter(has_text='班級').get_by_placeholder('請輸入')

六、鏈式選擇器

鏈式選擇器中的兩個符號，常用的是 >>

1.? >:? 定位子元素，定位和父級元素相鄰的元素，只能定位“親兒子”

2.? >>:??定位后代元素，定位父級元素下的所有元素，只要位于父元素下，都可以定位

鏈式選擇器用來根據多個 css 樣式定位元素。當元素沒有 id 并且 css 樣式又繁多的時候，可以通過使用鏈式選擇器，來根據多個 css 樣式進行元素定位。

# 定位 van-popover__wrapper 樣式下樣式為 MPMicon 的元素
page.locator('.van-popover__wrapper >> .MPMicon')

七、正則表達式

在根據文本信息進行元素定位時，有文本的部分內容會發生變化的情況，可以通過正則表達式，來根據某些固定的內容，進行元素定位。首先需要先了解一下正則表達式的知識

# 定位名稱由1-9數字開頭和“ 個 進行中” 文字結尾的按鈕
page.get_by_role("button", name=re.compile(r"[1-9]\d* 個 進行中$"))

以下是一些常用的page.locator()元素定位方法：

1. **CSS 選擇器**: 可以使用 CSS 選擇器定位元素。例如，`page.locator('.my-class')` 會定位到頁面上所有具有 "my-class" 類的元素。

2. **XPath**: 使用 XPath 表達式來定位元素。例如，`page.locator('//div[@id="my-id"]')` 會定位到頁面上所有 id 為 "my-id" 的 div 元素。

3. **文本內容**: 使用 `:text("my text")` 來定位包含特定文本的元素。例如，`page.locator(':text("Hello, World!")')` 會定位到頁面上所有包含 "Hello, World!" 文本的元素。

4. **特性選擇器**: 使用 `[attr=value]` 來定位具有特定屬性值的元素。例如，`page.locator('input[name="username"]')` 會定位到頁面上所有 name 屬性為 "username" 的 input 元素。

5. **ID 選擇器**: 使用 `#id` 來定位具有特定 id 的元素。例如，`page.locator('#my-id')` 會定位到頁面上 id 為 "my-id" 的元素。

6. **類選擇器**: 使用 `.class` 來定位具有特定類的元素。例如，`page.locator('.my-class')` 會定位到頁面上所有具有 "my-class" 類的元素。

7. **標簽名選擇器**: 使用 `tagname` 來定位特定類型的元素。例如，`page.locator('div')` 會定位到頁面上所有的 div 元素。

這些都是 Playwright 中 `page.locator()` 方法的常用定位方式。根據需要選擇合適的方法來定位元素。
----------

在 Playwright 中，`page.locator()` 方法返回一個元素定位器（Element Locator），這個定位器可以用于定位和操作頁面上的元素。以下是一些更深入的介紹：

1. **鏈式定位**：`page.locator()` 的返回值本身也有 `locator()` 方法，這意味著可以鏈式地定位元素。例如，`page.locator('.my-class').locator('.my-subclass')` 會定位到所有具有 "my-class" 類的元素中，再次具有 "my-subclass" 類的元素。

2. **操作元素**：定位器提供了一系列方法用于操作元素，例如 `click()`、`fill()`、`check()`、`uncheck()`、`selectOption()` 等。這些方法可以直接在定位器上調用，例如 `page.locator('#my-id').click()` 會點擊 id 為 "my-id" 的元素。

3. **獲取元素屬性和狀態**：定位器還提供了一些方法用于獲取元素的屬性和狀態，例如 `getAttribute()`、`innerText()`、`isVisible()`、`isChecked()` 等。例如，`page.locator('#my-id').getAttribute('value')` 會返回 id 為 "my-id" 的元素的 value 屬性值。

4. **等待元素**：定位器提供了 `waitFor()` 方法用于等待元素出現。例如，`page.locator('#my-id').waitFor()` 會等待直到 id 為 "my-id" 的元素出現。

5. **處理多個元素**：如果定位器定位到多個元素，你可以使用 `nth()` 方法來選擇其中的一個。例如，`page.locator('.my-class').nth(1)` 會選擇第二個具有 "my-class" 類的元素（索引從 0 開始）。

6. **元素計數**：你可以使用 `count()` 方法來獲取定位器定位到的元素數量。例如，`page.locator('.my-class').count()` 會返回頁面上具有 "my-class" 類的元素的數量。

這些都是 Playwright 中 `page.locator()` 方法的高級用法。你可以根據你的需要使用這些方法來定位和操作元素。
--------

更多高級用法和技巧：

1. **元素的文本內容**：`textContent()` 方法可以用于獲取元素的文本內容。例如，`page.locator('#my-id').textContent()` 會返回 id 為 "my-id" 的元素的文本內容。

2. **元素的 HTML**：`innerHTML()` 方法可以用于獲取元素的內部 HTML。例如，`page.locator('#my-id').innerHTML()` 會返回 id 為 "my-id" 的元素的內部 HTML。

3. **元素的外部 HTML**：`outerHTML()` 方法可以用于獲取元素的外部 HTML。例如，`page.locator('#my-id').outerHTML()` 會返回 id 為 "my-id" 的元素的外部 HTML。

4. **等待元素消失**：`waitFor({ state: 'detached' })` 方法可以用于等待元素消失。例如，`page.locator('#my-id').waitFor({ state: 'detached' })` 會等待直到 id 為 "my-id" 的元素消失。

5. **等待元素隱藏**：`waitFor({ state: 'hidden' })` 方法可以用于等待元素隱藏。例如，`page.locator('#my-id').waitFor({ state: 'hidden' })` 會等待直到 id 為 "my-id" 的元素隱藏。

6. **等待元素顯示**：`waitFor({ state: 'visible' })` 方法可以用于等待元素顯示。例如，`page.locator('#my-id').waitFor({ state: 'visible' })` 會等待直到 id 為 "my-id" 的元素顯示。

7. **等待元素可編輯**：`waitFor({ state: 'editable' })` 方法可以用于等待元素可編輯。例如，`page.locator('#my-id').waitFor({ state: 'editable' })` 會等待直到 id 為 "my-id" 的元素可編輯。

8. **等待元素被選中**：`waitFor({ state: 'checked' })` 方法可以用于等待元素被選中。例如，`page.locator('#my-id').waitFor({ state: 'checked' })` 會等待直到 id 為 "my-id" 的元素被選中。

這些都是 Playwright 中 `page.locator()` 方法的一些更高級的用法和技巧。通過熟練掌握這些方法，可以更有效地定位和操作網頁上的元素。
----------------------------------------------------------------------------------------

在 Playwright 中，Locator 是自動等待和重試機制的核心部分。簡單來說，Locator 提供了在任何時刻在頁面上找到元素的方法。可以使用 page.locator() 方法創建一個 Locator。

Locator 對象的主要優點是它們可以自動等待元素出現在頁面上。例如，如果你創建了一個 Locator，然后立即嘗試點擊它，但是這個元素還沒有出現在頁面上，Playwright 會自動等待這個元素出現，然后再執行點擊操作。

此外，Locator 對象還可以重試操作。例如，如果你嘗試點擊一個 Locator，但是這個元素在被點擊的瞬間消失了，Playwright 會自動重試點擊操作，直到操作成功或超時。
以下是一些使用 Locator 對象方法的示例：

# 創建一個 Locator
locator = page.locator('#my-id')# 點擊 Locator
locator.click()# 填充 Locator
locator.fill('Hello, world!')# 獲取 Locator 的文本
text = locator.text_content()# 獲取 Locator 的 HTML
html = locator.inner_html()# 等待 Locator 出現在頁面上
locator.wait_for()# 等待 Locator 從頁面上消失
locator.wait_for('hidden')

以下是 `Locator` 對象的方法和屬性的簡單解釋：

---Methods---

- `all`: 返回所有匹配的元素。
- `all_inner_texts`: 返回所有匹配元素的內部文本。
- `all_text_contents`: 返回所有匹配元素的文本內容。
- `and_`: 創建一個新的 `Locator`，它匹配同時滿足當前 `Locator` 和另一個條件的元素。
- `blur`: 讓匹配的元素失去焦點。
- `bounding_box`: 返回匹配元素的邊界框。
- `check`: 勾選匹配的元素（如果它是一個復選框或單選框）。
- `clear`: 清除匹配元素的輸入值（如果它是一個輸入元素）。
- `click`: 點擊匹配的元素。
- `count`: 返回匹配元素的數量。
- `dblclick`: 雙擊匹配的元素。
- `dispatch_event`: 在匹配的元素上分發一個事件。
- `drag_to`: 將匹配的元素拖動到另一個位置。
- `evaluate`: 在匹配的元素上執行一個 JavaScript 函數。
- `evaluate_all`: 在所有匹配的元素上執行一個 JavaScript 函數。
- `evaluate_handle`: 獲取一個可以在匹配的元素上執行 JavaScript 的句柄。
- `fill`: 填充匹配元素的輸入值（如果它是一個輸入元素）。
- `filter`: 創建一個新的 `Locator`，它匹配滿足一個函數的元素。
- `focus`: 讓匹配的元素獲取焦點。
- `frame_locator`: 返回匹配元素的 `FrameLocator`（如果它是一個 `iframe` 元素）。
- `get_attribute`: 獲取匹配元素的屬性值。
- `get_by_alt_text`: 創建一個新的 `Locator`，它匹配 `alt` 屬性包含指定文本的元素。
- `get_by_label`: 創建一個新的 `Locator`，它匹配 `label` 屬性包含指定文本的元素。
- `get_by_placeholder`: 創建一個新的 `Locator`，它匹配 `placeholder` 屬性包含指定文本的元素。
- `get_by_role`: 創建一個新的 `Locator`，它匹配 `role` 屬性包含指定文本的元素。
- `get_by_test_id`: 創建一個新的 `Locator`，它匹配 `data-testid` 屬性包含指定文本的元素。
- `get_by_text`: 創建一個新的 `Locator`，它匹配文本包含指定文本的元素。
- `get_by_title`: 創建一個新的 `Locator`，它匹配 `title` 屬性包含指定文本的元素。
- `highlight`: 高亮匹配的元素。
- `hover`: 將鼠標懸停在匹配的元素上。
- `inner_html`: 獲取匹配元素的內部 HTML。
- `inner_text`: 獲取匹配元素的內部文本。
- `input_value`: 獲取匹配元素的輸入值（如果它是一個輸入元素）。
- `is_checked`: 檢查匹配的元素是否被勾選（如果它是一個復選框或單選框）。
- `is_disabled`: 檢查匹配的元素是否被禁用。
- `is_editable`: 檢查匹配的元素是否可編輯。
- `is_enabled`: 檢查匹配的元素是否啟用。
- `is_hidden`: 檢查匹配的元素是否隱藏。
- `is_visible`: 檢查匹配的元素是否可見。
- `locator`: 創建一個新的 `Locator`，它匹配滿足一個定位器的元素。
- `nth`: 創建一個新的 `Locator`，它匹配第 n 個元素。
- `or_`: 創建一個新的 `Locator`，它匹配滿足當前 `Locator` 或另一個條件的元素。
- `press`: 在匹配的元素上按下一個鍵（如果它是一個輸入元素）。
- `press_sequentially`: 在匹配的元素上按下一系列的鍵（如果它是一個輸入元素）。
- `screenshot`: 對匹配的元素進行截圖。
- `scroll_into_view_if_needed`: 如果需要，將匹配的元素滾動到視圖中。
- `select_option`: 選擇匹配的元素的一個選項（如果它是一個 `select` 元素）。
- `select_text`: 選擇匹配的元素的文本（如果它是一個輸入元素或 `textarea` 元素）。
- `set_checked`: 設置匹配的元素的勾選狀態（如果它是一個復選框或單選框）。
- `set_input_files`: 設置匹配的元素的輸入文件（如果它是一個文件輸入元素）。
- `tap`: 在匹配的元素上進行觸摸操作。
- `text_content`: 獲取匹配元素的文本內容。
- `uncheck`: 取消勾選匹配的元素（如果它是一個復選框或單選框）。
- `wait_for`: 等待匹配的元素滿足一個條件。