Playwright Java waits examples

Below code, explains a list of waits that you could apply

package com.sam.scripts;

import com.microsoft.playwright.*;
import com.microsoft.playwright.options.AriaRole;
import com.microsoft.playwright.options.LoadState;
import com.microsoft.playwright.options.RecordVideoSize;
import com.microsoft.playwright.options.WaitForSelectorState;
import org.testng.annotations.Test;

import java.nio.file.Paths;


public class PlayWrightTimeOuts {

    @Test(description = "A dummy code to test waits")
    public void waitTest() {
        Playwright playwright = Playwright.create();
        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        BrowserContext context = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("videos/")).setRecordVideoSize(new RecordVideoSize(1280, 720)));
        Page page = context.newPage();
        // Set default timeout to 30 seconds (30000 milliseconds)
        page.setDefaultTimeout(30000);

// Navigate to the URL and wait for the navigation to complete
        page.navigate("https://ecommerce-playground.lambdatest.io/index.php?route=common/home");

        /*
        Waits for the page to fully load before proceeding with subsequent actions.
        This includes waiting for all resources (images, scripts, stylesheets, etc.)
        to be completely downloaded and rendered on the page.
         */
        page.waitForLoadState(LoadState.LOAD);
        /*
        Waits until all network activity has ceased before proceeding.
        This means that the page has finished loading all resources and there are no ongoing network requests.
         */
        page.waitForLoadState(LoadState.NETWORKIDLE);
        
        Locator myAccount = page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("My account"));
        myAccount.click();
        page.getByPlaceholder("E-Mail Address").fill("koushik350@gmail.com");

        /*
        In Playwright, Locators serve as instructions or blueprints for identifying and interacting with elements on a webpage,
        but they do not perform any actions or searches until you explicitly invoke an interaction with them
         */
        Locator passwordField = page.getByPlaceholder("Password");


        // Wait for the element to be VISIBLE (rendered and visible),
        // if element not found , timeout error  with the that set for the locator explicitly TimeoutError: Timeout 60000ms exceeded.
        passwordField.waitFor(new Locator.WaitForOptions().setState(WaitForSelectorState.ATTACHED).setTimeout(60000));

        passwordField.waitFor(new Locator.WaitForOptions().setState(WaitForSelectorState.VISIBLE).setTimeout(60000));
        passwordField.click();
        // Ensure the element is enabled (editable)
        if (passwordField.isEditable()) {
            passwordField.fill("Pass123$");
        } else {
            System.out.println("The filed is not ediable");
        }
        // Check URL ends with expected value.
        String currentUrl = page.url();
        if (currentUrl.endsWith("index.php?route=account/login")) {
            System.out.println("URL ends with index.php?route=account/login");
        } else {
            System.out.println("URL does not end with index.php?route=account/login");
        }

        page.close();
        context.close();
        browser.close();
        playwright.close();

    }
}
/*
ATTACHED Element is present in the DOM. It might be hidden or not yet fully rendered.
DETACHED Element is removed from the DOM.
VISIBLE Element is not only present in the DOM but also visible to the user (i.e., it has non-zero size, is not hidden by CSS, etc.).
HIDDEN Element is present in the DOM but not visible to the user.

In Playwright, calling .setState multiple times within the same WaitForOptions object overwrites the previous state.
 So if you do:

Only the VISIBLE state is retained.

passwordField.waitFor(new Locator.WaitForOptions()
    .setState(WaitForSelectorState.ATTACHED)  // This is overwritten
    .setState(WaitForSelectorState.VISIBLE)   // Only this is considered
    .setTimeout(60000)
);

 */

Implicit wait

In Playwright, page.waitForLoadState(LoadState.LOAD);
is similar to implicit waits in Selenium. Both mechanisms wait for a certain condition to be met before proceeding with subsequent actions.

Explicit wait

Conversely,

passwordField.waitFor(new Locator.WaitForOptions().setState(WaitForSelectorState.ATTACHED).setTimeout(60000));, is indeed similar to an explicit wait in Selenium.

Purpose: Both are used to wait for a specific condition to be met before proceeding with subsequent actions, ensuring that elements are ready for interaction.
Explicitness: Both methods are explicitly defined within the test code, providing precise control over the waiting conditions.
Customizability: Both allow you to customize the waiting criteria, such as the element selector, timeout duration, and expected state.