Protractor在Chrome无头模式下测试失败：元素定位异常及证书问题求助

我之前也碰到过类似的坑，看起来是元素找不到，实际背后是Chrome无头模式下的证书验证问题。先理清楚你的问题细节：

问题回顾 #

你执行这段定位代码时：

element(by.id('username')).sendKeys('deepu');

正常Chrome浏览器模式完全没问题，但切换到无头模式就抛出错误：

Failed: No element found using locator: By(css selector, *[id="username"])

你的环境配置：

• Chrome版本：63.0.3239.132（官方64位版本）
• package.json依赖配置：

"dependencies": { 
  "jasmine": "2.4.1", 
  "typescript": "^2.1.6" 
}, 
"devDependencies": { 
  "@types/jasmine": "2.5.51", 
  "@types/jasminewd2": "^2.0.0", 
  "chromedriver": "^2.34.1", 
  "protractor": "^5.2.2", 
  "protractor-jasmine2-html-reporter": "0.0.7", 
  "selenium-server-standalone-jar": "^3.8.1", 
  "ts-node": "^3.0.2" 
}

你后来改用Firefox Quantum无头模式，配置acceptInsecureCerts: true解决了问题，但需要启动独立Selenium服务——其实Chrome无头模式也能直接搞定，不用绕路。

核心原因 #

Chrome无头模式默认会严格验证证书，当你的测试网站用了自签名证书或者证书不被信任时，无头Chrome会停留在证书警告页面，根本没加载到目标登录页，自然找不到username元素。

Chrome无头模式的解决方案 #

直接在Protractor配置文件里给ChromeOptions添加忽略证书错误的参数就行，不需要依赖独立Selenium服务：

exports.config = {
  framework: 'jasmine',
  capabilities: {
    browserName: 'chrome',
    // 注意：Protractor 5.x版本要用`goog:chromeOptions`，旧版本是`chromeOptions`
    'goog:chromeOptions': {
      args: [
        '--headless',
        '--disable-gpu',
        '--ignore-certificate-errors', // 核心参数：忽略证书错误
        '--allow-insecure-localhost' // 针对localhost的证书问题，可选但推荐添加
      ]
    }
  },
  specs: [ './specs/login.spec.js' ]
};

另外检查了下，你的chromedriver版本2.34刚好对应Chrome 61-63版本，版本兼容性没问题，所以只要加上证书忽略参数就能解决问题。

额外排查技巧 #

如果还是遇到异常，可以试试：

• 启动Protractor时加--verbose参数，查看详细日志，确认页面是否真的加载到了目标登录页
• 在测试代码里添加截图逻辑：browser.takeScreenshot().then(img => console.log("当前页面截图base64:", img))，直接查看无头模式下实际显示的页面是不是证书警告页

关于你用的Firefox方案 #

你的Firefox配置是有效的，acceptInsecureCerts: true确实能让Firefox忽略证书错误，但Firefox无头模式目前确实需要依赖独立Selenium服务，而Chrome可以直接通过chromedriver搞定，所以优先推荐Chrome的解决方案。

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