Page.locator() to select an element ID with a colon?

Grafana k6 k6-browser
1

Hi all,

Is it possible to use Page.locator() to select an element ID that contains a colon?

I’m trying to write tests for an ancient application that uses JSF, which has tons of elements with colons in their IDs. This doesn’t work:

await page.locator("#loginForm:orgSelect").selectOption("1");

I get this error:

ERRO[0003] Uncaught (in promise) selecting option on "#loginForm:orgSelect": SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '#loginForm:orgSelect' is not a valid selector.
    at CSSQueryEngine.queryAll (__xk6_browser_evaluation_script__:136:17)
    at InjectedScript._queryEngineAll (__xk6_browser_evaluation_script__:232:42)
    at InjectedScript._querySelectorRecursively (__xk6_browser_evaluation_script__:288:20)
    at InjectedScript.querySelectorAll (__xk6_browser_evaluation_script__:727:25)
    at predicate (__xk6_browser_evaluation_script__:1015:29)
    at predicate (__xk6_browser_evaluation_script__:835:14)
    at onRaf (__xk6_browser_evaluation_script__:899:27)
    at pollRaf (__xk6_browser_evaluation_script__:890:13)
    at InjectedScript.waitForPredicateFunction (__xk6_browser_evaluation_script__:843:41)
    at InjectedScript.waitForSelector (__xk6_browser_evaluation_script__:1045:17)  executor=shared-iterations scenario=browser

Fair enough. It’s not a valid selector.

Escaping the colon doesn’t work either:

await page.locator("#loginForm\\:orgSelect").selectOption("1");

It produces this error, instead:

ERRO[0003] Uncaught (in promise) selecting option on "#loginForm\\:orgSelect": getProperties: getting properties for element with ID 874584406283248700.5.4: Cannot find context with specified id (-32000)  executor=shared-iterations scenario=browser

I notice that this is not the error I would get if my selector simply didn’t match anything. I also verified that this selector does work in Chrome to apply CSS to the element.

I also tried using \3A instead of \:, with similar results.

Does anyone know if this is possible to do and, if so, what the trick is? Or does it just look like a bug? Should I open an issue on GitHub?

Many thanks in advance for any help.

2

Oof, embarrassing. I investigated a bit further and the problem wasn’t what I thought it was at all.

I tried using a different selector, without a colon (a bad one based on element and class), and I get the same error. So, it’s not locator() that’s failing, it’s selectOption(). The error message even said as much, but I missed it.

A bunch of methods do work, including isVisible() (true), isDisabled() (false), focus(), and click(). I even tried using selectOption() on another select element on the page, and it worked there.

So, I guess there’s something particular about the select I’m trying to operate that’s causing a problem. I’m still stuck on that, and unfortunately, the page I’m trying to test isn’t public.

Anyway, apologies asking the wrong question. If anyone has any ideas from just the error message above, they would still be much appreciated.

1 Like