Puppeteer - 定位器

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

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

為了唯一地確定一個元素，我們可以藉助 HTML 標籤內的任何屬性，也可以使用 HTML 標籤上屬性的組合。通常使用 id 屬性，因為它對頁面是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，例如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的獨特屬性或屬性及其值的組合來識別元素。為此，我們必須使用 xpath 表示式。

定位元素的方法

這些方法列在下面：

page.$(定位器值)

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

page.$$(定位器值)

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

page.$x(xpath 值)

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

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

在下圖中，讓我們以具有 li 標籤（具有父元素 ul）和 class 屬性值為 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 等是元素的屬性。

例如，在表示式 id = "gsc-i-id1" 中，= 左側的文字是屬性名稱 (id)，= 右側的文字是屬性值 (gsc-i-id1)。

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

讓我們以一個具有以下 HTML 程式碼的元素為例：

我們可以使用以下表達式識別上圖中的第一個複選框：

const n = await page.$("input[type='checkbox']")

首先，請按照 Puppeteer 的基本測試章節中的步驟 1 到步驟 2 操作，步驟如下：

步驟 1 - 在建立 node_modules 資料夾的目錄中建立一個新檔案（Puppeteer 和 Puppeteer core 已安裝的位置）。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 - 輸入檔名，例如 testcase1.js。

步驟 3 - 在建立的 testcase1.js 檔案中新增以下程式碼。

//Puppeteer library
const pt= require('puppeteer')
async function checkBoxHandle(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/checkboxes')
   //identify element with xpath then click
   const n = await page.$("input[type='checkbox']")
   n.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

步驟 4 - 使用以下命令執行程式碼：

node <filename>

所以在我們的例子中，我們將執行以下命令：

node testcase1.js

命令成功執行後，布林值 true 將列印在控制檯中。這是 getProperty("checked") 返回的值，因為複選框已選中，所以返回 true。

列印頁面