Wait for Element to Disappear in Playwright Java

In the world of web automation, waiting for specific elements to appear or disappear is a common scenario. One essential requirement is to wait for an element to disappear before proceeding with further actions. In this article, we will explore effective techniques to wait for an element to disappear in Playwright Java.

We will use the below-highlighted elements. These elements are present on our playground website – https://testkru.com/Interactions/DisappearingElements.

Three highlighted elements will vanish at different intervals. The first one will disappear in 5 seconds, the second in 10 seconds, and the third in 15 seconds.

Now, we will look at various ways we can use to wait for elements to disappear in Playwright

• Using waitForSelector() method
• Using a custom polling approach

Let’s look at them one by one

Using waitForSelector() method

The Page interface provides us with a waitForSelector() method, which accepts two arguments –

• A selector string
• and the state

waitForSelector() method waits for the selector string to satisfy the state passed in the second argument.

There are four types of states we can use in the waitForSelector() method –

• ATTACHED
• DETACHED
• VISIBLE
• HIDDEN

In this situation, we need the element to disappear, which is why we will utilize the HIDDEN state.

Below is the syntax for using the waitForSelector() method –

page.waitForSelector("selector_string", new Page.WaitForSelectorOptions().setState(WaitForSelectorState.HIDDEN));

The below-highlighted element will disappear after 10 seconds. We will be using it in our example to demonstrate the waiting functionality.

By inspecting the element, we can reveal its DOM and identify that its id is “disappearing10sec“. We can utilize it to locate the element using the locator() method provided by Playwright.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.microsoft.playwright.options.WaitForSelectorState;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();

		// Launching the browser
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext
		BrowserContext browserContext = browser.newContext();

		// creating the page
		Page page = browserContext.newPage();

		// Navigating to the URL
		page.navigate("https://testkru.com/Interactions/DisappearingElements");

		System.out.println("Waiting for element to disappear...");
		
		//disappearing10sec
		page.waitForSelector("#disappearing10sec", new Page.WaitForSelectorOptions().setState(WaitForSelectorState.HIDDEN));

		System.out.println("Element disappeared");
		
		// closing the instances
		browser.close();
		playwright.close();

	}

}

Output –

Waiting for element to disappear...
Element disappeared

This is how we can use the waitForSelector() method to wait for an element to disappear.

Note: waitForSelector() waits for a maximum of 30 seconds to wait for an element to disappear. If the element doesn’t disappear within that time frame, a TimeoutError exception will be thrown.

Exception in thread "main" com.microsoft.playwright.TimeoutError: Error {
  message='Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for locator("#textFieldElements") to be hidden

Using a custom polling approach

If you want more control over the waiting process, then you can also implement a custom polling approach using page.waitForTimeout() and page.isVisible() methods.

		int maxAttempts = 30; // Maximum number of polling attempts
		int interval = 500; // Interval between each polling attempt in milliseconds

		boolean isElementDisappeared = false;

		for (int attempt = 0; attempt < maxAttempts; attempt++) {
			if (!page.isVisible("#disappearing10sec")) {
				isElementDisappeared = true;
			}
			page.waitForTimeout(interval);
		}

So, what’s happening in the code above?

1. We have set up the polling interval at 500 milliseconds with a maximum of 30 attempts.
2. We are using page.isVisible() to check whether the element is visible on the web page or not.
3. page.waitForTimeout() is used to wait for a specific interval. As we have defined the interval to be 500 milliseconds, our code will wait for 500 ms before moving forward.
4. We will continue to perform Step 2 and Step 3 until we have reached the maximum number of attempts or until the page.isVisible() method returns false.
5. If the element is not visible on the webpage, we will set the isElementDisappeared value to true.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();

		// Launching the browser
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext
		BrowserContext browserContext = browser.newContext();

		// creating the page
		Page page = browserContext.newPage();

		// Navigating to the URL
		page.navigate("https://testkru.com/Interactions/DisappearingElements");

		System.out.println("Waiting for element to disappear...");

		int maxAttempts = 30; // Maximum number of polling attempts
		int interval = 500; // Interval between each polling attempt in milliseconds

		boolean isElementDisappeared = false;

		for (int attempt = 0; attempt < maxAttempts; attempt++) {
			if (!page.isVisible("#disappearing10sec")) {
				isElementDisappeared = true;
			}
			page.waitForTimeout(interval);
		}

		if (isElementDisappeared) {
			System.out.println("Element disappeared");
		}

		// closing the instances
		browser.close();
		playwright.close();

	}

}

Output –

Waiting for element to disappear...
Element disappeared

We hope that you have liked the article. If you have any doubts or concerns, please feel free to write us in the comments or mail us at admin@codekru.com.