WebdriverIO - 截圖捕獲

我們可以使用 `saveScreenshot` 方法在使用 WebdriverIO 開發的自動化測試中捕獲截圖。通常情況下，如果遇到應用程式錯誤、斷言失敗等情況，就會捕獲截圖。

語法

捕獲截圖的語法如下：

browser.saveScreenshot("name along with path to store screenshot")

這裡，將截圖儲存的名稱和路徑作為引數傳遞給方法。在 WebdriverIO 中，我們無法選擇對特定元素進行截圖。

首先，按照“使用 WebdriverIO 的正確流程”章節中步驟 1 到 5 的操作，步驟如下：

步驟 1 - 安裝 NodeJS。關於如何執行此安裝的詳細資訊，請參閱“使用 NodeJS 入門”章節。

步驟 2 - 安裝 NPM。關於如何執行此安裝的詳細資訊，請參閱“NPM 安裝”章節。

步驟 3 - 安裝 VS Code。關於如何執行此安裝的詳細資訊，請參閱“VS Code 安裝”章節。

步驟 4 - 建立配置檔案。關於如何執行此安裝的詳細資訊，請參閱“配置檔案生成”章節。

步驟 5 - 建立規範檔案。關於如何執行此安裝的詳細資訊，請參閱“Mocha 安裝”章節。

步驟 6 - 將以下程式碼新增到已建立的 Mocha 規範檔案中。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Screenshot', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')  
      //identify element then enter text
      const e = $("#gsc-i-id1")
      e.setValue('WebdriverIO')
      //capture screenshot of page
      browser.saveScreenshot("screenshot.png")
   });
});

使用以下命令執行配置檔案 - wdio.conf.js 檔案：

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊，請參閱“wdio.conf.js 檔案”章節和“配置檔案生成”章節。您的計算機上將顯示以下螢幕：

命令成功執行後，專案資料夾中將生成一個名為 screenshot.png 的檔案。該檔案包含捕獲的頁面截圖。