puppeteer: Request interception POST data overrides not working as expected

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.1.0
• Platform / OS version: any
• Node.js version: 8.9.3

What steps will reproduce the problem? When browsing to this page , and picking a country in the first select box, an XHR request is triggered. This XHR is a POST request, and can be intercepted. But when trying to overrides the payload data, it apparently fails to do so.

Here is the code:

(async function run() {
    
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setRequestInterception(true);


    page.on('request', (request) => {

        if(/partnerfinder\/v1\/marketingprofiles/.test(request.url()) && request.postData() !== undefined) {

            console.log(" [reqHandler] Got request for: " + request.url());

            let payload = {
                RankingContext: "Microsoft",
                Keyword:"*",
                Size:20,
                Offset:20,
                IndustryFocus:"",
                Product:null,
                ServiceType:null,
                GeoRadius:null,
                Latitude:null,
                Longitude:null,
                CustomFilters:{},
                PartnerTags:null,
                TargetCustomerCompanySizes:null,
                SeatCount:0,
                CountryCode:"FR",
                CompetencyLevels:[0,1,2],
                ProductEndorsements:null,
                ServiceTypeEndorsements:null
            };

            request.continue({
                postData: JSON.stringify(payload),
            });
        }
        else {
            request.continue();
        }
    });


    page.on('response', (response) => {

        if(/partnerfinder\/v1\/marketingprofiles/.test(response.url()) && response.request().postData() !== undefined) {

            console.log(" [responseHandler] Got response for: " + response.url());
            
            let request = response.request();
            let payload = JSON.parse(request.postData());

            console.log(" [responseHandler] Request payload: " + JSON.stringify(payload, null, 2) );
        }
    });

    await page.goto('https://www.microsoft.com/fr-fr/solution-providers/search');

    await page.waitForXPath("//select[@id='search-organization-size-id']");
    await page.waitFor(2000);
    

    // Select country
    await page.evaluate(() => {

        const getElementByXPath = (expression, scope) => {
            scope = scope || document;
            let a = document.evaluate(expression, scope, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
            if (a.snapshotLength > 0) {
                return a.snapshotItem(0);
            }
        };
        
        const selectOption = (selectXPath, value) => {

            let optionXPath = selectXPath+"/option[@value='"+ value +"' or .='"+ value +"']";
    
            // Get specified select option element
            let optionElem = getElementByXPath(optionXPath);
            optionElem.selected = true; // Change specified select option to selected
    
            // Create 'change' html event
            let eventObject_change = document.createEvent('HTMLEvents');
            eventObject_change.initEvent('change', true, true, window, 1);
    
            // Create 'click' mouse event
            let eventObject_click = document.createEvent('MouseEvents');
            eventObject_click.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            
            // Get specified select elemeent and fire two events on it: change + mouse click
            let selectElem = getElementByXPath(selectXPath);
            selectElem.dispatchEvent(eventObject_change);
            selectElem.dispatchEvent(eventObject_click);
        };

        selectOption("//select[@id='country']", "France");

    });

    await page.waitFor(2000);
    await browser.close();

})();

What is the expected result? We should see the request new payload displayed, as follows:

[responseHandler] Request payload:

{
                "RankingContext": "Microsoft",
                "Keyword":"*",
                "Size":20,
                "Offset":20,
                "IndustryFocus":"",
                "Product":null,
                "ServiceType":null,
                "GeoRadius":null,
                "Latitude":null,
                "Longitude":null,
                "CustomFilters":{},
                "PartnerTags":null,
                "TargetCustomerCompanySizes":null,
                "SeatCount":0,
                "CountryCode":"FR",
                "CompetencyLevels":[0,1,2],
                "ProductEndorsements":null,
                "ServiceTypeEndorsements":null
}

What happens instead?

But instead, it is displayed as unchanged, as if never overrided:

[responseHandler] Request payload:

{
  "keyword": "",
  "product": [],
  "serviceType": [],
  "industryFocus": "",
  "partnerTags": [],
  "seatCount": "null",
  "countryCode": "FR",
  "longitude": null,
  "latitude": null,
  "geoRadius": null,
  "customFilters": {},
  "productEndorsements": [],
  "serviceTypeEndorsements": [],
  "competencyLevels": [
    0,
    1,
    2
  ],
  "rankingContext": "Microsoft",
  "targetCustomerCompanySizes": [
    null
  ],
  "size": 20
}