處理編輯框和複選框

讓我們瞭解 Puppeteer 如何處理編輯框。

處理編輯框

Puppeteer 能夠處理編輯框。編輯框的 HTML 標籤為 input，其 type 屬性設定為 text 值。

一些處理編輯框的方法列在下面：

type()

此方法用於將文字輸入編輯框和文字區域，而不會替換已有的內容。

語法

type() 的語法如下：

const n = await page.$("#txt")
await n.type("Puppeteer")

我們可以延遲在編輯框中輸入文字。這可以透過新增引數 {delay: 時間間隔} 來實現。時間間隔以毫秒錶示。

語法

同樣的語法如下：

await page.type("[class='loc']", "Tutorialspoint", {delay:700})

要刪除在編輯框中輸入的文字，我們必須在該欄位上執行三次點選事件（使用引數 clickCount），然後按退格鍵。這類似於選擇編輯框中的所有值，然後按退格鍵。

語法

語法如下：

const n = await page.$("#txt")
await n.type("Puppeteer")
await n.click({clickCount: 3});
await page.keyboard.press('Backspace')

要獲取在編輯框中輸入的值，我們必須使用 getProperty 方法並將 value 作為引數傳遞給該欄位。

const v = await (await n.getProperty("value")).jsonValue()
console.log(v)

在下圖中，讓我們輸入文字 Puppeteer 然後清除它。

首先，按照 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 enterText(){
   //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
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //clear text entered
   await f.click({clickCount: 3})
   //wait for sometime
   await page.waitForTimeout(4000)
   await page.keyboard.press('Backspace')
   //browser close
   await browser.close()
}
enterText()

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

node <filename>

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

node testcase1.js

處理複選框

在使用 Puppeteer 自動化測試時，我們可以處理 UI 中的複選框。複選框在 html 程式碼中用 tagname 為 input，type 為 checkbox 來標識。

一些處理複選框的方法如下：

click()

它用於選中和取消選中複選框。此方法是 ElementHandle 類的一部分。

語法

click() 的語法如下：

const n = await page.$("#txt")
n.click()

要驗證複選框是否被選中，我們必須使用 getProperty 方法並將 value 作為引數傳遞給該欄位。它返回一個布林值（如果選中則為 true，否則為 false）。

const v = await (await n.getProperty("checked")).jsonValue()
console.log(v)