[Question] Custom Element Implementation

What is the best practice to implement a custom element. For example, we have a combobox that isn’t a normal html select option. There are certain workarounds for how to select an option.

I was thinking about implementing the ElementHandle interface and passing in the page and the locator for the root element. Something like this:

public class CustomComboBox implements ElementHandle {
  private ElementHandle elementHandle;

  public CustomComboBox(Page page, String selector) {
    this.elementHandle = page.querySelector(selector);
  }
}

For all of the methods i would just pass on the method call to the elementHandle. And for the selectOption methods I would implement the custom logic needed to select an option in this custom combobox.

Is there a better way to do this?

[yury-s]

First of all, all interfaces in the API except for callbacks are expected to be implemented only by Playwright. You should consider them as final classes (e.g. one shouldn’t try to implement Page interface). We use interfaces for the API definition primarily for documentation purposes and to hide implementation noise from the clients eyes. Furthermore, Playwright code makes certain assumptions about the actual implementation of the interfaces and if you provide your own class implementing ElementHandle and then try to pass it e.g. as an argument into Page.evaluate it will be serialized as a JSON object rather than as an element handle which is not what you want.

Can you elaborate on why do you need to implement ElementHandle rather than just wrap it into your own CustomComboBox class and delegating some of the calls to the corresponding handle?

public class CustomComboBox {
  private ElementHandle elementHandle;

  public CustomComboBox(Page page, String selector) {
    this.elementHandle = page.querySelector(selector);
  }

  public select(String value) {
    // some logic actually selecting the value
  }
}

If you want to have generic code that works on collections of element handles and custom elements it might be easier to have your own hierarchy that either delegates directly to the wrapped handle or does some tricky logic and calls into playwright when needed. I’d like to better understand you constraints.

[yury-s]

You need to know the Frame in which to lookup the other element, then you can get access to that frame e.g. via Page.frame(name) and call frame.waitForSelector on it.