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 核心已安裝的位置）。

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 裝置模擬網頁的捕獲螢幕截圖。