DevTools causes page load failures and pending network requests that never resolve.

My organization is experiencing an issue similar to #6993 The difference between that report and this one is that just the mere existence of devTools options in the config > services heading causes urls to fail loading with hanging / pending network requests.

No specific devtools command is being called in this example provided for the bug report. My organization uses devtools for performance testing which is why it exists in the config.

package.json

  "dependencies": {
    "@wdio/cli": "^7.9.0"
  },
  "devDependencies": {
    "@wdio/local-runner": "^7.9.0",
    "@wdio/mocha-framework": "^7.9.0",
    "@wdio/selenium-standalone-service": "^7.8.0",
    "@wdio/devtools-service": "^7.9.0",
    "@wdio/spec-reporter": "^7.9.0",
    "@wdio/sync": "^7.9.0"
  }
}

wdio.conf.js

exports.config = {
    
    specs: [
        './test/specs/**/*.js'
    ],
 
    maxInstances: 1,
    
    capabilities: [{
    
        maxInstances: 1,
    
        browserName: 'chrome',
        acceptInsecureCerts: true
    }],
    
    logLevel: 'trace',
    
    bail: 0,
    
    baseUrl: 'https://downtown-qa.photoshelter.com',
    
    waitforTimeout: 10000,
    
    connectionRetryTimeout: 120000,
    
    connectionRetryCount: 3,
    
    services: ['selenium-standalone', 'devtools'],
    
    framework: 'mocha',
    
    reporters: ['spec'],
    
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    },

}

Spec to replicate

describe('Page loading failure example', function() {
  
    it('Go to pages and see if they show a endless loading spinner in tab and waiting for xxxx', function() {
        browser.url('/contact')
        browser.url('/about')
        browser.url('/archive')
        browser.url('/search')
    });
});

Expected Result.

Should navigate to example urls and test should pass.

Actual Result.

Test fails to pass. When navigating to urls that page fails to completely load due to hanging / pending requests. 9 times out of 10 a third party script displays as "Pending" in the chrome network panel. In the example below a twitter script in a iframe fails to load and the page just hands. This is not isolated to just twitter script either we're seeing render / pending request for google analytics, Facebook, Visual Website Optimizer among many more. Occasionally we see a request hand within our own domain but a majority(99%) is third party.

If you remove "devtools" from the wdio.conf.js and run the test again it passes without any failed/pending requests.

We realize this is running using wdio/sync. We are heavily invested in sync tests will be transitioning to async going forward with the sunset pending. In the meantime sync it is.

This is a trace log gist of the same test where instead of twitter it seems to have hung on visualwebsiteoptimizer request. . https://gist.github.com/tobeliketree/9c7d6ef9fd5558982fc5ee895e5e21dd#6702