Web开发编程网
分享Web开发相关技术

Vue cli 3:Nightwatch + Browserstack

继我去年写过关于使用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 = 进程ENVnpm_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 进程ENVVUE_DEV_SERVER_URL
requiredCapabilities {
browserName 进程ENV浏览器 ||
},
全球 {
testConfig,
waitForConditionTimeout 25000
after 异步完成=> {
如果过程ENVRUNNER ==! browserstackConfigRUNNER {)回报 ; }
const response = 等待 axios得到
https://api.browserstack.com/automate/builds.json,
{
身份验证 {
用户名 browserstackConfig用户
密码 browserstackConfigKEY
},
}
);
const build = 响应数据
找到((项目=> automation_build === buildName);
控制台日志` Browserstack会议:https://automate.browserstack.com/builds/ $ { 构建automation_buildhashed_id } `);
完成();
},
afterEach客户端,已完成){
如果过程ENVRUNNER === browserstackConfigRUNNER){
如果客户端currentTest结果失败 > 0 && 客户端的sessionId){
尝试 {
轴距
`https://api.browserstack.com/automate/sessions/${client.sessionId}.json`,
{
状态 错误
原因
},
{
身份验证 {
用户名 browserstackConfig用户
密码 browserstackConfigKEY
},
}
);
} catch(错误){
控制台错误(错误);
}
}
const cliOptions = 进程argv切片2);
const envIndex = cliOptionsindexOf‘– env );
const envName = cliOptions [envIndex + 1 ];
尝试 {
如果客户端的sessionId){
轴距
`https://api.browserstack.com/automate/sessions/${client.sessionId}.json`,
{
名称 ` $ { envName } env:$ { clientcurrentTest模块} `
},
{
身份验证 {
用户名 browserstackConfig用户
密码 browserstackConfigKEY
},
}
);
}
} catch(错误){
控制台错误(错误);
}
}
客户结束();
完成();
},
},
},
无头 {
requiredCapabilities {
browserName chrome
chromeOptions {
args [
–headless no -sandbox
],
},
},
},
测试 {
launch_url https://test-env.url
},
产品 {
launch_url https://prod-env.url
过滤器 smoketests / *
全球 {
prodConfig,
},
},
},
};
如果过程ENVRUNNER === browserstackConfigRUNNER){
nightwatchConfig = {
start_process false
主机 hub-cloud.browserstack.com
港口 80
};
nightwatchConfigcustom_assertions_path = [ tests / e2e / custom-assertions ];
nightwatchConfigtest_workersenabled = false ;
const defaultTestSettings = nightwatchConfigtest_settings违约 ;
defaultTestSettingsselenium_host = nightwatchConfig主机 ;
defaultTestSettingsselenium_port = nightwatchConfig港口 ;
const browserStackDesiredCapabilities = {
build ` $ { buildName } `
项目 SmartMatch_Admin2
browserstack.user browserstackConfig用户
browserstack.key browserstackConfigKEY
browserstack.local true
browserName 进程ENV浏览器 ||
浏览器 进程ENV浏览器 || Chrome
chromeOptions {},
};
nightwatchConfigtest_settings测试requiredCapabilities = browserStackDesiredCapabilities;
nightwatchConfigtest_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 );
如果过程ENVRUNNER === browserstackConfigRUNNER){
bs_local;
尝试 {
过程mainModulefilename = ‘./ node_modules/.bin/nightwatch ;
//在测试开始之前在本地启动browserstack的代码
控制台日志连接本地);
守夜人bs_local = bs_local = 新的 browserstack.Local();
bs_local开始({键 browserstackConfigKEY,forceLocal },(误差=> {
如果(错误)抛出错误;
控制台日志已连接。正在测试… );
守夜人cli((argv=> {
argvconfig = nightwatch.config.js ;
守夜人CliRunner(argv)
设置null,()=> {
//并行测试结束后停止本地浏览器堆栈的代码
bs_local停止(()=> {});
})
runTests(()=> {
//单一测试结束后停止本地浏览器堆栈的代码
bs_local停止(()=> {});
});
});
});
} catch(ex){
控制台log启动测试运行程序时发生错误:\ n \ n );
过程stderr` $ { EX} \ n );
过程出口2);
}
} 其他 {
const options = processargv切片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文档中需要进行的设置缺少很多东西,经过研究和尝试后,这就是我们得到的。

如果您有其他设置或更好的解决方案,请在下面分享!

未经允许不得转载:WEB开发编程网 » Vue cli 3:Nightwatch + Browserstack
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。