browser UI components part of documentScreenshot on iOS devices (browserstack)

[ovidubya]

It captures the bar along with the other browser ui components. Here is a list of what the screenshots look like in ios devices: https://www.dropbox.com/sh/pono8nrymhrqgay/AABxQWDqNUqjlrgwkcRRNLTba?dl=0

Test files to reproduce: (requires a browser stack account)

configuration: ios_test_config.js

exports.config = {
  user: process.env.USER,
  key: process.env.KEY,
  commonCapabilities: {
    name: '', 
    build: ''
  },

  specs: [ 
    './screenshot-ios.js'
  ],
  capabilities: require('./ios.js'),
  framework: 'mocha',
  mochaOpts: {
    ui: 'bdd',
    timeout: 999999
  },
  plugins: {
    'wdio-screenshot': {}
  },
  reporters: ['spec'],
  logLevel: 'command',
  coloredLogs: true,
  screenshotPath: './errorShots/',
  baseUrl: '',
  waitforTimeout: 100000,
  connectionRetryTimeout: 90000,
  connectionRetryCount: 3,
  maxInstances: 20
}

// Code to support common capabilities
exports.config.capabilities.forEach(function (caps) {
  for (var i in exports.config.commonCapabilities) caps[i] = caps[i] || exports.config.commonCapabilities[i];
});

capabilities: ios.js

module.exports = [
  {
    os_version: '11.0',
    device: 'iPhone 8',
    real_mobile: 'true'
  },
  {
    os_version: '11.0',
    device: 'iPhone 8 Plus',
    real_mobile: 'true'
  },
  {
    os_version: '10.3',
    device: 'iPhone 7 Plus',
    real_mobile: 'true'
  },
  {
    os_version: '10.3',
    device: 'iPhone 7',
    real_mobile: 'true'
  },
  {
    os_version: '11.0',
    device: 'iPhone X',
    real_mobile: 'true'
  },
  {
    os_version: '11.2',
    device: 'iPhone SE',
    real_mobile: 'true'
  },
  {
    os_version: '11.0',
    device: 'iPad 5th',
    real_mobile: 'true'
  },
  {
    os_version: '11.2',
    device: 'iPad Pro',
    real_mobile: 'true'
  }
];

Test: screenshot-ios.js

describe('Testing webpage with visible scrollbar', function () {
  it('Opens URL', function () {
    browser.url('https://developer.mozilla.org/en-US/docs/tag/Types');
  });
  it('ios screenshot test', function () {
    browser.saveDocumentScreenshot('test.png');
  });
});