快照

快照测试对于同时断言组件或逻辑的广泛方面非常有用。在 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()
})

然后，图像将存储在基线目录中。有关更多信息，请查看视觉测试。

使用快照​

内联快照​

视觉快照​

使用快照

内联快照

视觉快照