WebdriverIO v7 发布

2021年2月9日 ·阅读 9 分钟

一年一度的 WebdriverIO 项目发布重大更新的时候到了。我们几乎已经养成了一种传统，即重写整个代码库以进一步发展项目。当我们宣布 v5 更新时，我们从多仓库设置迁移到了单仓库。这次，代码库的重写同样重要且具有影响力，但对最终用户几乎没有任何影响。随着越来越多的贡献者加入项目，我们注意到使用纯 JavaScript 可以帮助降低贡献的门槛，但最终会降低整体贡献的质量。随着项目中代码规模的增长，跟上所有不同的类型变得越来越困难，这对我们核心贡献者来说也是如此。由于我们中间已经有很多 TypeScript 粉丝，因此我们在参加OpenJS 协作者峰会后，决定迅速迁移到 TypeScript。

我们希望通过迁移到 TypeScript，在框架持续开发过程中引入的错误会更少。这将有助于提高代码贡献的质量和某些功能的开发速度。它也让我们对交付给用户的最新版本更有信心。

此重大更新将在很大程度上仅影响 TypeScript 用户，因为我们在所有地方都更新了类型，并改变了我们分发它们的方式。作为重写的一部分，我们升级到了 Cucumber v7，它也将其代码库迁移到了 TypeScript。因此，我们不得不更新一些 Cucumber 钩子以确保它们具有正确的类型安全。在下文中，我们将深入探讨每个主要更改，并说明如何升级到 v7。

放弃 Node v10 支持

我们已放弃对 Node v10 的支持，Node.js 团队于 2020 年 5 月将其移至维护 LTS 阶段。虽然此版本仍将收到重要的安全更新，直到 2021 年 4 月，但我们建议您将 Node.js 版本更新到 v14 或更高版本。

要更新 Node.js，了解它最初是如何安装的非常重要。如果您处于 Docker 环境中，您可以像这样升级基础镜像

- FROM mhart/alpine-node:10
+ FROM mhart/alpine-node:14

我们建议使用NVM（Node 版本管理器）来安装和管理 Node.js 版本。您可以在其项目自述文件中找到有关如何安装 NVM 和更新 Node 的详细说明。

TypeScript 重写

我们重写了整个代码库，几乎触及了所有文件以添加类型安全并在过程中修复了许多错误。这是一项真正的社区努力，如果没有这么多人帮助贡献代码，可能需要更长的时间。感谢你们所有人❤️！以前，WebdriverIO 自动生成所有类型定义，这导致创建了许多重复的类型和不一致。通过这次大修，所有类型都直接取自代码本身，并在一个名为@wdio/types的新辅助包中集中。如果您一直在使用 TypeScript，那么现在将对各种命令和配置文件有更好的类型支持。

此 TypeScript 重写将对您产生两个重大影响。您现在不再只需要在类型中定义webdriverio，还需要设置@wdio/globals/types

// tsconfig.json
"types": [
  "node",
-  "webdriverio",
+  "@wdio/globals/types",
  "@wdio/mocha-framework"
],

最后，如果您定义自定义命令，则现在需要以略微不同的方式提供其类型，如果使用模块样式类型定义文件（类型定义文件使用导入/导出；tsconfig.json 包含include部分）

// define custom commands in v6
declare namespace WebdriverIO {
    // adding command to `browser`
    interface Browser {
        browserCustomCommand: (arg: number) => void
    }
}

现在必须是

declare global {
    namespace WebdriverIO {
        interface Browser {
            browserCustomCommand: (arg: number) => void
        }
    }
}

否则，如果使用环境类型定义文件（tsconfig 中没有 include 部分，类型定义文件中没有导入/导出），则保持自定义命令声明与之前相同，因为像上面那样包含global声明将需要更改类型定义文件为模块。

除了此更改之外，我们还为测试运行器配备了在检测到 TypeScript 时自动编译配置的功能，这允许您在 WDIO 配置中利用类型安全，而无需任何其他设置（感谢@r4j4h为此做出的贡献）。这样，您也不需要在 Mocha、Jasmine 或 Cucumber 选项中需要ts-node/register，例如

jasmineOpts: {
    - requires: ['ts-node/register', 'tsconfig-paths/register'],
    + requires: ['tsconfig-paths/register'],
},

您可以在我们的文档中阅读有关 WebdriverIO TypeScript 集成的更多信息。

Cucumber v7 更新

Cucumber 开发人员在将代码库迁移到 TypeScript 方面做出了巨大努力，这极大地简化了我们的工作。新的 Cucumber 集成要求我们更新Cucumber 钩子中的参数。

如果您一直在使用 Cucumber，则要更新到 v7，只需将 Cucumber 导入更新到其新包即可

- const { Given, When, Then } = require('cucumber')
+ const { Given, When, Then } = require('@cucumber/cucumber')

改进的 Google Lighthouse 集成

