Tuesday 6 June 2023

Playwright: Locate the elements by test id

‘data-testid’ attribute is used to identify a DOM node for testing purposes. 'page.getByTestId()' method Locate element by the test id. By default, the 'data-testid' attribute is used as a test id.

 

Signature

Locator getByTestId(String testId)

Example

String textContent = page.getByTestId("banner").textContent();

Find the below working application.

 

dataTestId.html

<html>

<head>
	<title>Data test id demo</title>
</head>

<body>
	<h1 role="banner" id="myBanner" class="headerSection" data-testid="banner">Hello world</h1>
</body>

</html>

FileUtil.java

package com.sample.app.util;

import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;

public class FileUtil {

	public static String resourceAsString(String resourceName) throws IOException {
		ClassLoader classLoader = FileUtil.class.getClassLoader();
		URL url = classLoader.getResource(resourceName);
		if (url == null) {
			return null;
		}

		URLConnection urlConnection = url.openConnection();

		urlConnection.setUseCaches(false);

		try (InputStreamReader inputStreamReader = new InputStreamReader(urlConnection.getInputStream())) {
			char[] buffer = new char[1048];
			StringBuilder builder = new StringBuilder();

			int count = -1;
			while ((count = inputStreamReader.read(buffer, 0, buffer.length)) != -1) {
				builder.append(buffer, 0, count);
			}

			return builder.toString();
		}

	}
}

GetLocatorByDataTestId.java

package com.sample.app.locators;

import java.io.File;
import java.io.IOException;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.sample.app.util.FileUtil;

public class GetLocatorByDataTestId {

	public static void main(String[] args) throws IOException {
		try (Playwright playwright = Playwright.create()) {
			Browser browser = playwright.chromium()
					.launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(100));
			final String content = FileUtil.resourceAsString("locators" + File.separator + "dataTestId.html");

			Page page = browser.newPage();
			page.setContent(content);

			String textContent = page.getByTestId("banner").textContent();
			System.out.println("Banner : " + textContent);
		}
	}

}

Output

Banner : Hello world

We can customize the test id attribute using Selectors.setTestIdAttribute().

 

 

Find the below working application.

 

customizeTestId.html

<html>

<head>
	<title>Data test id demo</title>
</head>

<body>
	<h1 role="banner" id="myBanner" class="headerSection" my-data-testid="banner">Hello world</h1>
</body>

</html>

CustomizeTestIdAttribute.java

package com.sample.app.locators;

import java.io.File;
import java.io.IOException;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.sample.app.util.FileUtil;

public class CustomizeTestIdAttribute {

	public static void main(String[] args) throws IOException {
		try (Playwright playwright = Playwright.create()) {
			
			playwright.selectors().setTestIdAttribute("my-data-testid");
			
			Browser browser = playwright.chromium()
					.launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(100));
			final String content = FileUtil.resourceAsString("locators" + File.separator + "customizeTestId.html");

			Page page = browser.newPage();
			page.setContent(content);

			String textContent = page.getByTestId("banner").textContent();
			System.out.println("Banner : " + textContent);
		}
	}

}

Output

Banner : Hello world





Previous                                                 Next                                                 Home

No comments:

Post a Comment