Search code examples
javascripthtmljestjspuppeteerqueryselector

Failed to execute 'querySelector' on 'Document': 'button[data-id="purple-button" disabled]' is not a valid selector

How do I query for an element with multiple attributes? I.E. I want to select the element based on its element type, data-id, and whether it is disabled or not.

Here is the html:

<button disabled="" data-id="purple-button">...</button>

and here is my test code:

await page.evaluate(
    () => document.querySelector('button[data-id="purple-button" disabled]') !== null,
  );

The error when I try running the test is the title of this post. I have tried looking at other solutions on stackoverflow but have not found any yet that use examples of elements with multiple attributes.

Thanks in advance!

Solution

  • You should use brackets to separate the attributes.

    document.querySelector('button[data-id="purple-button"][disabled]')

    Per this Stack Overflow answer