自 v6 以来，WebdriverIO 可以在WebDriver 协议上运行以实现真正的跨浏览器自动化，还可以使用浏览器 API（例如Chrome 开发者工具）来自动化特定浏览器。这允许与允许更广泛测试功能的工具（例如Google Lighthouse）进行有趣的集成。使用@wdio/devtools-service，WebdriverIO 用户能够使用 Google Lighthouse 访问这些功能来运行性能测试。在此版本中，我们还将 Google Lighthouse 更新到最新版本，以启用新的性能指标，例如累积布局偏移或首次输入延迟。

更新

在 WebdriverIO v9 中，我们已弃用 Devtools 服务，并将许多功能迁移到 Lighthouse 服务 (@wdio/lighthouse-service)。我们建议用户迁移到 Puppeteer 接口（通过getPuppeteer命令）以访问 Chrome 开发者工具功能。

虽然在 v6 中性能测试会自动在移动环境中运行，但我们决定更改此设置并使默认行为更清晰。因此，如果您在 v7 中运行性能测试，则运行测试的环境没有任何变化。我们仍然建议模拟移动设备以更准确地捕捉受应用程序性能问题影响最大的用户的用户体验。为此，您可以运行以下命令

browser.emulateDevice('iPhone X')
browser.enablePerformanceAudits({
    networkThrottling: 'Regular 3G',
    cpuThrottling: 4,
    cacheEnabled: false,
    formFactor: 'mobile'
})

formFactor属性已随 Google Lighthouse v7 的更新添加，它确定如何对性能指标进行评分以及是否跳过仅限移动的审核。

新的 PWA 检查命令

此外，我们还加深了与该工具的集成，并添加了审核以捕获您的渐进式 Web 应用 (PWA) 的质量。这些应用程序使用现代 Web API 构建，以提供增强的功能、可靠性和可安装性，同时使用单个代码库覆盖任何地方、任何设备上的任何人。为了测试您的应用程序是否满足 PWA 要求，我们引入了一个checkPWA命令，该命令运行各种审核，验证您的应用程序的设置

const result = browser.checkPWA()
expect(result.passed).toBe(true)

我们将继续在 Google Lighthouse 等工具中添加更多集成以提供更多测试功能，例如可访问性、最佳实践和 SEO。

自动编译

在 WebdriverIO 的 v7 中，我们使用 Babel 或 TypeScript 等编译器工具变得更加容易。如果在您的模块中找到必要的包，测试运行器现在可以自动编译配置。通常，这些必须在您的框架选项中定义，如下所示

    mochaOpts: {
        ui: 'bdd',
        require: ['@babel/register'],
        // ...
    },

这些设置现在需要删除，因为 WebdriverIO 会自动包含它们。在我们的文档中阅读有关如何设置 Babel 或TypeScript的更多信息。

更严格的协议合规性

自 2018 年起，WebDriver 协议已升级为 W3C 推荐标准。许多云供应商和工具已更新其实现，使 JSONWireProtocol 的所有工件都已过时。WebdriverIO 项目希望通过在其功能配置中添加额外的检查来支持此过渡，以确保用户不会意外地发送两种协议的混合，从而导致意外行为。使用新版本，如果您发送不兼容的功能，例如，您的会话请求将自动失败。

capabilities: {
    browserName: 'Chrome',
    platform: 'Windows 10', // invalid JSONWire Protocol capability
    'goog:chromeOptions': { ... }
}

测试覆盖率报告

@wdio/devtools-service 现在可以捕获 JavaScript 应用程序文件的代码覆盖率。这可以帮助您确定是否应该编写更多端到端测试。要启用此功能，您必须通过为服务设置 coverageReporter 选项来启用它。

// wdio.conf.js
services: [
    ['devtools' {
        coverageReporter: {
            enable: true,
            type: 'html',
            logDir: __dirname + '/coverage'
        }
    }]
]

您还可以使用新的 getCoverageReport 命令在测试中断言代码覆盖率，例如：

const coverage = browser.getCoverageReport()
expect(coverage.lines.total).toBeAbove(0.9)
expect(coverage.statements.total).toBeAbove(0.9)
expect(coverage.functions.total).toBeAbove(0.9)
expect(coverage.branches.total).toBeAbove(0.9)

新文档

您可能已经注意到，我们已更新了我们的文档，为这个新版本提供了全新的面貌。我们已将 Docusaurus 设置升级到 v2，并对整体设计进行了新的调整。非常感谢 Anton Meier 的帮助，使我们首页上的机器人如此生动。

就是这样！我们希望您喜欢新版本，并尽快更新您的框架，以便为您的项目获得所有这些新功能、类型安全性和错误修复。如果您有任何疑问，请随时在讨论页面上开始对话，或加入我们不断壮大的支持聊天，该聊天已达到 6.7k 活跃成员。

放弃 Node v10 支持​

TypeScript 重写​

Cucumber v7 更新​

改进的 Google Lighthouse 集成​

新的 PWA 检查命令​

自动编译​

更严格的协议合规性​

测试覆盖率报告​

新文档​