Puppeteer - 元素操作

我們可以使用 Puppeteer 處理頁面上的元素。一旦我們導航到一個網頁，我們就需要與頁面上可用的網頁元素進行互動，例如點選連結/按鈕，在編輯框中輸入文字等等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別元素。為了唯一地獲取元素的屬性，我們需要檢查它（右鍵點選元素，然後選擇“檢查”選項）。ElementHandle 物件由方法 page.$、page.$$ 和 page.$x 建立。這些物件引用頁面上的元素或標籤。

Puppeteer 定位元素的方法

這些方法列在下面：

page.$(定位器值)

此方法返回一個包含 ElementHandle 的 Promise。ElementHandle 是已識別元素的物件。如果有多個元素具有相同的定位器值，則僅返回頁面左上角第一個匹配的元素。

page.$$(定位器值)

此方法返回一個包含 ElementHandle 陣列的 Promise。如果有多個元素具有相同的定位器值，則所有匹配的元素都將以陣列的形式返回。

page.$x(xpath 值)

此方法返回一個包含 ElementHandle 陣列的 Promise。如果有多個元素具有相同的 xpath 值，則所有匹配的元素都將以陣列的形式返回。如果只有一個匹配的元素，則返回的陣列將包含單個元素。

ElementHandle 方法（如 elementHandle.$、elementHandle.$$ 和 elementHandle.$x）可以應用於元素。在這種情況下，將在當前 ElementHandle 的 DOM 中搜索元素，而不是在整個 DOM 中搜索。

在下圖中，讓我們以一個具有 li 標籤（具有父元素 ul）且類屬性值為 heading 的元素為例。要使用頁面上的 ElementHandle 方法識別它，表示式應如下所示：

const n = await page.$(".heading")

要使用元素上的 ElementHandle 方法識別它，表示式應如下所示：

const m = await page.$("ul") 
const p = await m.$(".heading")

現在，請參考下面給出的具有 li 標籤的元素的影像

定位器型別

Puppeteer 中的定位器型別列在下面：

• ID

• 類

• 型別

• XPath

• 屬性

• 型別

要使用上述定位器，我們應該對 HTML 程式碼有基本的瞭解。讓我們以一個具有以下屬性的編輯框為例：

這裡，input 是標籤名。HTML 中的標籤可能具有也可能不具有屬性。type、class、name、id 等是元素的屬性。

例如，在表示式 class = "gsc-input" 中，= 左側的文字是屬性名稱（class），= 右側的文字是屬性值（gsc-input）。

屬性可能具有也可能不具有分配的值。此外，如果分配了值，則應將其括在雙引號或單引號中。屬性的值由開發人員根據自己的選擇設定。