跳至主要内容

视觉测试

它能做什么？​

WebdriverIO 提供了屏幕、元素或整个页面的图像比较功能，适用于

  • 🖥️ 桌面浏览器（Chrome / Firefox / Safari / Microsoft Edge）
  • 📱 移动/平板电脑浏览器（Android 模拟器上的 Chrome / iOS 模拟器上的 Safari / 模拟器 / 真机）通过 Appium
  • 📱 原生应用（Android 模拟器 / iOS 模拟器 / 真机）通过 Appium（🌟 新增 🌟）
  • 📳 混合应用通过 Appium

通过@wdio/visual-service，这是一个轻量级的 WebdriverIO 服务。

这允许您

  • 保存或比较屏幕/元素/全屏屏幕与基线
  • 在没有基线的情况下自动创建基线
  • 屏蔽自定义区域，甚至在比较过程中自动排除状态栏或工具栏（仅限移动设备）
  • 增加元素尺寸截图
  • 在网站比较期间隐藏文本以
    • 提高稳定性并防止字体渲染不稳定
    • 只关注网站的布局
  • 使用不同的比较方法和一组额外的匹配器来获得更易读的测试
  • 验证您的网站将如何支持使用键盘进行选项卡切换，另请参阅使用键盘进行选项卡切换
  • 以及更多功能，请参阅服务和方法选项

该服务是一个轻量级模块，用于检索所有浏览器/设备所需的數據和屏幕截图。比较功能来自ResembleJS。如果您想在线比较图像，可以查看在线工具。

注意 适用于原生/混合应用

方法saveScreen、saveElement、checkScreen、checkElement以及匹配器toMatchScreenSnapshot和toMatchElementSnapshot可用于原生应用/上下文。

如果您想将其用于混合应用，请在您的服务设置中使用属性isHybridApp:true。

安装​

最简单的方法是将@wdio/visual-service作为开发依赖项保留在您的package.json中，通过

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

用法​

@wdio/visual-service可以用作普通服务。您可以在配置文件中使用以下内容进行设置

import path from "node:path";

// wdio.conf.ts
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // Some options, see the docs for more
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                formatImageName: "{tag}-{logName}-{width}x{height}",
                screenshotPath: path.join(process.cwd(), "tmp"),
                savePerInstance: true,
                // ... more options
            },
        ],
    ],
    // ...
};

更多服务选项可在此处找到此处。

在 WebdriverIO 配置中设置完成后，您可以继续将视觉断言添加到您的测试中。

WebdriverIO 多远程​

我们也支持多远程。要使其正常工作，请确保将wdio-ics:options添加到您的功能中，如下所示。这将确保每个屏幕截图都有其自己的唯一名称。

编写您的测试与使用测试运行器相比不会有任何不同

// wdio.conf.js
export const config = {
    capabilities: {
        chromeBrowserOne: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // THIS!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-one",
                },
            },
        },
        chromeBrowserTwo: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // THIS!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-two",
                },
            },
        },
    },
};

以编程方式运行​

以下是如何通过remote选项使用@wdio/visual-service的最小示例

import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";

let visualService = new VisualService({
    autoSaveBaseline: true,
});

const browser = await remote({
    logLevel: "silent",
    capabilities: {
        browserName: "chrome",
    },
});

// "Start" the service to add the custom commands to the `browser`
visualService.remoteSetup(browser);

await browser.url("https://webdriverio.node.org.cn/");

// or use this for ONLY saving a screenshot
await browser.saveFullPageScreen("examplePaged", {});

// or use this for validating. Both methods don't need to be combined, see the FAQ
await browser.checkFullPageScreen("examplePaged", {});

await browser.deleteSession();

使用键盘进行选项卡切换​

您可以通过使用键盘TAB键检查网站是否可访问。测试可访问性的这一部分一直是一项耗时的（手动）工作，并且很难通过自动化来完成。使用saveTabbablePage和checkTabbablePage方法，您现在可以在网站上绘制线条和点，以验证选项卡顺序。

请注意，这仅适用于桌面浏览器，**不适用于**移动设备。所有桌面浏览器都支持此功能。

注意

这项工作受到Viv Richards关于“使用视觉测试和 JavaScript 自动化页面选项卡流程”的博文启发。

可选项卡元素的选择方式基于模块tabbable。如果存在任何关于选项卡切换的问题，请查看README.md，尤其是更多详细信息部分。

它是如何工作的​

这两种方法都将在您的网站上创建一个canvas元素，并绘制线条和点以显示如果最终用户使用它，您的 TAB 将转到哪里。之后，它将创建全屏截图，让您全面了解流程。

重要

**仅当您需要创建屏幕截图且**不想将其与**基线**图像进行比较时，才使用saveTabbablePage。****

当您想将选项卡流程与基线进行比较时，可以使用checkTabbablePage方法。您**不需要**同时使用这两种方法。如果已经创建了基线图像（可以通过在实例化服务时提供autoSaveBaseline: true自动完成），则checkTabbablePage将首先创建实际图像，然后将其与基线进行比较。

选项​

这两种方法都使用与saveFullPageScreen或compareFullPageScreen相同的选项。

示例​

这是一个关于选项卡如何在我们的豚鼠网站上工作的示例

WDIO tabbing example

自动更新失败的视觉快照​

通过在命令行中添加参数--update-visual-baseline来更新基线图像。这将

  • 自动复制实际拍摄的屏幕截图并将其放入基线文件夹
  • 如果有差异，它将使测试通过，因为基线已更新

用法

npm run test.local.desktop  --update-visual-baseline

在运行日志信息/调试模式时，您将看到添加了以下日志

[0-0] ..............
[0-0] #####################################################################################
[0-0]  INFO:
[0-0]  Updated the actual image to
[0-0]  /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
[0-0] #####################################################################################
[0-0] ..........

Typescript 支持​

我们现在也支持 typescript 类型。将以下内容添加到您的tsconfig.json中的types中

{
    "compilerOptions": {
        "types": ["@wdio/visual-service"]
    }
}

系统要求​

版本 5 及以上​

对于版本 5 及以上版本，此模块是一个纯 JavaScript 模块，除了常规的 项目需求 之外，没有任何其他系统依赖项。它使用 Jimp，这是一个完全用 JavaScript 编写的 Node 图像处理库，没有任何原生依赖项。

版本 4 及以下​

对于版本 4 及以下版本，此模块依赖于 Canvas，这是一个 Node.js 的画布实现。Canvas 依赖于 Cairo。

安装详情​

默认情况下，macOS、Linux 和 Windows 的二进制文件将在项目的 npm install 期间下载。如果您没有支持的操作系统或处理器架构，则模块将在您的系统上编译。这需要几个依赖项，包括 Cairo 和 Pango。

有关详细的安装信息，请参阅 node-canvas wiki。以下是常见操作系统的单行安装说明。请注意，libgif/giflib、librsvg 和 libjpeg 是可选的，仅在分别需要 GIF、SVG 和 JPEG 支持时才需要。需要 Cairo v1.10.0 或更高版本。

使用 Homebrew

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

Mac OS X v10.11+：如果您最近更新到 Mac OS X v10.11+ 并在编译时遇到问题，请运行以下命令：xcode-select --install。在 Stack Overflow 上阅读有关此问题的更多信息。如果您安装了 Xcode 10.0 或更高版本，则要从源代码构建，您需要 NPM 6.4.1 或更高版本。

欢迎！我怎样才能帮到您？

WebdriverIO AI Copilot