DOMException: Failed to execute 'querySelectorAll' on 'Document' when trying to click

Grafana k6 k6-browser
1

Hi, I keep getting the following error when trying to click on a button on my page:

clicking on "[object Object]": DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object Object]' is not a valid selector.

the code in question is:

        const wsSwitchBtn = page.locator('button#menu-button--menu');
        console.log('ws---------------' + wsSwitchBtn.textContent());
        await page.click(wsSwitchBtn);

here is the code for the page, the highlighted part is what I’m trying to click on:

Screenshot 2024-02-05 at 9.16.26 AM
Screenshot 2024-02-05 at 9.16.26 AM3106×190 55.8 KB

the console.log correctly outputs the text content correctly, however it fails when trying to click on it. when looking up the error it seems that js is complaining I’m not using the correct selector, but the selector I’m using is correct and also .textContent() seems to be fine with it. Any ideas why it’s failing to click? I tried using different selectors to access this button but it all fail with the same error. I’m able to click other elements on the page fine.

2

Hi @wjc !

If you use page.locator() it will create a Locator object, which has a click() function. See the documentation:

So please try with:

  const wsSwitchBtn = page.locator('button#menu-button--menu');
  console.log('ws---------------' + wsSwitchBtn.textContent());
  await wsSwitchBtn.click();

Or:

page.click('button#menu-button--menu');

I hope it helps

1 Like