Protractor测试普通Chrome正常，无头Chrome报元素未找到错误求助

这个问题我之前排查过好几次，主要是无头Chrome的默认行为和你的等待策略导致的，下面是具体的解决步骤：

1. 先修复测试代码里的语法错误 #

你的测试代码里有个明显的语法问题，element(by.id('more').click();少了一个闭合括号，正确的写法应该是：

element(by.id('more')).click();

虽然你说普通Chrome能运行成功，但这个语法错误可能在无头模式下触发意外行为，先把这个修正。

2. 为无头Chrome设置合适的窗口大小 #

默认情况下，无头Chrome的窗口尺寸很小（大概800x600），这会导致页面布局和普通Chrome差异很大，很多元素可能因为视口太小没渲染出来，或者被隐藏。你需要在chromeOptions里添加窗口大小参数：

multiCapabilities: [{
  'browserName': 'chrome',
  'chromeOptions': {
    args: [
      "--headless",
      "--disable-gpu",
      "--window-size=1920,1080" // 添加这一行，模拟桌面浏览器视口
    ]
  }
}]

这个尺寸能保证页面布局和普通Chrome一致，避免因视口问题导致元素无法被定位。

3. 替换不可靠的browser.sleep为显式等待 #

browser.sleep(2000)是硬编码的等待时间，非常不可靠——有时候页面加载慢了，2秒不够；有时候加载快了，又白白浪费时间。而且无头模式下页面加载速度和普通Chrome可能不一样，这就导致元素还没出现就去点击，自然找不到。

改用Protractor提供的显式等待，等待元素可点击后再操作：

import {browser, element, by, ExpectedConditions as EC} from 'protractor';

describe('Open the link', () => {
  beforeEach(() => {
    browser.waitForAngularEnabled(false);
    browser.get('url');
    // 等待目标元素出现，超时时间设为5秒
    browser.wait(EC.presenceOf(element(by.id('more'))), 5000);
  });

  it('Click on more button', () => {
    const moreButton = element(by.id('more'));
    // 等待元素可点击后再执行点击操作
    browser.wait(EC.elementToBeClickable(moreButton), 5000);
    moreButton.click();
  })
})

显式等待会根据元素的实际状态动态调整等待时间，比固定sleep灵活得多。

4. 添加必要的无头Chrome参数（可选） #

如果上面的步骤还是不行，可以尝试添加以下参数，解决一些环境相关的问题：

• --no-sandbox：在Linux环境下运行无头Chrome经常需要这个参数，避免沙箱权限问题
• --disable-dev-shm-usage：解决/dev/shm分区不足的问题，防止Chrome崩溃

修改后的配置：

multiCapabilities: [{
  'browserName': 'chrome',
  'chromeOptions': {
    args: [
      "--headless",
      "--disable-gpu",
      "--window-size=1920,1080",
      "--no-sandbox",
      "--disable-dev-shm-usage"
    ]
  }
}]

按照这几个步骤来，应该就能解决无头模式下找不到元素的问题了。

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