[💡 Feature]: Modification of outbound network request props about webdriverio

[christian-bromann]

@MubarakGj thanks for raising the issue.

I have to verify if this may already work in v9 our upcoming major release. I will get back to you on that.

[thecotne]

webdriverio/examples/devtools/intercept.js

Lines 17 to 31 in 247b729

	// switch to Puppeteer
	const puppeteerBrowser = await browser.getPuppeteer()
	const page = (await puppeteerBrowser.pages())[0]
	await page.setRequestInterception(true)
	page.on('request', interceptedRequest => {
	if (interceptedRequest.url().endsWith('webdriverio.png')) {
	return interceptedRequest.continue({
	url: 'https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png'
	})
	}
	interceptedRequest.continue()
	})

[wdio-bot]

Thanks for reporting!

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!

[christian-bromann]

In v9 this is currently not possible but can be implemented right here. What type of user interface would you like to see? How would you like to modify request data?

[MubarakGj]

if we have a method somthing like, browser.intercept(params...) to modify the requests sent to a specific destination, calling the method should modify all the requests sent to the URL after this point.
for simple modifications . ex: if we want to modify an header and add one extra header to the request then,

 browser.intercept("URL to intercept", {
    headers:{
  'header1':'value1', // modifies the value, if header already exists in request else adds the header
  'header2':'value2' 
  }
});

this can directly add those headers to all the intercepted requests or modify them if they already exist.
for complex modifications, if we have sth like the below would be helpful:

 browser.intercept("url to intercept", (req)=>{
    req.headers = {'header1':'value1'} //replacing the whole header section
    req.body['productId'] = '23456';
})

We can do even more things if we can intercept all the requests going out of the browser by giving a generic target URL value. something like "**/*" or "".
Also If we can have a way to set these interceptions at the browser session level (setting the interception once for all pages), we can avoid setting these on each page we navigate. This will help us to add the interception at the beginning of the script and we can intercept all requests till the execution is completed.

[christian-bromann]

@MubarakGj this will be possible in v9, please follow #13055 for details!