从 Protractor
本教程适用于使用 Protractor 并希望将其框架迁移到 WebdriverIO 的用户。在 Angular 团队宣布 Protractor 将不再得到支持后,该教程就开始了。WebdriverIO 受到许多 Protractor 设计决策的影响,因此它可能是最接近的迁移框架。WebdriverIO 团队感谢每一位 Protractor 贡献者的工作,并希望本教程能够使向 WebdriverIO 的过渡变得轻松而直接。
虽然我们希望有一个完全自动化的过程,但现实情况并非如此。每个人都有不同的设置,并且以不同的方式使用 Protractor。每个步骤都应被视为指导,而不是一步一步的指令。如果您在迁移过程中遇到问题,请不要犹豫联系我们。
设置
Protractor 和 WebdriverIO 的 API 实际上非常相似,以至于大多数命令可以通过codemod以自动化方式重写。
要安装 codemod,请运行
npm install jscodeshift @wdio/codemod
策略
迁移策略有很多种。根据团队规模、测试文件数量以及迁移的紧迫性,您可以尝试一次转换所有测试或逐个文件转换。鉴于 Protractor 将继续维护到 Angular 15 版本(2022 年底),您仍然有足够的时间。您可以同时运行 Protractor 和 WebdriverIO 测试,并开始使用 WebdriverIO 编写新的测试。根据您的时间预算,您可以先开始迁移重要的测试用例,然后逐步迁移到甚至可以删除的测试。
首先是配置文件
安装完 codemod 后,我们就可以开始转换第一个文件了。首先查看WebdriverIO 的配置选项。配置文件可能变得非常复杂,因此只移植基本部分并查看其余部分如何在迁移需要某些选项的相应测试后添加可能更有意义。
对于第一次迁移,我们只转换配置文件并运行
npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./conf.ts
您的配置文件可能命名不同,但原理应该相同:首先开始迁移配置文件。
安装 WebdriverIO 依赖项
下一步是配置一个最小的 WebdriverIO 设置,我们从一个框架迁移到另一个框架时开始构建它。首先,我们通过以下方式安装 WebdriverIO CLI:
npm install --save-dev @wdio/cli
接下来,我们运行配置向导
npx wdio config
这将引导您完成一些问题。对于此迁移方案,您
- 选择默认选项
- 我们建议不要自动生成示例文件
- 为 WebdriverIO 文件选择不同的文件夹
- 并选择 Mocha 而不是 Jasmine。
即使您之前可能使用过带有 Jasmine 的 Protractor,但 Mocha 提供了更好的重试机制。选择权在您手中!
在完成简短的问卷调查后,向导将安装所有必要的软件包并将它们存储在您的 package.json
中。
迁移配置文件
在拥有转换后的 conf.ts
和新的 wdio.conf.ts
后,现在是时候将配置从一个配置文件迁移到另一个配置文件了。确保只移植对所有测试能够运行至关重要的代码。在我们这里,我们移植了钩子函数和框架超时。
我们现在将继续使用我们的 wdio.conf.ts
文件,因此不再需要对原始 Protractor 配置进行任何更改。我们可以撤消这些更改,以便两个框架可以并排运行,并且我们可以一次移植一个文件。
迁移测试文件
我们现在可以移植第一个测试文件了。为了简单起见,让我们从一个对第三方包或其他文件(如页面对象)依赖性不多的文件开始。在我们的示例中,第一个要迁移的文件是 first-test.spec.ts
。首先创建新 WebdriverIO 配置期望其文件所在的目录,然后将其移动过去
mv mkdir -p ./test/specs/
mv test-suites/first-test.spec.ts ./test/specs
现在让我们转换此文件
npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/first-test.spec.ts
就是这样!此文件非常简单,我们不再需要进行任何其他更改,可以直接尝试通过以下方式运行 WebdriverIO:
npx wdio run wdio.conf.ts
恭喜 🥳 您刚刚迁移了第一个文件!
后续步骤
从这一点开始,您继续逐个转换测试和页面对象。对于某些文件,codemod 有可能因错误而失败,例如
ERR /path/to/project/test/testdata/failing_submit.js Transformation error (Error transforming /test/testdata/failing_submit.js:2)
Error transforming /test/testdata/failing_submit.js:2
> login_form.submit()
^
The command "submit" is not supported in WebdriverIO. We advise to use the click command to click on the submit button instead. For more information on this configuration, see https://webdriverio.node.org.cn/docs/api/element/click.
at /path/to/project/test/testdata/failing_submit.js:132:0
对于某些 Protractor 命令,WebdriverIO 中没有它的替代品。在这种情况下,codemod 将为您提供一些关于如何重构它的建议。如果您遇到此类错误消息过于频繁,请随时提出问题并请求添加特定的转换。虽然 codemod 已经转换了大部分 Protractor API,但仍有很大的改进空间。
结论
我们希望本教程能够指导您完成迁移到 WebdriverIO 的过程。社区在使用各种组织中的各种团队进行测试的同时,继续改进 codemod。如果您有任何反馈,请不要犹豫提出问题,或者如果您在迁移过程中遇到困难,请开始讨论。