Puppeteer - 屬性選擇器

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

為此，我們的首要任務是識別元素。如果一個屬性及其值在一個標籤中只使用一次，我們可以將其用作屬性選擇器。如果有多個元素具有相同的屬性值，則只識別頁面上第一個匹配的元素。

語法

屬性選擇器的語法如下：

const f = await page.$("ul[name='val']")

這裡，ul 是標籤名，val 是為 name 屬性設定的值。

在下圖中，讓我們獲取突出顯示元素的文字 - 關於 Tutorialspoint：

上述元素的屬性選擇器表示式應為 li[class='heading']。

首先，請按照 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 selectorAttribute(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.tw/about/about_careers.htm')
   //identify element with attribute selector
   const n = await page.$("li[class='heading']")
   //obtain text
   const t = await (await n.getProperty('textContent')).jsonValue()
   console.log("Obtained text is: " + t)
}
selectorAttribute()

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

node <filename>

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

node testcase1.js

命令成功執行後，元素“關於 Tutorialspoint”的文字將列印在控制檯中。