Playwright waitForResponse how to wait till the response has text "completed"

Question

I Have a scenario where the API receives multiple responses(one at a time) and renders on the UI. API keeps on polling the DB till it is done with receiving all the responses. I need my script to wait till the API response becomes "completed". I tried below code but it is not waiting till the status is completed.

const response = await page.waitForResponse(response => response.url().includes('https://services/url') && response.status() === 200);

console.log('RESPONSE ' + (await response.body()));

Below is the logged response

{
  "transactionDetail": {
    "transactionID":"866f357f-7541-4ff2-b879-61ca284513a7",
    "transactionTimestamp":"2021-08-02T10:48:50.372207",
    "inLanguage":"en-US",
    "serviceVersion":"1"
  },
  "resultSummary":{
    "inputCount":1,
    "successCount":1,
    "failureCount":0},
    "inquiryDetail": {
      "kaseIterationId":"8a7b11547af8835d017b067ad06e04ba"
    },
  },
  "response":"InProgress"
}

How can i make my script wait till the "response" becomes "Completed" instead of "Inprogress".

Answer 1

You can do this by supplying an async predicate to page.waitForResponse like this:

async function isFinished(response) {
    return response.url().includes('https://services/url') && response.status() === 200 && (await response.json()).response === 'Completed'
}

const response = await page.waitForResponse(async (response) => await isFinished(response));