WEB开发编程网继我去年写过关于使用Nightwatch和Browserstack与Vue cli 2进行端到端测试的配置的文章之后，我想分享新的设置，因为我们正在使用Vue cli 3。
这是我们要实现的设置的摘要。我们希望能够对以下各项进行端到端测试：
- 使用本地Selenium和Chromedriver的localhost。
- 使用本地硒和Chromedriver测试/生产URL
- 浏览器堆栈中的测试/产品URL
更多详细信息在上一篇文章中，因此请检查一下是否需要。在这里，我将主要分享最终配置。
快速提醒一下：
- 您需要使用“本地浏览器”，以便在无法公开访问的情况下可以访问网络中的任何链接
- 默认情况下，Browserstack不会在失败的情况下更新会话状态，而是使用文件名进行命名测试。您必须使用其API更新测试状态和名称，并且需要访问selenium会话ID才能执行此操作。
如果您不熟悉Vue cli 3的端到端测试，最好在阅读之前先看一下。基本上，它允许您使用自己选择的框架（Nightwatch或Cypress）运行端到端测试，而无需进行任何配置。运行器部分都是抽象的，您只需提供自己的配置，该配置将与它们提供的默认配置合并。
Nightwatch配置
这和以前几乎一样，只是减去了Cli 3正在处理的事情（Cli 3已将其默认配置与我们的配置合并在一起）。
现在，我们从dotenv文件（也由Vue Cli使用）中获得了测试配置和prod配置（在我们的示例中用于不同的URL，每个环境的id）。
| const axios = require（‘ axios ‘）; | |
| const browserstackConfig = require（‘ ./tests/e2e/browserstack.config ‘）; | |
| const path = require（‘ path ‘）; | |
| const testConfig = require（‘ dotenv ‘）。配置（{路径： 路径。决心（过程。CWD（），‘ .env.test ‘）}）。解析 ; | |
| const prodConfig = require（‘ dotenv ‘）。配置（{路径： 路径。决心（过程。CWD（），‘ .env.prod ‘）}）。解析 ; | |
| const packageVersion = 进程。ENV。npm_package_version ; | |
| const buildName = ` Ver_ $ { packageVersion } ` ; | |
| // http://nightwatchjs.org/gettingstarted#settings-file | |
| const nightwatchConfig = { | |
| src_folders ： [ ‘ tests / e2e / specs ‘ ]， | |
| output_folder ： ‘测试/ e2e /报告‘， | |
| custom_commands_path ： [ ‘ tests / e2e / custom-command ‘ ]， | |
| page_objects_path ： ‘ tests / e2e / pages ‘， | |
| test_workers ： { | |
| 已启用： true， | |
| 工人： ‘汽车‘， | |
| }, | |
| test_settings ： { | |
| 默认值： { | |
| end_session_on_fail ： false，// /！\重要的是要恢复会话ID并在失败时更新浏览器堆栈状态 | |
| launch_url ： 进程。ENV。VUE_DEV_SERVER_URL， | |
| requiredCapabilities ： { | |
| browserName ： 进程。ENV。浏览器 || ‘铬‘， | |
| }, | |
| 全球： { | |
| … testConfig， | |
| waitForConditionTimeout ： 25000， | |
| after ： 异步（完成）=> { | |
| 如果（过程。ENV。RUNNER ==！ browserstackConfig。RUNNER {）回报 ; } | |
| const response = 等待 axios。得到（ | |
| ‘https://api.browserstack.com/automate/builds.json‘, | |
| { | |
| 身份验证： { | |
| 用户名： browserstackConfig。用户， | |
| 密码： browserstackConfig。KEY， | |
| }, | |
| } | |
| ); | |
| const build = 响应。数据 | |
| 。找到（（项目）=> 项。automation_build。名 === buildName）; | |
| 控制台。日志（` Browserstack会议：https://automate.browserstack.com/builds/ $ { 构建。automation_build。hashed_id } `）; | |
| 完成（）; | |
| }, | |
| afterEach（客户端，已完成）{ | |
| 如果（过程。ENV。RUNNER === browserstackConfig。RUNNER）{ | |
| 如果（客户端。currentTest。结果。失败 > 0 && 客户端。的sessionId）{ | |
| 尝试 { | |
| 轴距。放（ | |
| `https://api.browserstack.com/automate/sessions/${client.sessionId}.json`, | |
| { | |
| 状态： “错误”， | |
| 原因： ‘ ‘， | |
| }, | |
| { | |
| 身份验证： { | |
| 用户名： browserstackConfig。用户， | |
| 密码： browserstackConfig。KEY， | |
| }, | |
| } | |
| ); | |
| } catch（错误）{ | |
| 控制台。错误（错误）; | |
| } | |
| } | |
| const cliOptions = 进程。argv。切片（2）; | |
| const envIndex = cliOptions。indexOf（‘– env ‘）; | |
| const envName = cliOptions [envIndex + 1 ]; | |
| 尝试 { | |
| 如果（客户端。的sessionId）{ | |
| 轴距。放（ | |
| `https://api.browserstack.com/automate/sessions/${client.sessionId}.json`, | |
| { | |
| 名称： ` $ { envName } env：$ { client。currentTest。模块} `， | |
| }, | |
| { | |
| 身份验证： { | |
| 用户名： browserstackConfig。用户， | |
| 密码： browserstackConfig。KEY， | |
| }, | |
| } | |
| ); | |
| } | |
| } catch（错误）{ | |
| 控制台。错误（错误）; | |
| } | |
| } | |
| 客户。结束（）; | |
| 完成（）; | |
| }, | |
| }, | |
| }, | |
| 无头： { | |
| requiredCapabilities ： { | |
| browserName ： ‘ chrome ‘， | |
| chromeOptions ： { | |
| args ： [ | |
| ‘ –headless ‘， ‘ — no -sandbox ‘， | |
| ], | |
| }, | |
| }, | |
| }, | |
| 测试： { | |
| launch_url ： ‘ https：//test-env.url ‘， | |
| }, | |
| 产品： { | |
| launch_url ： ‘ https：//prod-env.url ‘， | |
| 过滤器： ‘ smoketests / * ‘， | |
| 全球： { | |
| … prodConfig， | |
| }, | |
| }, | |
| }, | |
| }; | |
| 如果（过程。ENV。RUNNER === browserstackConfig。RUNNER）{ | |
| nightwatchConfig。硒 = { | |
| start_process ： false， | |
| 主机： ‘ hub-cloud.browserstack.com ‘， | |
| 港口： 80， | |
| }; | |
| nightwatchConfig。custom_assertions_path = [ ‘ tests / e2e / custom-assertions ‘ ]; | |
| nightwatchConfig。test_workers。enabled = false ; | |
| const defaultTestSettings = nightwatchConfig。test_settings。违约 ; | |
| defaultTestSettings。selenium_host = nightwatchConfig。硒。主机 ; | |
| defaultTestSettings。selenium_port = nightwatchConfig。硒。港口 ; | |
| const browserStackDesiredCapabilities = { | |
| build ： ` $ { buildName } `， | |
| 项目： ‘ SmartMatch_Admin2 ‘， | |
| ‘ browserstack.user ‘： browserstackConfig。用户， | |
| ‘ browserstack.key ‘： browserstackConfig。KEY， | |
| ‘ browserstack.local ‘： true， | |
| browserName ： 进程。ENV。浏览器 || ‘铬‘， | |
| 浏览器： 进程。ENV。浏览器 || ‘ Chrome ‘， | |
| chromeOptions ： {}， | |
| }; | |
| nightwatchConfig。test_settings。测试。requiredCapabilities = browserStackDesiredCapabilities; | |
| nightwatchConfig。test_settings。督促。requiredCapabilities = browserStackDesiredCapabilities; | |
| } | |
| 模块。出口 = nightwatchConfig; |
亚军配置
唯一更改的是，如果我们不使用Browserstack，我们将执行Vue cli 3脚本而不是我们自己的脚本。
| const Nightwatch = require（‘ nightwatch ‘）; | |
| const browserstack = require（‘ browserstack-local ‘）; | |
| const spawn = require（‘ cross-spawn ‘）; | |
| const browserstackConfig = require（‘ ./browserstack.config ‘）; | |
| 如果（过程。ENV。RUNNER === browserstackConfig。RUNNER）{ | |
| 让 bs_local; | |
| 尝试 { | |
| 过程。mainModule。filename = ‘./ node_modules/.bin/nightwatch ‘ ; | |
| //在测试开始之前在本地启动browserstack的代码 | |
| 控制台。日志（‘连接本地‘）; | |
| 守夜人。bs_local = bs_local = 新的 browserstack.Local（）; | |
| bs_local。开始（{键： browserstackConfig。KEY，forceLocal ： ‘真‘ }，（误差）=> { | |
| 如果（错误）抛出错误； | |
| 控制台。日志（“已连接。正在测试… ”）； | |
| 守夜人。cli（（argv）=> { | |
| argv。config = ‘ nightwatch.config.js ‘ ; | |
| 守夜人。CliRunner（argv） | |
| 。设置（null，（）=> { | |
| //并行测试结束后停止本地浏览器堆栈的代码 | |
| bs_local。停止（（）=> {}）; | |
| }) | |
| 。runTests（（）=> { | |
| //单一测试结束后停止本地浏览器堆栈的代码 | |
| bs_local。停止（（）=> {}）; | |
| }); | |
| }); | |
| }); | |
| } catch（ex）{ | |
| 控制台。log（‘启动测试运行程序时发生错误：\ n \ n ‘）; | |
| 过程。stderr。写（` $ { EX。栈} \ n ‘）; | |
| 过程。出口（2）; | |
| } | |
| } 其他 { | |
| const options = process。argv。切片（2）; | |
| 选项。unshift（‘ test：e2e ‘）; | |
| 产卵（‘ ./node_modules/.bin/vue-cli-service ‘，选项，{标准输入输出： ‘继承‘ }）; | |
| } |
在我们的package.json中，要执行此操作，我们需要：
{
...
"scripts": {
"test:e2e": "node tests/e2e/runner.js
}
...
}
我们将在开始时针对不同场景使用以下命令：
- 使用本地硒和Chromedriver的localhost：npm运行test：e2e
- 使用本地硒和Chromedriver测试/生产URL：npm运行test：e2e—env测试或npm运行test：e2e—env生产
- 浏览器中的测试/产品URL：RUNNER =’browserstack’npm运行test：e2e—env测试或RUNNER =’browserstack’npm运行test：e2e—env产品
结论
我希望这对尝试使用Vue cli 3设置Browserstack和Nightwatch的人有所帮助。我们发现Browserstask文档中需要进行的设置缺少很多东西，经过研究和尝试后，这就是我们得到的。
如果您有其他设置或更好的解决方案，请在下面分享！
