Puppeteer 快速指南

---

---

Puppeteer - 簡介

Puppeteer 用於自動化和簡化前端開發和測試。它由 Google 引入。Puppeteer 基於 Node.js 庫，並且是開源的。

Puppeteer 包含用於互動和管理 Chrome 瀏覽器（以無頭模式或 Chromium 模式，遵循 DevTools 中的協議）的 API。但是，它也可以用於在 Chrome/Chromium/Edge/Firefox 等瀏覽器上進行非無頭模式執行。

Puppeteer 可用於自動化大多數 UI 測試、鍵盤、滑鼠移動等。它可用於測試用 Angular 和 Angularjs 開發的應用程式。使用 Puppeteer 可以執行網頁抓取和爬取等操作。

Puppeteer 不被認為是像 Selenium、Cypress、Protractor 等自動化工具。它主要用於管理 Chromium 瀏覽器的內部功能。我們可以透過按 F12 或 Command+Option+C（在 MacOS 中）在 Chrome 瀏覽器中開啟 DevTools。

Puppeteer 就像一個開發工具，因為它能夠執行開發人員執行的大多數任務，例如處理請求和響應、定位元素、網路流量和效能等。

如果我們關注 Puppeteer 下載在過去幾年的 npm 趨勢，我們將觀察到對 Puppeteer 使用的上升趨勢（可從以下連結獲取）−

www.npmtrends.com/puppeteer

Puppeteer 架構

Puppeteer 利用 Node 庫，該庫提供了一個一流的 API 用於管理 Chromium 或 Chrome 瀏覽器。這是透過遵循 DevTools 的協議來完成的。

Puppeteer 具有以下層次結構−

• 瀏覽器（帶/不帶無頭模式）− 瀏覽器執行要在瀏覽器引擎上執行的操作。

• Chromium 開發專案或 CDP− Chromium 是所有操作實際執行的地方。Microsoft Edge 和 Chrome 瀏覽器都使用 Chromium 作為瀏覽器引擎。

• Puppeteer− 這實際上是基於節點模組的軟體包。

• 自動化測試程式碼− 這也稱為 Nodejs 層。在這裡，終端使用者使用 JavaScript 開發實際的自動化程式碼。

Puppeteer - 元素處理

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

為此，我們的首要任務是識別元素。為了唯一地獲取元素的屬性，我們需要檢查它（右鍵單擊元素，然後選擇“檢查”選項）。ElementHandle 物件由方法 page.$、page.$$ 和 page.$x 建立。這些物件引用頁面中的元素或標籤。

Puppeteer 定位元素的方法

這些方法列在下面−

page.$(定位器值)

此方法生成一個包含 ElementHandle 的 Promise。ElementHandle 是已識別元素的物件。如果有多個元素具有相同的定位器值，則僅返回頁面左上角的第一個匹配元素。

page.$$(定位器值)

此方法生成一個包含 ElementHandle 陣列的 Promise。如果有多個元素具有相同的定位器值，則所有匹配的元素都將以陣列的形式返回。

page.$x(xpath 值)

此方法生成一個包含 ElementHandle 陣列的 Promise。如果有多個元素具有相同的 xpath 值，則所有匹配的元素都將以陣列的形式返回。如果只有一個匹配元素，則返回的陣列將包含一個元素。

ElementHandle 方法（如 elementHandle.$、elementHandle.$$ 和 elementHandle.$x）可以應用於元素。在這種情況下，將在當前 ElementHandle 的 DOM 中搜索元素，而不是在整個 DOM 中搜索。

在下圖中，讓我們以具有 li 標籤（具有父元素 ul）和類屬性值為 heading 的元素為例。要使用頁面上的 ElementHandle 方法識別它，表示式應如下所示−

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

要使用元素上的 ElementHandle 方法識別它，表示式應如下所示−

const m = await page.$("ul") 
const p = await m.$(".heading")

現在，請參考下面給出的具有 li 標籤的元素的影像

定位器型別

Puppeteer 中的定位器型別列在下面−

• ID

• 類

• 型別

• XPath

• 屬性

• 型別

要使用上述定位器，我們應該瞭解 HTML 程式碼的基本知識。讓我們以一個具有以下屬性的編輯框為例−

這裡，input 是標籤名稱。HTML 中的標籤可能具有或不具有屬性。type、class、name、id 等是元素的屬性。

例如，在表示式 class = "gsc-input" 中，= 左側的文字是屬性名稱（class），= 右側的文字是屬性值（gsc-input）。

屬性可能具有或不具有分配的值。此外，如果分配了值，則應將其括在雙引號或單引號中。屬性的值由開發人員根據其選擇設定。

Puppeteer - Google 使用

Puppeteer 的用法列在下面−

• Puppeteer 可用於從網頁抓取內容。抓取意味著從特定網站提取資料。

• Puppeteer 可用於捕獲螢幕截圖。它可用於以 PDF 格式匯出網頁。

• Puppeteer 不需要外部驅動程式或庫。它可以在實際瀏覽器中以無頭模式執行。

• 它可以用作 Selenium 或 Cypress 等其他瀏覽器自動化工具的良好替代方案。有時，puppeteer 的功能甚至優於兩者。

• 它的執行速度非常快，可用於在無頭和有頭模式下執行測試。

• Puppeteer 擁有一個非常活躍的社群支援，在 GitHub 上擁有超過 60,000 個星標。請參考此處提供的連結：https://github.com/puppeteer/puppeteer

