[💡 Feature]: Modification of outbound network request props

[MubarakGj]

Is your feature request related to a problem?

I would like to capture the network calls happening in the background while running the tests and modify the captured request headers and body before the request leaves the browser

Describe the solution you'd like.

If there is browser.intercept() method available which takes a call back function like
browser.intercept(“regex of url to be intercepted”, (request)=>{ // request modification commands});
This could be used to do all the actions that we want before a request is sent.

Describe alternatives you've considered.

we have used cypress to automate single tab use cases. it supports these kind of request interception and modification.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[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.