Puppeteer - 型別選擇器

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

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

語法

型別選擇器的語法如下：

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

在下面的示例中，讓我們識別突出顯示的具有標籤名 h4 的元素並獲取其文字 - 您正在瀏覽線上教育的最佳資源。

首先，請按照 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 selectorType(){
   //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 type selector
   const n = await page.$("h4")
   //obtain text
   const text = await (await n.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
selectorType()

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

node <filename>

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

node testcase1.js

命令成功執行後，元素上的文字 - 您正在瀏覽線上教育的最佳資源將列印到控制檯中。