如何通过Protractor启动browser-sync并集成Jenkins执行非Angular应用E2E测试？

当然可以直接通过Protractor启动BrowserSync，完全不需要依赖Gulp这类任务运行器！我们可以利用Protractor配置文件中的生命周期钩子，在测试执行前后自动启动和关闭BrowserSync，完美适配你的Jenkins集成需求。

具体实现步骤： #

1. 安装BrowserSync依赖
   首先在你的项目中安装BrowserSync开发依赖：

   npm install browser-sync --save-dev
   

2. 修改Protractor配置文件
   打开你的Protractor配置文件（通常是protractor.conf.js），添加启动/关闭BrowserSync的逻辑。核心是利用beforeLaunch和afterLaunch钩子：

   const browserSync = require('browser-sync').create();
   
   exports.config = {
     // 非Angular应用必备配置：禁用Angular同步检测
     ignoreSynchronization: true,
     baseUrl: '', // 后续会动态设置为BrowserSync的URL
     specs: ['./e2e/**/*.spec.js'],
   
     // 测试启动前：初始化BrowserSync
     beforeLaunch: function() {
       return new Promise((resolve, reject) => {
         browserSync.init({
           // 根据你的项目类型选择配置：
           // 静态站点：指定静态文件目录
           server: { baseDir: './dist' },
           // 代理后端服务：替换为你的后端地址
           // proxy: 'http://localhost:3000',
           port: 3001, // 自定义端口避免冲突
           open: false, // 禁止自动打开浏览器（Protractor会自己启动）
           notify: false // 关闭通知弹窗，避免干扰测试
         }, (err, bsInstance) => {
           if (err) {
             reject(err);
           } else {
             // 将BrowserSync的本地URL设置为Protractor的baseUrl
             exports.config.baseUrl = bsInstance.options.getIn(['urls', 'local']);
             resolve();
           }
         });
       });
     },
   
     // 测试完成后：关闭BrowserSync
     afterLaunch: function() {
       browserSync.exit();
     },
   
     // Jenkins环境推荐：无头浏览器配置
     capabilities: {
       browserName: 'chrome',
       chromeOptions: {
         args: ['--headless', '--disable-gpu', '--no-sandbox', '--disable-dev-shm-usage']
       }
     }
   };
   

3. Jenkins任务配置
   在Jenkins中只需要配置一个任务，执行以下步骤即可：

   • 拉取项目代码
   • 安装依赖：npm install
   • （可选）构建项目：如果测试依赖构建产物，执行npm run build
   • 运行Protractor测试：npx protractor protractor.conf.js

   完全不需要单独添加启动BrowserSync的步骤，Protractor会自动在测试前启动它，测试结束后关闭。

关键注意事项： #

• Jenkins环境兼容性：如果使用无头Chrome，确保Jenkins服务器安装了必要的系统依赖（比如Ubuntu下的libxss1、libappindicator1、libgbm-dev等）
• 端口冲突：自定义BrowserSync的端口（比如示例中的3001），避免和其他服务端口冲突
• 资源清理：afterLaunch钩子会确保BrowserSync进程被正确关闭，不会残留后台进程

内容的提问来源于stack exchange，提问作者Rajeev Shukla