[SOLVED] How to handle the wait for a event when clicked on a button which initiate an ajax call for playwright-Java

How to handle the wait for a event when clicked on a button which initiate an ajax call for playwright-Java

I am working on default nop Commerce 4.50 automation for my work. I am mainly facing problem when trying to add 2 products to compare list one after another. There is a loading icon when pressing the add to compare button. I have tried Playwright

page.waitForLoadState(LoadState.DOMCONTENTLOADED); method before and after the clicks but it does not add any product to the compare list. Here is the element's code I am trying to handle HTML of add to compare button

I have tried this in Playwright Java

public void clickOnFirstProductAddToCompareButton() {
        page.waitForLoadState(LoadState.DOMCONTENTLOADED);
        page.click(firstProductHomepageAddToCompare);
        page.waitForLoadState(LoadState.DOMCONTENTLOADED);
    }

    public void clickOnSecondProductAddToCompareButton() {
        page.waitForLoadState(LoadState.DOMCONTENTLOADED);
        page.click(secondProductHomepageAddToCompare);
        page.waitForLoadState(LoadState.DOMCONTENTLOADED);
    }

When the program runs it does not the product in compare list. But if I use breakpoint and debug the code it adds the product to the compare list. please any Playwright expert help me.

Solution

Thanks to @itronic1990 this problem was solved. Mainly using Playwright's page.waitForSelector(selector);

method you can capture the notification that declares the successful addition of the product to the compare which initiated the Ajax call. Waiting for the selector of the notification has enough waiting time to get the Assertion.