• Puppeteer 支援無頭執行，因此它可以在 Unix、Linux、雲、AWS 等平臺上使用。

• 它可用於爬取 SPA（單頁應用程式）並生成預渲染內容。爬取意味著儲存網頁的本地靜態物件，並在沒有從網際網路獲取的真實網頁的情況下離線使用它。

• 它可用於自動化大多數 UI 測試、鍵盤、滑鼠移動、表單提交等。

• Puppeteer 可用於構建最新的自動化測試環境。它可以透過利用 JavaScript 和瀏覽器的最新功能在最新版本的 Chrome 上執行測試。

• Puppeteer 可用於獲取 Web 應用程式的時間線跟蹤以確定其效能。此外，它可用於檢查 Chrome 擴充套件程式並獲取網頁使用的 HTML 和 CSS 的覆蓋率。

Puppeteer - NodeJS 安裝

Puppeteer 程式碼實現使用 JavaScript 完成。為此，必須安裝 NodeJS，因為它是一個 JavaScript 引擎。只有在安裝後，我們才能執行 Puppeteer 測試。

配置 NodeJS 的步驟列在下面−

步驟 1− 啟動具有以下連結的應用程式−

https://nodejs.com.tw/en/download/

步驟 2− 根據我們使用的本地作業系統（Windows、Mac 或 Linux），單擊連結下載安裝程式。

步驟 3− 下載安裝程式後，單擊它。我們將導航到 Node.js 安裝程式歡迎螢幕。單擊“繼續”。

步驟 4− 同意 Nodejs 的協議條款。

步驟 5− 單擊“安裝”。

步驟 6− 顯示 Nodejs 安裝成功訊息後，單擊“關閉”。

步驟 7− 要檢查 Nodejs 是否已成功安裝，請開啟終端並執行命令：node。

機器中安裝的 Nodejs 版本應顯示出來。

Puppeteer - VS Code 配置

安裝 Visual Studio (VS) Code 的步驟列在下面−

步驟 1− 導航到以下連結−

https://vscode.com.tw/

步驟 2− 根據我們擁有的本地作業系統，例如 macOS、Linux 或 Windows，我們需要選擇下載連結。

步驟 3− 單擊“下載”按鈕後，將下載一個 zip 檔案。下載此檔案完成後，單擊它，Visual Studio Code 應用程式應該可以使用了。

步驟 4− 雙擊它，Visual Studio Code 應用程式應該啟動以及歡迎頁面。

Puppeteer - 安裝

Puppeteer 的安裝步驟列在下面−

步驟 1− 安裝 NodeJS。

有關如何安裝 NodeJs 的詳細資訊在 NodeJS 安裝章節中有詳細討論。

步驟 2− 在某個位置建立一個空資料夾，例如 puppeteer。

步驟 3 − 啟動 Visual Studio Code 應用程式，點選“開啟資料夾”連結，並匯入我們在步驟 2 中建立的資料夾。

有關如何安裝 VS Code 的詳細資訊，在 VS Code 配置章節中有詳細討論。

步驟 4 − 開啟終端，從當前目錄切換到我們在步驟 2 中建立的空資料夾的目錄。然後執行以下命令：

npm

步驟 5 − 對於 Puppeteer 的安裝，執行以下命令：

npm install puppeteer

或者，

npm i puppeteer

步驟 6 − 對於 Puppeteer core 的安裝，執行以下命令：

npm i puppeteer-core

步驟 7 − 安裝 Puppeteer 和 Puppeteer core 後，我們將在步驟 2 中建立的空資料夾中找到生成的 node_modules 資料夾和 package.json 檔案。

步驟 8 − 在進行測試時，我們必須在程式碼中新增以下 Puppeteer 庫。

const pt = require('puppeteer')

Puppeteer - 基本測試

要開始對 Puppeteer 進行基本測試，我們必須按照以下步驟操作：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在此檔案中新增以下程式碼：

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/index.htm')
   //capture screenshot
   await p.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，將在 page 目錄中建立一個名為 tutorialspoint.png 的新檔案。它包含在無頭模式下在瀏覽器中啟動的頁面的捕獲螢幕截圖。

Puppeteer - 無頭模式執行

預設情況下，Puppeteer 在無頭 Chromium 中執行測試。這意味著如果我們使用 Puppeteer 執行測試，則將無法在瀏覽器中檢視執行情況。

要啟用有頭模式下的執行，我們必須在程式碼中新增引數：headless:false。

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//adding Puppeteer library
const pt = require('puppeteer');
//adding headless flag to false
pt.launch({headless:false}).then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/about/about_careers.htm');
})

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

node <filename>

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

node testcase1.js

命令成功執行後，我們將看到執行在有頭模式下觸發。

Puppeteer 與 Selenium 的比較

Puppeteer 和 Selenium 之間的主要區別如下所示：

Puppeteer 與 Protractor 的比較

Puppeteer 和 Protractor 之間的主要區別如下所示：

讓我們觀察一下 Puppeteer 和 Protractor 在過去兩年的 npm 趨勢。我們將觀察到與 Protractor 相比，Puppeteer 的使用趨勢呈上升趨勢（可從以下連結獲取）：

https://www.npmtrends.com/protractor-vs-puppeteer

Puppeteer 與 Cypress 的比較

Puppeteer 和 Cypress 之間的主要區別如下所示：

