為元件、端對端和行動測試導入 DOM 和視覺快照測試

我們很高興宣布支援使用一組通用的基本元素，支援 WebdriverIO 提供的所有測試環境，進行 DOM 和視覺快照測試。我們的願景一直是提供一個全面、多功能的測試工具，簡化您的工作流程。此更新是朝著創建一個適用於單元和視覺測試的「瑞士軍刀」邁出的一步，滿足跨平台的多樣化需求，並將我們的支援擴展到原生行動應用程式，使您的測試過程更有效率和無縫。

當您執行元件和單元測試、端對端測試以及行動網路測試時，您可以使用 DOM 和視覺快照基本元素。此外，相同的視覺快照基本元素也可用於原生行動應用程式測試。

如果您更偏好視覺學習，我們也在我們的 YouTube 頻道上發布了 WebdriverIO 教學

讓我們深入了解這些強大的功能。

DOM 或物件快照​

為了評估 DOM 的狀態、大型物件或 UI 元素的内容，我們常常傾向於將值複製到我們的測試中，如果我們變更應用程式或元件的行為，則手動更新該值。

使用基於文字的快照，我們可以讓 WebdriverIO 處理。例如，假設我們想要在瀏覽器中驗證我們的 React 元件的狀態，我們只需執行以下操作

import { expect, $ } from '@wdio/globals'
import { render } from '@testing-library/react'

function App() {
    const [theme, setTheme] = useState('light')

    const toggleTheme = () => {
        const nextTheme = theme === 'light' ? 'dark' : 'light'
        setTheme(nextTheme)
    }

    return <button onClick={toggleTheme}>
        Current theme: {theme}
    </button>
}

describe('React Component Testing', () => {
    it('supports snapshot tests', async () => {
        const { container } = render(<App />)
        await expect(container).toMatchSnapshot()
        await $('button').click()
        await expect(container).toMatchSnapshot()
    })
})

WebdriverIO 會自動抓取元件的 DOM 結構，並在您的測試旁邊的 /src/__snapshots__ 目錄中儲存一個名為 component.test.tsx.snap 的快照檔案，其内容如下

// Snapshot v1

exports[`React Component Testing > supports snapshot tests 1`] = `"<div><button>Current theme: light</button></div>"`;

exports[`React Component Testing > supports snapshot tests 2`] = `"<div><button>Current theme: dark</button></div>"`;

如果您希望將快照保留為測試的一部分，您可以使用 toMatchInlineSnapshot

await expect(container).toMatchInlineSnapshot()

在第一次執行測試後，WebdriverIO 將會對測試進行變更，並內嵌填入快照

await expect(container).toMatchInlineSnapshot(`"<div><button>Current theme: light</button></div>"`)

現在，如果您對元件進行變更，這將會影響所有快照，您可以透過呼叫在單次執行中更新所有快照

npx wdio run wdio.conf.ts --updateSnapshots
# or
npx wdio run wdio.conf.ts -s

這使得維護您的測試變得更加容易。同樣的方法適用於所有其他類型的物件，例如 CSS 屬性或元素的文字内容。它們都可以轉換為快照，以簡化斷言並保持您的測試精簡。這也可以透過將許多單一斷言合併為一個來加速您的測試，例如：

const elem = $('#alertBar')
await expect(elem).toHaveAttribute('data-alert')
await expect(elem).toHaveClassName('success')
await expect(elem).toHaveText('You logged into a secure area!')

現在變成一個單一

await expect($('#alertBar')).toMatchSnapshot()
/**
 * stores the following into a snapshot file:
 *
 * <div data-alert="" id="flash" class="flash success">
 *   You logged into a secure area!
 *   <a href="#" class="close">×</a>
 * </div>
 */

雖然取得 DOM 的快照可能是最突出的用例，但您可以取得所有類型的可序列化資料結構的快照，例如：

// the visible content of an element
await expect($('elem').getText()).toMatchSnapshot()
// or of an serializable object
await expect($('elem').getCSSProperty('color')).toMatchSnapshot()

您可以在我們的快照指南中找到有關 DOM 和基於物件的快照的更多資訊。

視覺快照​

雖然取得元素結構及其屬性的快照可能很棒且功能強大，但它有一個重要的注意事項：即使我們正在測試元素是否具有名為 success 的類別名稱，這也不能保證警示是綠色的！

基於這些原因，視覺測試已成為一種非常流行的工具，因為它包含元素的渲染方式、顏色，並可以確保例如它不會被任何其他元素覆蓋。取得視覺快照的工作方式非常相似，因為您可以

• 取得整個螢幕的視覺快照

  await expect(browser).toMatchScreenSnapshot('partialPage')
  
• 取得元素的視覺快照

  await expect($('#element-id')).toMatchElementSnapshot('firstButtonElement')
  
• 取得整個頁面的快照

  await expect(browser).toMatchFullPageSnapshot('fullPage')
  
• 或者取得包含頁面 Tab 鍵切換能力的頁面快照

  await expect(browser).toMatchTabbablePageSnapshot('check-tabbable')
  

WebdriverIO 會方便地將這些視覺快照儲存在您的測試旁邊的 __snapshots__ 目錄中，與基於文字的快照並列。

雖然基於文字的快照測試已內建於 WebdriverIO 中，但您必須安裝一個服務，才能透過以下方式啟用所有視覺快照功能

npm i --save-dev @wdio/visual-service

在最近發布的視覺測試模組中，我們針對行動原生應用程式快照測試進行了進一步的改進。

行動原生應用程式快照測試​

該模組現在支援行動原生應用程式的 toMatchElementSnapshot 和 toMatchScreenSnapshot 比對器。它會自動偵測測試環境（網頁、webview 或 native_app），以簡化您的工作流程。

視覺服務的主要功能​

讓 WebdriverIO 的視覺測試獨具特色的一些功能包括

• 將螢幕/元素/全頁螢幕與基準線儲存或比較
• 在沒有基準線時自動建立基準線
• 遮蔽自訂區域，甚至在比較期間自動排除狀態和或工具列（僅限行動裝置）
• 增加元素尺寸螢幕擷取畫面
• 在網站比較期間隱藏文字以
  • 提高穩定性並防止字體渲染不穩定
  • 僅專注於網站的版面配置
• 使用不同的比較方法和一組額外的比對器，以獲得更易讀的測試
• 驗證您的網站如何支援使用鍵盤進行 Tab 鍵切換，另請參閱在網站上使用 Tab 鍵切換
• 以及更多，請參閱服務和方法選項

在我們的視覺文件中了解有關 WebdriverIO 視覺測試功能的所有資訊，並加入我們在 Discord 上的 👁️-visual-testing 頻道。

特別感謝 @wswebcreation​

我們要非常感謝我們的核心維護者 Wim Selles 在 wdio-native-app-compare 的工作，這啟發了這次增強功能。他的貢獻對於提升我們模組的功能至關重要。

感謝您的持續支援，我們期待您對這些新功能的意見回饋。

測試愉快！

WebdriverIO 團隊