WebdriverIO - How to add custom headers to all requests

Question

I need to add custom headers to all requests in order to access the web app which is normally hidden behind corporate proxy and vpn and be able to run E2E tests. As an automation tool we user WebdriverIO. So far I tried to set up custom header in wdio.conf.js file following official wdio documentation (https://webdriver.io/docs/options/) and added headers option inside capabilities in my config file. Unfortunately, this is not working and I still can't connect to our web app. Has anyone tried to add custom headers in wdio.config.js file and run E2E tests? Contents of my wdio.config.js file are following:

        exports.config = {
      runner: 'local',
    
      specs: [
        './src/specs/**/login.spec.ts',
      ],
      // Patterns to exclude.
      exclude: [
        // 'path/to/excluded/files'
      ],
    
      maxInstances: 10,
    
      capabilities: [
        {
          maxInstances: 5,
          browserName: 'chrome',
          acceptInsecureCerts: true,
    
          headers: {
            'REQUIRED-HEADER-KEY': 'HEADER-VALUE'
          },
    
          'goog:chromeOptions': {
            'excludeSwitches': [
              'enable-automation'
            ],
            prefs: {
              'profile.managed_default_content_settings.notifications': 1, 
              'plugins.always_open_pdf_externally': true, 
              'download': {
                'prompt_for_download': false, 
                'default_directory': process.cwd() + '/tmp'
              }
            },
            args: [
              '--disable-gpu',
              '--window-size=1920,1080',
              '--no-sandbox',
              '--disable-dev-shm-usage',
              '--start-maximized',
            ],
          },
        },
      ],
}

Answer 1

There's no way doing this at this time, see webdriverio/issues/6361

But you can do it with modheader_selenium:

npm install chrome-modheader

const chromeModheader = require('chrome-modheader');
exports.config = {
...
    capabilities: [{
        browserName: 'chrome',
        "goog:chromeOptions": {
            extensions: [chromeModheader.getExtension()],
        }
    }],
...
    before: function (capabilities, specs) {
        browser.url(chromeModheader.getAddHeaderUrl('YOUR_HEADER', 'YOUR_HEADER_VALUE'));
    },
...
}

Answer 2

Can you please see what could be wrong? Thanks

const { config } = require('../wdio.conf');
const chromeModheader = require('chrome-modheader');
config.capabilities = [{
maxInstances: 1,
browserName: 'chrome',
'goog:chromeOptions': {
extensions: [chromeModheader.getExtension()],
enter code here
'excludeSwitches': [
  'enable-automation',
  '--disable-infobars',
  '--disable-blink-features=AutomationControlled',
  '--disable-dev-shm-usage',
  '--no-sandbox',
],

before: function (capabilities, specs) {
  browser.url(chromeModheader.getAddHeaderUrl('X-Captcha-Override', 'disable'));
},
}
}];
exports.config = config;

Request failed with status 500 due to session not created: Could not start a new session. Error while creating session with the driver service. Stopping driver service: Could not start a new session. Response code 500. Message: session not created: cannot process extension #1 [0-0] from unknown error: cannot base64 decode [0-0] Build info: version: '4.4.0', revision: 'e5c75ed026a'