名稱選擇器和類名選擇器

讓我們從學習名稱選擇器開始。

名稱選擇器

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

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

語法

名稱選擇器的語法如下：

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

讓我們識別下圖中突出顯示的編輯框並輸入文字：

上圖中突出顯示的元素的 name 屬性值為 search。上述元素的名稱選擇器表示式應為 [name="search"]。

首先，請按照 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 selectorName(){
   //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 edit box with name
   const f = await page.$('[name="search"]')
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //browser close
   await browser.close()
}
selectorName()

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

node <filename>

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

node testcase1.js

類名選擇器

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

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

語法

類名選擇器的語法如下：

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

在下面的示例中，讓我們識別具有類名 heading 並獲取其文字 - About Tutorialspoint 的突出顯示元素。

上述元素的 ID 選擇器表示式應為 .heading。