使用无头 chrome 显示页面的空白部分答案

【问题标题】：Using headless chrome displays empty part of the page使用无头 chrome 显示页面的空白部分
【发布时间】：2019-05-19 10:22:21
【问题描述】：

在量角器脚本中使用 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"
 },
};

【问题讨论】：

标签： angularjs selenium protractor selenium-chromedriver

【解决方案1】：

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

只需添加到您的 conf：

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

【讨论】：

【解决方案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

【讨论】：