Insert an element (tag) on a Page with Playwright

Question

What is the correct way to insert a <style> tag into a Page using Playwright:

private void insertStyleBeforeElement(Page page, ElementHandle element, String cssContent) {
        String js = "(element, cssContent) => {" +
                "    if (!element) {" +
                "        console.log('Element is null or undefined');" +
                "        return;" +
                "    }" +
                "    console.log('Element:', element);" +
                "    let styleElem = document.createElement('style');" +
                "    styleElem.type = 'text/css';" +
                "    styleElem.innerHTML = cssContent;" +
                "    element.parentNode.insertBefore(styleElem, element);" +
                "}";
        page.evaluate(js, Arrays.asList(element, cssContent));
    }

This method throws:

com.microsoft.playwright.PlaywrightException: Error {
  message='element.parentNode is undefined
@debugger eval code line 191 > eval:1:280
evaluate@debugger eval code:198:19
@debugger eval code:1:44

  name='Error
  stack='Error: element.parentNode is undefined
@debugger eval code line 191 > eval:1:280

Though, when I check the debugger there is a parent node.

Answer 1

element handle's evaluate should work for you.

private void insertStyleBeforeElement(ElementHandle element, String cssContent) {
    String js = "(element, cssContent) => {" +
                "    if (!element) {" +
                "        console.log('Element is null or undefined');" +
                "        return;" +
                "    }" +
                "    console.log('Element:', element);" +
                "    let styleElem = document.createElement('style');" +
                "    styleElem.type = 'text/css';" +
                "    styleElem.innerHTML = cssContent;" +
                "    element.parentNode.insertBefore(styleElem, element);" +
                "}";
    element.evaluate(js, cssContent);
}