Puppeteer - 獲取元素屬性

---

---

我們可以使用 Puppeteer 獲取元素的屬性值。屬性新增到 HTML 標籤內。它們用於描述元素的屬性。屬性及其值以鍵值對的形式定義。

讓我們以一個具有以下屬性的編輯框為例：

這裡，input 是標籤名。HTML 中的標籤可能包含屬性也可能不包含屬性。type、class、name、id 等是此元素的屬性。例如，在 id = gsc-i-id1 中，= 左側的文字是屬性名稱（即 id），= 右側的文字是屬性值（即 gsc-i-id1）。

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

元素屬性的方法

獲取元素屬性的方法如下：

getAttribute()

此方法用於獲取作為引數傳遞給此方法的屬性的值。

語法

語法如下：

let v = await page.$eval("input", element=> element.getAttribute("class"))

element.<attribute name>

語法

語法如下：

let v = await page.$eval("input", element=> element.class)

element.getProperty()

此方法用於獲取作為引數傳遞給此方法的屬性的值。

語法如下：

語法

const n = await page.$("#txt")
const t = await (await n.getProperty('textContent')).jsonValue()

在下圖中，讓我們識別高亮的編輯框並獲取其 class 屬性的值 - gsc-input。

首先，按照 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 getElementAttribute(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.tw/index.htm')
   //identify element with id
   const n = await page.$("#gsc-i-id1")
   //get class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
getElementAttribute()

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

node <filename>

因此，在我們的示例中，我們將執行以下命令：

node testcase1.js

成功執行命令後，元素的 class 屬性值 - gsc-input 將列印在控制檯中。