[Question] Adding an if condition to Promise.all

I am trying to do the following: When I am on the cart page and click the CHECKOUT button, then there are 2 things that can happen: I am redirected to the checkout page I am asked sometimes to log in again => this is a bug in the app since I am already logged in but it asks me to log in again for some reason. I need to write a Playwright test for the checkout process. And in this test, I need to support that buggy behavior since there is no indication it will be resolved any time soon (or whatsoever).

This is what I got so far:

async clickCheckoutBtn() {
    if (this.#isGuest) {
      // redirects to the login page, so we don't have waitForURL like when we are logged in
      await this.#checkoutBtn.click();
    } else {
      // TODO add here somehow to login again if required after clicking the checkout button
      await Promise.all([
        this.page.waitForResponse(
          (response) =>
            response.url().includes('/my-account/addressform') &&
            response.status() === ResponseCode.SUCCESS
        ),
        
        this.#checkoutBtn.click(),
        this.page.waitForURL(/.*\/delivery-address\/add$/),
      ]);
    }
  }

Now, this is what I would like to do:

    await page.getByRole('button').click();
    if(await page.getByPlaceholder('login').isVisible()) {
      await loginPage.login(username, password);
    } 
    await page.waitForURL(/.*\/delivery-address\/add$/),  

But in the case when I am redirected to the checkout I also need to waitForResponse to the /my-account/addressform. (so after logging in I need to wait for it, but also after direct redirect to the checkout page, I need to wait for it as well) So I would like to do this somehow inside the Promise.all, but I don’t how to do it. Can you please help?

[mareru]

@aslushnikov Thanks for the help, it was very useful in the end. Sorry, sometimes I cannot distinguish what should go where - is it Typescript I am wrestling with or Playwright, or just my stupidity? Thanks anyways for the help, I really appreciate it. People like you make a difference 😗

[aslushnikov]

But I don’t know how to say in the catch part to wait for my 2 guys (endpoint and navigation to the URL) since I already clicked on the checkout button before and I fear that waiting for those things in the catch block might be pointless since there is no triggering action with them (which is clicking the checkout button that happened already in the try block).

IIUC you can just extract those promises and use them in both parts of your program:

let promises = [];
try {
    await Promise.all([
      this.page.waitForNavigation({ url: '**/login' }),
      this.#checkoutBtn.click(),
    ]);
    const credentials = await Utils.getCredentials(this.#context);
    await this.#loginPage.email.fill(credentials.username);
    await this.#loginPage.password.fill(credentials.password);

    const promises = [
      this.page.waitForResponse(
        (response) =>
          response.url().includes('/my-account/addressform') &&
          response.status() === ResponseCode.SUCCESS
      ),
      this.page.waitForURL(/.*\/delivery-address\/add$/),
    ];
    await Promise.all([
      ...promises,
      this.#loginPage.loginBtn.click(),
    ]);
  } catch (error) {
    console.log('USER WAS NOT LOGGED OUT');
    await Promise.all(promises);
  }

So this would be my recommendation if I understood you correctly.

However, this is not a Playwright issue - more of a programming challenge. I’d recommend asking this elsewhere - StackOverflow, or maybe even https://aka.ms/playwright/slack. I’ll close this since this doesn’t require attention from the Playwright team specifically.