How to add custom selector engines?

[InfoSec812]

In the Playwright docs there are docs about setting up custom JavaScript selectors and I would like to be able to match on things like ref, name, aria-label. How can I do this with the @InjectPlaywright and @WithPlaywright as part of Quarkus?

[melloware]

can you post a link to the docs you are referring to?

[InfoSec812]

https://playwright.dev/java/docs/api/class-selectors

[melloware]

Got it. So I think you are asking you want to configure this on the @WithPlaywright( selectors={...}) is the idea?

[melloware]

One thing you can do right now...

@InjectPlaywright
Playwright playwright;

@BeforeAll
public void beforeAll() {
   // Script that evaluates to a selector engine instance. The script is evaluated in the page context.
String createTagNameEngine = "{\n" +
  "  // Returns the first element matching given selector in the root's subtree.\n" +
  "  query(root, selector) {\n" +
  "    return root.querySelector(selector);\n" +
  "  },\n" +
  "  // Returns all elements matching given selector in the root's subtree.\n" +
  "  queryAll(root, selector) {\n" +
  "    return Array.from(root.querySelectorAll(selector));\n" +
  "  }\n" +
  "}";
// Register the engine. Selectors will be prefixed with "tag=".
playwright.selectors().register("tag", createTagNameEngine);
}

[melloware]

just submitted a PR allowing this...

package org.acme;

import java.net.URL;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;

import io.quarkiverse.playwright.InjectPlaywright;
import io.quarkiverse.playwright.PlaywrightSelector;
import io.quarkiverse.playwright.WithPlaywright;
import io.quarkus.test.common.http.TestHTTPResource;
import io.quarkus.test.junit.QuarkusTest;

@QuarkusTest
@WithPlaywright(selectors = {
        @PlaywrightSelector(name = "tag", script = "{\n" +
                "  // Returns the first element matching given selector in the root's subtree.\n" +
                "  query(root, selector) {\n" +
                "    return root.querySelector(selector);\n" +
                "  },\n" +
                "  // Returns all elements matching given selector in the root's subtree.\n" +
                "  queryAll(root, selector) {\n" +
                "    return Array.from(root.querySelectorAll(selector));\n" +
                "  }\n" +
                "}")
})
public class WithSelectorsPlaywrightTest {

    @InjectPlaywright
    BrowserContext context;

    @TestHTTPResource("/")
    URL index;

    @Test
    public void testIndex() {
        final Page page = context.newPage();
        page.setContent("<div><button>Click me</button></div>");
        // Use the selector prefixed with its name.
        Locator button = page.locator("tag=button");
        // Combine it with built-in locators.
        page.locator("tag=div").getByText("Click me").click();
        // Can use it in any methods supporting selectors.
        int buttonCount = (int) page.locator("tag=button").count();
        Assertions.assertEquals(1, buttonCount);
    }

}

[melloware]

@all-contributors add @InfoSec812 for idea

[allcontributors]

@melloware

I've put up a pull request to add @InfoSec812! 🎉