跳至主要内容

组件测试

使用 WebdriverIO 的 浏览器运行器，您可以在实际的桌面或移动浏览器中运行测试，同时使用 WebdriverIO 和 WebDriver 协议来自动化和交互页面上呈现的内容。与仅允许针对 JSDOM 进行测试的其他测试框架相比，这种方法具有诸多优势。

它是如何工作的？​

浏览器运行器使用 Vite 渲染测试页面并初始化测试框架以在浏览器中运行您的测试。目前它仅支持 Mocha，但 Jasmine 和 Cucumber 正在路线图上。这允许测试任何类型的组件，即使对于不使用 Vite 的项目也是如此。

Vite 服务器由 WebdriverIO 测试运行器启动并进行配置，以便您可以像往常一样对正常的端到端测试使用所有报告器和服务。此外，它还初始化了一个browser 实例，允许您访问WebdriverIO API 的子集以与页面上的任何元素进行交互。与端到端测试类似，您可以通过附加到全局作用域的browser变量或从@wdio/globals导入它来访问该实例，具体取决于injectGlobals 的设置方式。

WebdriverIO 内置支持以下框架

  • Nuxt：WebdriverIO 的测试运行器检测 Nuxt 应用程序并自动设置您的项目组合，并帮助模拟 Nuxt 后端，在Nuxt 文档中了解更多信息
  • TailwindCSS：WebdriverIO 的测试运行器检测您是否正在使用 TailwindCSS，并将环境正确加载到测试页面中

设置​

要在浏览器中设置 WebdriverIO 以进行单元或组件测试，请通过以下方式启动新的 WebdriverIO 项目：

npm init wdio@latest ./
# or
yarn create wdio ./

配置向导启动后，选择browser以运行单元和组件测试，并根据需要选择其中一个预设，否则如果只想运行基本的单元测试，则选择“其他”。如果您已经在项目中使用 Vite，还可以配置自定义 Vite 配置。有关更多信息，请查看所有运行器选项。

信息

注意：WebdriverIO 默认会在 CI 中以无头模式运行浏览器测试，例如，CI环境变量设置为'1'或'true'。您可以使用运行器的headless选项手动配置此行为。

在此过程结束时，您应该会找到一个包含各种 WebdriverIO 配置的wdio.conf.js，包括一个runner属性，例如：

wdio.comp.conf.js
loading...

通过定义不同的功能，您可以在不同的浏览器中运行测试，如果需要，还可以并行运行。

如果您仍然不确定所有内容是如何工作的，请观看以下教程，了解如何在 WebdriverIO 中开始使用组件测试

测试工具​

您完全可以决定在测试中运行什么以及如何渲染组件。但是，我们建议使用Testing Library 作为实用程序框架，因为它为各种组件框架（如 React、Preact、Svelte 和 Vue）提供了插件。它对于将组件渲染到测试页面非常有用，并且它会在每次测试后自动清理这些组件。

您可以根据需要将 Testing Library 原语与 WebdriverIO 命令混合使用，例如：

component-testing/svelte-example.js
loading...

注意：使用 Testing Library 的渲染方法有助于在测试之间删除创建的组件。如果您不使用 Testing Library，请确保将测试组件附加到在测试之间进行清理的容器。

设置脚本​

您可以通过在 Node.js 或浏览器中运行任意脚本来设置测试，例如注入样式、模拟浏览器 API 或连接到第三方服务。WebdriverIO 的钩子可用于在 Node.js 中运行代码，而mochaOpts.require 允许您在加载测试之前将脚本导入浏览器，例如：

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // provide a setup script to run in the browser
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // set up test environment in Node.js
    }
    // ...
}

例如，如果您想使用以下设置脚本模拟测试中的所有fetch()调用

import { fn } from '@wdio/browser-runner'

// run code before all tests are loaded
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // run code after test file is loaded
}

export const mochaGlobalTeardown = () => {
    // run code after spec file was executed
}

现在，在您的测试中，您可以为所有浏览器请求提供自定义响应值。在Mocha 文档中阅读有关全局夹具的更多信息。

监视测试和应用程序文件​

您可以通过多种方式调试浏览器测试。最简单的方法是使用--watch标志启动 WebdriverIO 测试运行器，例如：

$ npx wdio run ./wdio.conf.js --watch

这将首先运行所有测试，并在所有测试运行后停止。然后，您可以对单个文件进行更改，然后这些文件将被单独重新运行。如果您设置了一个指向应用程序文件的filesToWatch，则在对您的应用程序进行更改时，它将重新运行所有测试。

调试​

虽然还无法在 IDE 中设置断点并让远程浏览器识别它们，但您可以使用debug命令在任何时候停止测试。这允许您打开 DevTools，然后通过在sources 选项卡中设置断点来调试测试。

调用debug命令时，您还将在终端中获得一个 Node.js repl 接口，显示

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

按Ctrl或Command + c或输入.exit继续测试。

使用 Selenium Grid 运行​

如果您已设置了Selenium Grid 并通过该网格运行浏览器，则必须设置host浏览器运行器选项以允许浏览器访问正在提供测试文件的正确主机，例如：

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // network IP of the machine that runs the WebdriverIO process
        host: 'http://172.168.0.2'
    }]
}

这将确保浏览器正确打开在运行 WebdriverIO 测试的实例上托管的正确服务器实例。

示例​

您可以在我们的示例存储库中找到使用流行组件框架测试组件的各种示例。

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

WebdriverIO AI Copilot