讓我們觀察一下 Puppeteer 和 Cypress 在過去兩年的 npm 趨勢。我們將觀察到 Puppeteer 和 Cypress 的使用趨勢都呈上升趨勢（可從以下連結獲取）：

https://www.npmtrends.com/cypress-vs-puppeteer

Puppeteer - 瀏覽器操作

Puppeteer 可以藉助以下方法執行瀏覽器操作：

launch()

用於開啟新的瀏覽器並連線到 Chromium 例項。它有一些可選引數，如下所示：

產品 − 此引數為字串型別，用於指定要啟動的瀏覽器。

語法

語法如下：

let l = await puppeteer.launch({product : "chrome" })

headless − 此引數為布林型別（預設值為 true），必須將其設定為 false 值才能在有頭模式下執行測試。

語法

語法如下：

let l = await puppeteer.launch({headless : false})

devtools − 此引數為布林型別。如果將其設定為 true，則每個瀏覽器選項卡都將自動開啟 DevTools。此外，如果 devtools 設定為 true，則 headless 引數也應設定為 false。

語法

語法如下：

let l = await puppeteer.launch({devtools: true})

defaultViewport − 此引數為物件型別。它為頁面提供持久視口（視口預設值為 800*600）。我們可以透過在寬度和高度中指定畫素的整數值來修改視口的大小。

語法

語法如下：

let l = await puppeteer.launch({defaultViewport: { width: 500, height: 459}})

slowMo − 此引數為數字型別。此引數用於將 Puppeteer 執行減慢一段時間，以毫秒為單位。

語法

語法如下：

let l = await puppeteer.launch({slowMo: 500})

goTo()

用於導航到網頁。要導航到的頁面的 URL 作為引數傳遞。

語法

語法如下：

await page.goto('https://tutorialspoint.tw/index.htm')

close()

用於關閉已開啟的瀏覽器。

語法

語法如下：

await browser.close()

browserContexts()

返回所有已開啟的瀏覽器上下文陣列。

createIncognitoBrowserContext()

以隱身模式開啟一個新瀏覽器。

defaultBrowserContext()

返回預設瀏覽器上下文。

disconnect()

用於斷開 Puppeteer 與瀏覽器例項的連線。

isConnected()

用於驗證瀏覽器是否已連線。

newPage()

返回包含新頁面物件的 Promise。

pages()

返回包含所有開啟的頁面物件陣列的 Promise。

process()

如果例項是使用 launch 方法建立的，則返回瀏覽器程序。此外，如果例項是使用 connect 方法建立的，則返回 null 值。

target()

返回瀏覽器的目標。

targets()

返回包含所有活動目標陣列的 Promise。

Puppeteer - 標籤處理

我們可以使用以下方法在 Puppeteer 中處理選項卡：

newPage()

我們可以使用此方法在瀏覽器物件中開啟一個新選項卡。

語法

語法如下：

const p = await browser.newPage()

close()

我們可以使用此方法關閉已開啟的選項卡。

語法

語法如下：

await p.close()

close()

我們可以使用此方法在瀏覽器物件中關閉所有已開啟的選項卡。

語法

語法如下：

await browser.close()

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//adding Puppeteer library
const pt = require('puppeteer')
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/index.htm')
   //capture screenshot
   await p.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，將在 page 目錄中建立一個名為 tutorialspoint.png 的新檔案。它包含在瀏覽器中啟動的頁面的捕獲螢幕截圖。

Puppeteer - 基本命令

Puppeteer 的一些基本命令如下所示：

title()

此命令用於獲取當前頁面的標題。

語法

語法如下：

await page.title()

url()

此命令用於獲取當前在瀏覽器中啟動的應用程式的 URL。

語法

語法如下：

await page.url()

content()

此命令用於獲取頁面原始碼。

語法

語法如下：

await page.content()

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/questions/index.php')
   //obtain page title
   console.log("Page title: " + await p.title())
   //obtain URL
   console.log("Url: " + await p.url())
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，頁面標題 - The Best Technical Questions and Answers 將列印在控制檯中。此外，URL - www.tutorialspoint.com/questions/index.php 將列印在控制檯中。執行是在無頭模式下發生的。

Puppeteer - Firefox

我們可以在 Firefox 中執行在 Puppeteer 中開發的測試。必須記住，在 Firefox 中執行測試時，Puppeteer 使用其內部 Firefox 瀏覽器，而不是本地系統中安裝的 Firefox 瀏覽器。

步驟 1 − 我們首先需要透過執行以下命令為 Firefox 瀏覽器安裝 Puppeteer −

npm install puppeteer-firefox

此外，我們還需要在程式碼中新增 Firefox-Puppeteer 庫。

const f = require('puppeteer-firefox')

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//adding Puppeteer- Firefox library
const pt = require('puppeteer-firefox');
//adding headless flag to false
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/about/about_careers.htm')
   //get browser
   const v = await p.browser().version();
   console.log("Browser: " + v)
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印執行測試的瀏覽器 - Firefox/65.0。

Puppeteer - Chrome

預設情況下，在 Puppeteer 中編寫的測試在 Chrome 或 Chromium 瀏覽器中以無頭模式執行。此外，我們還需要在程式碼中新增以下 Puppeteer 庫。

const pt = require('puppeteer')

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/index.htm')
   //get browser
   const v = await p.browser().version();
   console.log("Browser: " + v)
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印執行測試的瀏覽器 - HeadlessChrome/92.0.4512.0。

Puppeteer - 處理確認警報

