Comma Selectors in Playwright

 

In Playwright Java, comma selectors refer to compound selectors that use commas , to combine multiple selectors, allowing you to target multiple elements at once — similar to how they work in CSS.

How Comma Selectors Work in Playwright

(1) Multiple Elements in One Locator

• Instead of writing separate locators for each element type, you can combine them using commas.
• This is useful when the elements share similar behavior but have different identifiers.

(2) Playwright Behavior

• Playwright evaluates each selector in the group, then merges the results into a single collection of matched elements.
• You can then perform actions (click, count, assert visibility, etc.) on those matched elements.

(3) Scenarios Where Useful

• Different button styles: If "Submit" might be a <button> in one place but an <input> in another, you can write one combined selector.
• Dynamic UIs: When the element can appear in multiple formats depending on conditions (e.g., mobile vs desktop view).
• Bulk operations: Selecting multiple types of similar items (like all headings h1, h2, h3).

Key Points to Remember

• Comma selectors follow CSS selector rules since Playwright supports CSS selectors.

• They help reduce duplication in locators.

• But be careful: too many comma selectors can make locators harder to maintain, so use them when elements are truly interchangeable.

What Are Comma Selectors?

A comma selector allows you to select multiple elements that match any of the selectors separated by a comma.

Syntax:

Locator locator = page.locator("selector1, selector2, selector3");

Website to be automated: https://www.google.com/

Java Playwright Code:

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CommaSelectorsExample {
	
	public static void main(String[] args) {
		
	// this code will click Gmail or if instead of Gmail GoogleMail is present like or condition
	Playwright playwright = Playwright.create();
	Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
	Page p1 = browser.newPage();
	p1.navigate("https://www.google.co.in");
	p1.locator("a:has-text('Gmail'),a:has-text('GoogleMail') ").click();
	
	//For two links comma seperated selector code is there
	Page p2 = browser.newPage();
	p2.navigate("https://www.google.co.in");
	Locator lc = p2.locator("a:has-text('Gmail'),a:has-text('Images') ");
	System.out.println(lc.count());
	
	//click on Gmail by using xpath
	Page p3 = browser.newPage();
	p2.navigate("https://www.google.co.in");
	Locator gmailLocator = p2.locator("//a[text()='Gmail'] | //a[text()='GooleMail'] ");
	System.out.println(gmailLocator.textContent());
	gmailLocator.click();
	
	browser.close();
	playwright.close();

}
}

Code explanation:

(a) Navigate to the website by page.navigate()

(b) Locator will locate web element either by first or second locator separated by comma or by both, if both are able to find web element.

(c) In next steps also, we are finding web elements by appropriate locator, printing the count and text of the locators.

Important Points:

• Comma selectors are useful when you want to interact with multiple possible matching elements.

• Playwright executes them like CSS, meaning it selects all matching elements.

• You can still filter using nth(), first(), or last().

Suggested Posts:

1. Handle IFrames in Playwright
2. Automate Login Page in Playwright
3. Comma Selectors in Playwright
4. Handle Alerts in Playwright
5. Handle Dynamic Webtable in Playwright