使用无头Chrome会显示页面的空白部分

Question

在量角器脚本中使用chromedriver来测试角度页面时，我使用“无头”或“普通”浏览器获得了不同的结果。

实际上，如果我使用“中继器”定位器来显示“空”列表中的项目，则返回有5个项目，但是“无头” chrome驱动程序无法渲染它们。查看屏幕截图。

我正在使用ChromeDriver 2.45，它支持Chrome 70至72版本，我的版本为71。 我的操作系统是Windows 10。 量角器版本5.1.1 Angularjs 1.5版

这是配置文件：

exports.config = {
    directConnect: true,
    rootElement: 'html',
    chromeDriver: 'C:\\srv\\build\\applications\\chromedriver\\chromedriver_win32\\chromedriver.exe',
    getPageTimeout: 60000,
    allScriptsTimeout: 60000,
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    capabilities: {
        'browserName': 'chrome',
            chromeOptions:{
              args:["--headless"]
            }
    },

specs: [ 'features/*.feature' ],
baseUrl: '',
cucumberOpts: {
    tags: '',
    require: [ 'steps/*.spec.js' ],
    monochrome: true,
    strict: true,
    plugin: "json"
 },
};

---

Answer 1

问题似乎在于窗口大小。默认情况下，无头模式不是全屏模式，因此某些元素会自动移动和隐藏（如您尝试手动调整窗口大小时一样）

只需添加到您的conf：

driver.manage().window().maximize();

Answer 2

您可以将args更新为

capabilities: {
    ...,
    chromeOptions: {
        args: ["--headless", "--disable-gpu", "--window-size=800x600"]
    }
}

对于提到的确切配置，我能够毫无问题地实现无头自动化。

引用https://github.com/angular/protractor/blob/master/docs/browser-setup.md#using-headless-chrome