Puppeteer 能夠處理警報。像 Selenium、WebdriverIO 等自動化工具在警報出現在頁面上後接受或駁回警報。

但是，在 Puppeteer 中，使用者必須在警報出現在頁面上之前指示是否接受或駁回警報。為此，必須使用 Puppeteer 觸發 on 事件監聽器。

處理確認警報的方法

下面列出了一些用於處理警報的方法 −

• accept(): Promise<void> − 此方法用於接受警報。

• message(): string − 此方法用於獲取警報中獲得的訊息。

• type(): DialogType − 此方法用於獲取對話方塊型別。對話方塊型別可以是提示、確認或提示。

• dismiss(): Promise<void> − 此方法用於駁回警報。

在下圖中，單擊“點選 JS 確認”將顯示確認警報。讓我們獲取警報上的文字。

首先，請按照 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 confirmAlert(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage();
   //on event listener trigger
   page.on('dialog', async dialog => {
      //get alert message
      console.log(dialog.message());
      //accept alert
      await dialog.accept();
   })
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/javascript_alerts')
   //identify element with xpath then click
   const b = (await page.$x("//button[text()='Click for JS Confirm']"))[0]
   b.click()
}
confirmAlert()

步驟 4 − 使用以下命令執行程式碼。

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印確認警報文字 - 我是一個 JS 確認。

Puppeteer - 處理下拉選單

在使用 Puppeteer 自動化測試時，我們可以處理 UI 中的下拉列表。靜態下拉列表在 html 程式碼中透過標籤名稱 select 識別，其選項的標籤名稱為 option。

處理下拉列表的方法

一些用於處理靜態下拉列表的方法 −

select()

此方法用於從下拉列表中選擇一個選項。要選擇的選項的值作為引數傳遞給此方法。

語法

語法如下：

const page = await browser.newPage()
   const f = await page.$('[name="selType"]')
await f.select("subject")

我們還可以從多選下拉列表中選擇多個選項。

語法

語法如下：

await f.select("subject", "name")

要從下拉列表中獲取選擇的值，我們必須使用 getProperty 方法並將值作為引數傳遞給此欄位。

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

type()

此方法用於從下拉列表中選擇一個選項。要選擇的選項的值作為引數傳遞給此方法。

語法

語法如下：

const page = await browser.newPage()
   const f = await page.$('[name="selType"]')
await f.type("subject")

首先，請按照 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 dropDownHandle(){
   //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/tutor_connect/index.php')
   //identify dropdown then select an option by value
   const f = await page.$('[name="selType"]')
   await f.select("subject")
   //wait for sometime
   await page.waitForTimeout(4000)
   //get value selected
   const v = await (await f.getProperty("value")).jsonValue()
   console.log(v)
}
dropDownHandle()

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

node <filename>

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

node testcase1.j

命令成功執行後，將在控制檯中列印下拉列表中所選選項的值 - 主題。

Puppeteer - 定位器

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

為此，我們的首要任務是識別元素。為了唯一地獲取元素的屬性，我們需要檢查它（右鍵單擊元素，然後選擇“檢查”選項）。ElementHandle 物件由方法 page.$、page.$$ 和 page.$x 建立。這些物件引用頁面中的元素或標籤。

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。為此，我們必須使用 xpath 表示式。

查詢元素的方法

這些方法列在下面−

page.$(定位器值)

此方法生成一個包含 ElementHandle 的 Promise。ElementHandle 是已識別元素的物件。如果有多個元素具有相同的定位器值，則僅返回頁面左上角的第一個匹配元素。

page.$$(定位器值)

此方法生成一個包含 ElementHandle 陣列的 Promise。如果有多個元素具有相同的定位器值，則所有匹配的元素都將以陣列的形式返回。

page.$x(xpath 值)

此方法生成一個包含 ElementHandle 陣列的 Promise。如果有多個元素具有相同的 xpath 值，則所有匹配的元素都將以陣列的形式返回。如果只有一個匹配元素，則返回的陣列將包含一個元素。

ElementHandle 方法（如 elementHandle.$、elementHandle.$$ 和 elementHandle.$x）可以應用於元素。在這種情況下，將在當前 ElementHandle 的 DOM 中搜索元素，而不是在整個 DOM 中搜索。

在下圖中，讓我們以一個具有 li 標籤（具有父元素 ul）和 class 屬性值為 heading 的元素為例。

要使用頁面上的 ElementHandle 方法識別它，表示式應如下所示 −

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

要使用元素上的 ElementHandle 方法識別它，表示式應為 −

const m = await page.$("ul") 
const p = await m.$(".heading")

現在，請參考下面給出的具有 li 標籤的元素的影像

定位器型別

Puppeteer 中的定位器型別列在下面−

• ID

• 類

• 型別

• XPath

• 屬性

• 型別

要使用上述定位器，我們應該瞭解 HTML 程式碼的基本知識。讓我們以一個具有以下屬性的編輯框為例 −

這裡，input 是標籤名稱。HTML 中的標籤可能具有或不具有屬性。type、class、name、id 等是元素的屬性。

例如，在表示式 id = "gsc-i-id1" 中，= 左側的文字是屬性名稱 (id)，= 右側的文字是屬性值 (gsc-i-id1)。

屬性可能具有或不具有分配的值。此外，如果分配了值，則應將其括在雙引號或單引號中。屬性的值由開發人員根據其選擇設定。

讓我們以一個具有以下 html 程式碼的元素為例 −

