async await - Hur man väntar på flera svar i Playwright [typescript]

Vi har en metod i Playwright för att vänta på ett svar.

page.waitForResponse

Men jag behöver vänta på flera svar med hjälp av waitForResponse. Hur kan vi uppnå detta?

Jag har försökt loopa metoden waitForResponse, men det fungerar inte.

Uppdatering: Koden jag provade:

 async click(locator: string, waitForResponse){
 // waitForResponse = [{url: 'url1'},{url: 'url3'},{url: 'url2'}];
    const [response] = await Promise.all([
            waitForResponse ? this._waitForResponse(waitForResponse) : Promise.resolve(true),
            await this.page.locator(locator).first().click()
          ]);
    }
// Calling function
 await click(`xpath`, [{url: 'url1'},{url: 'url3'},{url: 'url2'}]);

waitForResponse-metod: WaitForResponse är en typ här.

public async _waitForResponse(args: WaitForResponse | Array<WaitForResponse>): Promise<any> {
if (Array.isArray(args)) {
  const resposneArray = [];
  for (const aa in args) {
    resposneArray.push(await this._callWaitForResponse(args[aa]));
  }
  return resposneArray;
} else {
  return this._callWaitForResponse(args);
}

}

faktisk waitForResponse-metod:

private async _callWaitForResponse(args: WaitForResponse): Promise<any> {
const { requestUrl } = args;
return this.page.waitForResponse((response) =>
  requestUrl.every((url: string) => response.url().includes(url))
);

}

Svar #1

Något liknande detta borde fungera (vänligen betrakta det som pseudokod dock, jag har inte haft tid att testa det):

async clickAndWaitForResponses(locator: string, urlsToWaitFor: string[]) {
    const allResponsesPromise = Promise.all(urlsToWaitFor.map(url => page.waitForResponse(url)));
    await this.page.locator(locator).first().click();
    const responses = await allResponsesPromise;
}

// Calling function
await clickAndWaitForResponses(`xpath`, ['url1', url3', 'url2']);

Svar #2

Tänk på att JavaScript är async innan du använder några loopar.

Hur man använder async-await med loopar?

Generellt kan du vänta på flera svar med en praktisk custom-funktion ungefär som nedan med Promise.all:

async waitForResponseCustom(resName) {
    return await this.page.waitForResponse(async (response) => {
        const body = await response.text();
        return body.includes(resName)
    });
}
    const responses = await Promise.all([
        this.waitForResponseCustom("API 1"),
        this.waitForResponseCustom("API 2")
      
    ])

Relaterade artiklar