快照

快照測試對於同時斷言元件或邏輯的各種面向非常有用。在 WebdriverIO 中，您可以拍攝任何任意物件的快照，以及 WebElement DOM 結構或 WebdriverIO 命令結果的快照。

與其他測試框架類似，WebdriverIO 會拍攝給定值的快照，然後將其與儲存在測試旁邊的參考快照檔案進行比較。如果兩個快照不匹配，則測試將會失敗：要麼變更是意外的，要麼需要將參考快照更新為結果的新版本。

跨平台支援

這些快照功能可用於在 Node.js 環境中執行端對端測試，以及在瀏覽器或行動裝置上執行單元和元件測試。

使用快照

要拍攝值的快照，您可以使用 expect() API 中的 toMatchSnapshot()

import { browser, expect } from '@wdio/globals'

it('can take a DOM snapshot', () => {
    await browser.url('http://guinea-pig.webdriver.io/')
    await expect($('.findme')).toMatchSnapshot()
})

第一次執行此測試時，WebdriverIO 會建立如下所示的快照檔案

// Snapshot v1

exports[`main suite 1 > can take a DOM snapshot 1`] = `"<h1 class="findme">Test CSS Attributes</h1>"`;

快照成品應與程式碼變更一起提交，並作為程式碼審查流程的一部分進行審查。在後續的測試執行中，WebdriverIO 會將呈現的輸出與先前的快照進行比較。如果它們匹配，則測試將會通過。如果它們不匹配，則測試執行器要麼在您的程式碼中找到應該修復的錯誤，要麼實作已變更且需要更新快照。

要更新快照，請將 -s 旗標（或 --updateSnapshot）傳遞給 wdio 命令，例如

npx wdio run wdio.conf.js -s

注意： 如果您並行執行多個瀏覽器的測試，則只會建立並比較一個快照。如果您想要每個功能都有一個單獨的快照，請提出問題，並告訴我們您的使用案例。

內嵌快照

同樣地，您可以使用 toMatchInlineSnapshot() 將快照內嵌儲存在測試檔案中。

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
  const elem = $('.container')
  await expect(elem.getCSSProperty()).toMatchInlineSnapshot()
})

Vitest 不會建立快照檔案，而是會直接修改測試檔案，將快照更新為字串

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
    const elem = $('.container')
    await expect(elem.getCSSProperty()).toMatchInlineSnapshot(`
        {
            "parsed": {
                "alpha": 0,
                "hex": "#000000",
                "rgba": "rgba(0,0,0,0)",
                "type": "color",
            },
            "property": "background-color",
            "value": "rgba(0,0,0,0)",
        }
    `)
})

這樣做可以讓您直接看到預期的輸出，而無需在不同檔案之間跳轉。

視覺快照

拍攝元素的 DOM 快照可能不是最好的主意，尤其是在 DOM 結構過大且包含動態元素屬性的情況下。在這些情況下，建議依賴元素的視覺快照。

要啟用視覺快照，請將 @wdio/visual-service 新增至您的設定。您可以按照視覺測試的文件中的設定說明進行操作。

然後，您可以透過 toMatchElementSnapshot() 拍攝視覺快照，例如

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
  const elem = $('.container')
  await expect(elem.getCSSProperty()).toMatchInlineSnapshot()
})

然後，影像會儲存在基準目錄中。請查看視覺測試以取得更多資訊。

使用快照​

內嵌快照​

視覺快照​

使用快照

內嵌快照

視覺快照