我們可以使用表示式識別上圖中的第一個複選框 −

const n = await page.$("input[type='checkbox']")

首先，請按照 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 checkBoxHandle(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/checkboxes')
   //identify element with xpath then click
   const n = await page.$("input[type='checkbox']")
   n.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

步驟 4 − 使用下面提到的命令執行程式碼 −

node <filename>

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

node testcase1.js

命令成功執行後，布林值 true 將列印在控制檯中。這是由 getProperty("checked") 返回的，因為它返回 true，因為複選框已選中。

Puppeteer - XPath 函式

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。為此，我們必須使用 xpath 表示式。

如果元素存在重複屬性或沒有屬性，則使用函式 text() 來識別元素。為了使用 text() 函式，該元素必須在頁面上顯示可見文字。

語法

text() 函式的使用語法如下 −

//tagname[text()='visible text on element']

如果元素的值或文字部分動態或非常長，我們可以使用 contains() 函式。為了使用 contains() 函式，該元素必須具有屬性值或文字。

語法

contains() 函式的使用語法如下 −

//tagname[contains(@attribute,'value')]
//tagname[contains(text(),'visible text on element')]

如果元素的文字以特定文字開頭，我們可以使用 starts-with() 函式。

語法

starts-with() 函式的使用語法如下 −

//tagname[starts-with(text(),'visible text on element')

在所有上述函式中，標籤名是可選的。我們可以使用符號 * 代替標籤名。

在下圖中，讓我們使用其顯示文字識別元素 - 庫，然後單擊它。

元素的 xpath 將為 //*[text()='Library']。

這裡，我們使用 xpath 選擇器，因此我們必須使用方法：page.$x(xpath 值)。此方法的詳細資訊在章節 - 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 selectorFunTextXpath(){
   //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 xpath function - text() then click
   const b = (await page.$x("//*[text()='Library']"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorFunTextXpath()

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

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印單擊元素庫後導航到的頁面的 URL - https://tutorialspoint.tw/tutorialslibrary.htm。

Puppeteer - XPath 屬性

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。為此，我們必須使用 xpath 表示式。

如果使用單個屬性的 xpath 表示式識別多個元素，我們可以在 xpath 表示式中使用多個屬性來定位單個元素。

僅使用一個屬性編寫 xpath 的格式如下 −

//tagname[@attribute='value']

對於多個屬性，我們可以應用 AND 和 OR 條件。使用 AND 條件編寫 xpath 的格式 −

//tagName[@attribute1='value1'] [@attribute2='value2']

或者，

//tagName[@attribute1='value1' and @attribute2='value2']

使用 OR 條件編寫 xpath 的格式如下 −

//tagName[@attribute1='value1' or @attribute2='value2']

我們還可以透過對屬性應用 NOT 條件來識別元素。使用 NOT 條件編寫 xpath 的格式 −

//tagname[not(@attribute='value')]

讓我們使用 alt 屬性識別頁面上突出顯示的徽標，然後單擊它。

元素的 xpath 將如下所示 −

//img[@alt='tutorialspoint'].

這裡，我們使用 xpath 選擇器，因此我們必須使用方法：page.$x(xpath 值)。此方法的詳細資訊在 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 selectorAttributeXpath(){
   //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/questions/index.php')
   //identify element with relative xpath then click
   const b = (await page.$x("//img[@alt='tutorialspoint']"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorAttributeXpath()

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

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印單擊徽標影像後導航到的頁面的 URL - https://tutorialspoint.tw/index.htm。

Puppeteer - XPath 分組

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。為此，我們必須使用 xpath 表示式。

透過利用索引從匹配元素的集合中獲取一個元素稱為組索引。如果 xpath 表示式識別多個元素，則可以使用組索引。

編寫組索引的格式是首先使用 xpath 表示式，然後是括在 [] 中的索引號。它表示一個 xpath 陣列，索引從 1 開始。函式 last() 用於指向 xpath 陣列中的最後一個元素。

語法

函式 last() 的使用語法如下 −

(/table/tbody/tr/td[1]/input)[last()]

語法

函式 position() 用於獲取 xpath 陣列中特定位置的元素。語法如下 −

(/table/tbody/tr/td[1]/input)[position()=1]

上述 xpath 表示式將獲取所有匹配元素組中的第一個元素。

在下圖中，讓我們識別突出顯示的編輯框並在其中輸入一些文字。

因此，xpath 表示式將如下所示 −

在上面的示例中，表中（其父元素為 tr 標籤）有兩個列（由 td 標籤表示）。輸入框位於第一列中。

因此，xpath 表示式將如下所示 −

//table/tbody/tr/td[1]/input

這裡，我們使用 xpath 選擇器，因此我們必須使用方法：page.$x(xpath 值)。此方法的詳細資訊在 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 selectorGroupXpath(){
   //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 group index xpath then enter text
   const f = (await page.$x("//table/tbody/tr/td[1]/input"))[0]
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //capture screenshot
   await page.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
}
selectorGroupXpath()

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

node <filename>

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

node testcase1.js

命令成功執行後，將在頁面目錄中建立一個名為 tutorialspoint.png 的新檔案。它包含在瀏覽器中啟動的頁面截圖，其中包含文字 Puppeteer。

Puppeteer - 絕對 XPath

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。為此，我們必須使用 xpath 表示式。此外，如果頁面上的元素是動態的，則 xpath 選擇器可以作為選擇器的一個不錯的選擇。

Xpath 可以分為兩種型別 - 絕對路徑和相對路徑。絕對 xpath 以 / 符號開頭，從根節點開始到我們要識別的元素。下面給出了一個相同示例。

/html/body/div[1]/div/div[1]/a

讓我們使用絕對 xpath 識別頁面上突出顯示的徽標，然後單擊它。

徽標的絕對 xpath 如下 −

html/body/header/div[4]/div[1]/div[1]/a/img.

這裡，我們使用 xpath 選擇器，因此我們必須使用方法：page.$x(xpath 值)。此方法的詳細資訊在 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 selectorAbsoluteXpath(){
   //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/about/about_careers.htm')
   //identify element with absolute xpath then click
   const b = (await page.$x("/html/body/header/div[4]/div[1]/div[1]/a/img"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorAbsoluteXpath()

步驟 4 − 使用下面提到的命令執行程式碼 −

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印單擊徽標影像後導航到的頁面的 URL - https://tutorialspoint.tw/index.htm。

Puppeteer - 相對 XPath

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。

為此，我們必須使用 xpath 表示式。此外，如果頁面上的元素是動態的，則 xpath 選擇器可以作為選擇器的一個不錯的選擇。

相對 xpath

Xpath 可以分為兩種型別 - 絕對路徑和相對路徑。相對 xpath 從要定位的元素開始，而不是從根開始。

它以 // 符號開頭，表示任何後代。它的優點是，即使 DOM 中刪除或添加了元素，特定元素的相對 xpath 也不會受到影響。

要透過屬性獲取相對路徑，xpath 表示式如下 −

//tagname[@attribute='value'].

讓我們使用 alt 屬性識別頁面上突出顯示的徽標，然後單擊它。

元素的相對 xpath 如下所示

//img[@alt='tutorialspoint'].

這裡，我們使用 xpath 選擇器，因此我們必須使用方法：page.$x(xpath 值)。此方法的詳細資訊在章節 - 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 selectorRelativeXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   a wait page.goto('https://tutorialspoint.tw/questions/index.php')
   //identify element with relative xpath then click
   const b = (await page.$x("//img[@alt='tutorialspoint']"))[0]
   b.click()
   //wait for sometime
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorRelativeXpath()

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

node <filename>

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

node testcase1.js

命令成功執行後，將在控制檯中列印單擊徽標影像後導航到的頁面的 URL - https://tutorialspoint.tw/index.htm。

Puppeteer - XPath 軸

為了唯一地確定一個元素，我們可以藉助 html 標籤內的任何屬性，或者可以使用 html 標籤上的屬性組合。大多數情況下使用 id 屬性，因為它對於頁面來說是唯一的。

但是，如果不存在 id 屬性，我們可以使用其他屬性，如 class、name 等。如果不存在 id、name 和 class 等屬性，我們可以利用僅對該標籤可用的唯一屬性或屬性及其值的組合來識別元素。

為此，我們必須使用 xpath 表示式。此外，如果頁面上的元素是動態的，則 xpath 選擇器可以作為選擇器的一個不錯的選擇。

xpath 是雙向的，這意味著我們可以從父元素遍歷到子元素，也可以從子元素遍歷到父元素。xpath 軸的詳細資訊將在以下連結中提供 −

https://tutorialspoint.tw/xpath/xpath_axes.htm

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

在上面的示例中，表中（其父元素為 tr 標籤）有兩個列（由 td 標籤表示）。輸入框位於第一列中。

因此，xpath 表示式將如下所示 −

//table/tbody/tr/child::td.

這裡，我們使用 xpath 選擇器，因此我們必須使用方法：page.$x(xpath 值)。此方法的詳細資訊在 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 selectorAxesXpath(){
   //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 xpath axes
   const n = (await page.$x("//table/tbody/tr/child::td"))[0]
   // get value of class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
selectorAxesXpath()

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

node <filename>

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

node testcase1.js

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

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

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

名稱選擇器和類名選擇器

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

名稱選擇器

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

為此，我們的第一步是識別元素。如果 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 的突出顯示的元素並獲取其文字 - 關於 Tutorialspoint。

上述元素的 id 選擇器表示式應為 .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 getText(){
   //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/about/about_careers.htm')
   //identify element with class name
   const f = await page.$(".heading")
   //obtain text
   const text = await (await f.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
getText()

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

node <filename>

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

node testcase1.js

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

Puppeteer - ID 選擇器

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

為此，我們的第一步是識別元素。id 屬性通常在一個頁面中是唯一的，可以用作 id 選擇器。它是一個非常有用的定位器，與所有其他選擇器相比，可以加快自動化測試的執行速度。

語法

Id 選擇器的語法如下所示：

const n = await page.$("#loc")

在下面的示例中，讓我們識別具有 id txtSearchText 的突出顯示的元素並在其中輸入文字。

上述元素的 id 選擇器表示式應為 #txtSearchText。

首先，請按照 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 selectorId(){
   //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/tutor_connect/index.php')
   //identify element with id
   const f = await page.$("#txtSearchText")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //browser close
   await browser.close()
}
selectorId()

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

node <filename>

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

node testcase1.js

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 將在控制檯中列印。

Puppeteer - 處理連結/按鈕

Puppeteer 能夠處理頁面上的連結/按鈕。在點選元素之前，我們必須能夠使用任何定位器唯一地識別它。在 Puppeteer 中，只有當元素的尺寸大於零畫素時，我們才能點選它。

在下圖中，我們將點選下面突出顯示的連結 - 訂閱高階計劃，其標籤名為 h1：

首先，請按照 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 clickElement(){
   //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 then click
   await page.click('h1');
   //get page title after click
   console.log(await page.title())
}
clickElement()

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

node <filename>

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

node testcase1.js

命令成功執行後，點選連結 - 訂閱高階計劃後獲得的標題 - Tutorials Point 付費訂閱套餐 - Tutorialspoint 將在控制檯中列印。

處理編輯框 & 複選框

讓我們瞭解 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 程式碼中用 input 作為標籤名，checkbox 作為 type 進行識別。

下面給出了一些處理複選框的方法：

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)

首先，請按照 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 checkBoxHandle(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/checkboxes')
   //identify element then click
   const n = await page.$("input[type='checkbox']")
   n.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

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

node <filename>

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

node testcase1.js

命令成功執行後，布林值 true 將在控制檯中列印。這是 getProperty("checked") 返回的值，因為複選框已選中，所以返回 true。

Puppeteer - 處理框架

html 程式碼中的框架由 frames/iframe 標籤表示。Puppeteer 可以透過從主頁面切換到框架來處理框架。要操作框架內的元素，我們首先必須藉助定位器識別框架。contentFrame 方法用於訪問框架內的元素。

語法

處理框架的語法如下所示：

const f = await page.$("frame[name='frame-bottom']")
const m = await f.contentFrame()

讓我們看看框架內元素的 html 程式碼，並獲取其中的文字 - BOTTOM。

上圖中突出顯示的標籤名為 frame，其 name 屬性的值為 frame-bottom。

首先，請按照 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 frameHandle(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/nested_frames')
   //identify frame
   const f = await page.$("frame[name='frame-bottom']")
   //move to frame
   const x = await f.contentFrame();
   //identify element inside frame
   const n = await x.$("body")
   //get text
   const v = await (await n.getProperty("textContent")).jsonValue()
   console.log(v)
}
frameHandle()

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

node <filename>

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

node testcase1.js

命令成功執行後，框架內的文字 - BOTTOM 將在控制檯中列印。

Puppeteer - 鍵盤模擬

Puppeteer 可以執行鍵盤模擬操作，例如按鍵盤上的某個鍵、按向上鍵、向下鍵等。所有這些都是使用 keyboard 方法完成的。

鍵盤方法

一些鍵盤方法如下所示：

keyboard.press()

此方法用於模擬按鍵。要按下的鍵作為引數傳遞給此方法。

語法如下：

語法

keyboard.press('Enter')

keyboard.type()

此方法用於模擬從鍵盤輸入文字。要輸入的文字作為引數傳遞給此方法。

語法如下：

語法

keyboard.type('Puppeteer')

keyboard.sendCharacter()

它與 keyboard.type() 相同。

語法如下：

語法

keyboard.sendCharacter('Puppeteer')

keyboard.up()

此方法用於模擬按下鍵盤上的向上箭頭。

語法如下：

語法

keyboard.up()

keyboard.down()

此方法用於模擬按下鍵盤上的向下箭頭。

語法如下：

語法

keyboard.down()

首先，請按照 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 keyboradSimulation(){
   //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 id
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //press Enter
   await page.keyboard.press('Enter')
   //wait for sometime
   await page.waitForTimeout(4000)
   //identify element
   const t = await page.$(".gsc-result-info")
   //obtain text
   const text = await (await t.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
keyboradSimulation()

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

node <filename>

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

node testcase1.js

命令成功執行後，在輸入 Puppeteer 後按 Enter 獲取的文字 - 關於 39 個結果（0.15 秒）將在控制檯中列印。

Puppeteer - 獲取元素文字

我們可以在 Puppeteer 中獲取元素文字。這是藉助 textContent 屬性實現的。元素的此屬性作為引數傳遞給 getProperty 方法。

語法

獲取元素文字的語法如下所示：

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

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

首先，請按照 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 getText(){
   //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/about/about_careers.htm')
   //identify element
   const f = await page.$("[class='heading']")
   //obtain text
   const text = await (await f.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
getText()

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

node <filename>

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

node testcase1.js

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

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。

Puppeteer - 裝置模擬

我們可以在 Puppeteer 中使用移動配置執行測試，並檢查網頁的響應式屬性。Puppeteer 支援的裝置列表可以從 Chrome DevTools 中獲取。右鍵單擊在 Chrome 瀏覽器中開啟的頁面，然後選擇“檢查”。

然後，點選“切換裝置工具欄”。

點選下拉選單 - 響應式以獲取裝置列表。

要模擬裝置，我們必須使用 emulate() 方法，並將要模擬的裝置作為引數傳遞給此方法。此方法的語法如下所示：

const m = puppeteer.devices['iPhone X']
//emulate iPhoneX
await page.emulate(m)

讓我們使用 Puppeteer 中的 emulate 函式模擬 iPhone X 裝置。

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//Puppeteer library
const puppeteer = require('puppeteer')
//launch browser in headed mode
puppeteer.launch({headless:false}).then(async browser => {
   //browser new page
   const page = await browser.newPage()
   //set device to iPhone X
   const m = puppeteer.devices['iPhone X']
   //emulate iPhoneX
   await page.emulate(m)
   //launch URL
   await page.goto('https://tutorialspoint.tw/index.htm')
   //capture screenshot of emulated device
   await page.screenshot({ path: 'iPhoneDevice.png'})
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，將在頁面目錄中建立一個名為 iPhoneDevice.png 的新檔案。它包含為 iPhone X 裝置模擬的網頁的捕獲螢幕截圖。

Puppeteer - 停用 JavaScript

我們可以使用 Puppeteer 停用 JavaScript。為此，我們必須根據其型別阻止請求/響應。讓我們嘗試透過停用 JavaScript 來啟動頁面。

首先，請按照 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')
pt.launch().then(async browser => {
//browser new page
   const page = await browser.newPage()
   //monitor requests
   await page.setRequestInterception(true)
   //check resourceType is script
   page.on('request', request => {
      if (request.resourceType() === 'script')
         request.abort();
      else
         request.continue();
   })
   //launch application
   await page.goto('https://tutorialspoint.tw/index.htm')
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

Puppeteer - 同步

Puppeteer Page 類包含用於實現同步的方法。這些方法用於等待頁面上的操作/元素。它等待滿足條件（真值）。例如，我們經常等待文字出現在頁面上。

同步方法

Puppeteer 中的同步方法如下所示：

waitFor

此方法用於在解析 Promise 之前等待特定時間。

語法

語法如下：

await page.waitFor(4000)

waitForSelector

此方法用於等待元素在網頁上顯示或消失。

語法

語法如下：

page.waitForSelector(
   selector,
   {options : value}
)

waitForSelector 方法接受兩個引數。第一個引數是元素的選擇器值。第二個引數是選項陣列。選項如下所示：

• Visible - Puppeteer 將等待頁面上的元素定位器可見。預設值為 false。

• Hidden - Puppeteer 將等待頁面上的元素定位器隱藏。預設值為 false。

• Timeout - 元素的最大等待時間（毫秒）。預設值為 30000。如果將超時設定為零，則此選項將被丟棄。

可以使用以下方法修改預設等待時間：

page.setDefaultTimeout(6000)

例如：

let l = await page.waitForSelector( "#ltxt", { visible: true } )

waitForXpath

此方法用於等待由 xpath 標識的元素/元素在網頁上顯示或消失。

語法

語法如下：

page.waitXpath(
   Xpath value,
   {options : value}
)

waitForXpath 方法接受兩個引數。第一個引數是元素的 xpath 選擇器值。第二個引數是選項陣列。選項如下所示：

• Visible - Puppeteer 將等待頁面上的元素定位器可見。預設值為 false。

• Hidden - Puppeteer 將等待頁面上的元素定位器隱藏。預設值為 false。

• Timeout - 元素的最大等待時間（毫秒）。預設值為 30000。如果將超時設定為零，則此選項將被丟棄。

可以使用以下方法修改預設等待時間：

page.setDefaultTimeout(6000)

例如：

let x= await page.waitForXPath( "//*[@name='search']", { visible: true } )

waitForFunction

此方法用於等待提供的函式返回 true 值。

語法

語法如下：

page.waitForFunction(
   pagefunction,
   {options : value},
   pagefunction args
)

waitForFunction 方法具有以下引數：

pagefunction 是要執行的函式。例如：

page.waitForFunction("document.getElementById('txt').value === 'text'", {})

此函式將等待 id 為 的元素的值等於 text。

option 是一個等待引數陣列。它們是 - polling（以毫秒為單位執行 pagefunction 的間隔）和 timeout（Puppeteer 將等待 pagefunction 返回 true 值的最大時間）。

pagefunction args 是傳遞給 pagefunction 函式的引數。

在下圖中，讓我們輸入文字 - Puppeteer，然後按 Enter。

按 Enter 後，將開啟一個新視窗，其中包含搜尋結果，文字為 - 關於 39 個結果。

首先，請按照 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 waitImplementation(){
   //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")
   //wait for sometime
   await page.waitForTimeout(4000)
   //press Enter
   await page.keyboard.press('Enter')
   //wait for an element xpath
   await page.waitForXPath("//div[@class='gsc-result-info']")
   //identify element
   const t = await page.$(".gsc-result-info")
   //obtain text
   const text = await (await t.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
waitImplementation()

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

node <filename>

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

node testcase1.js

Puppeteer - 擷取螢幕截圖

在使用 Puppeteer 開發的自動化測試中工作時，我們可以使用截圖方法捕獲截圖。如果遇到應用程式錯誤、測試用例失敗等，通常會捕獲截圖。

語法

在 Puppeteer 中捕獲截圖的語法如下：

await page.screenshot({
   path: 'tutorialspoint.png'
})

這裡，將截圖儲存到的路徑作為引數傳遞給方法。這樣，只會捕獲網頁的可視部分。要捕獲全頁截圖，我們必須傳遞另一個名為 fullPage 的引數，並將其值設定為 true。

語法

語法如下：

await page.screenshot({
   path: 'tutorialspoint.png', fullPage: true
})

讓我們捕獲以下頁面的截圖：

首先，請按照 Puppeteer 基本測試章節中的步驟 1 到 2 操作，步驟如下：

步驟 1 − 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中有討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 − 輸入檔名，例如 testcase1.js。

步驟 3 − 在建立的 testcase1.js 檔案中新增以下程式碼。

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.tw/index.htm')
   //capture screenshot
   await p.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
})

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

node <filename>

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

node testcase1.js

命令成功執行後，將在 page 目錄中建立一個名為 tutorialspoint.png 的新檔案。它包含在瀏覽器中啟動的頁面的捕獲螢幕截圖。