[Bug]: aria/ queries don't support single-quote delimiters for role names

[andyearnshaw]

Bug description

Steps to reproduce the problem:

1. Open a page in Puppeteer with at least one element with role="region" attribute set
2. Call page.$() with the following query: aria/[role='region']
3. Observe that the result is null

Puppeteer version

v10.4.0

Node.js version

v16.12.0

npm version

v8.1.0

What operating system are you seeing the problem on?

Linux, macOS, Windows

Relevant log output

[17:34:32] › Error: waiting for selector `Format[role='tab']` failed: timeout 20000ms exceeded
xceeded
    at new WaitTask (/Users/andyearnshaw/Projects/dashvis/node_modules/.pnpm/puppeteer@5.5.0/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:505:34)
    at DOMWorld.waitForSelectorInPage (/Users/andyearnshaw/Projects/dashvis/node_modules/.pnpm/puppeteer@5.5.0/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:416:26)
    at Object.waitFor (/Users/andyearnshaw/Projects/dashvis/node_modules/.pnpm/puppeteer@5.5.0/node_modules/puppeteer/lib/cjs/puppeteer/common/AriaQueryHandler.js:62:21)
    at DOMWorld.waitForSelector (/Users/andyearnshaw/Projects/dashvis/node_modules/.pnpm/puppeteer@5.5.0/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:312:29)
    at Frame.waitForSelector (/Users/andyearnshaw/Projects/dashvis/node_modules/.pnpm/puppeteer@5.5.0/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:842:51)
    at waitFor (/Users/andyearnshaw/Projects/dashvis/resources/e2e-core/framework/utils/interactions.js:90:30)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.ariaClick (/Users/andyearnshaw/Projects/dashvis/resources/e2e-core/framework/utils/interactions.js:270:20)
    at async worldConstructor.<anonymous> (/Users/andyearnshaw/Projects/dashvis/workspaces/report-page/e2e/features/support/steps/mouse.js:57:5)
    at async /Users/andyearnshaw/Projects/dashvis/resources/e2e-core/framework/createStepRunnerFactory.js:17:11
    at async worldConstructor.runStep (/Users/andyearnshaw/Projects/dashvis/resources/e2e-core/framework/createStepRunnerFactory.js:47:9)

[andyearnshaw]

Note that, in the log output, I'm using a different selector and API function than the ones suggested in the repro steps. You can see in the source code for v10.4.0 that ' is not part of the attribute selector regex.

[johanbay]

I think it was a conscious decision to limit the API to just double quote delimiters to simplify the selector syntax a bit.
With that said, I am not opposed to extending it to support single quotes too.

[andyearnshaw]

I think it's more an issue that they look similar to attribute selectors and a lot of people use " as their default string delimiters so flipping the "selector" to use single quotes might be the natural behaviour. That's at least what caused me to run into it, and the fact that it doesn't throw with a decent error message (at least in the waitFor case it was just "waiting for selector... timeout") made me spend more time exploring what the problem could be.

I could probably submit a PR today for this, since it's a pretty quick and easy fix.

[johanbay]

Closing this issue since the PR has now been merged.
Again, thank you for fixing this!