I have a code as following:
page.click('div.button-table div:contains(Who) div.square-button:nth-child(1)')
When puppeteer run this code, it will raise error:
Brief
Failed to execute 'querySelector' on 'Document': 'div.button-table div:contains(Who) div.square-button:nth-child(1)' is not a valid selector.
Full
Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'div.button-table div:contains(Who) div.square-button:nth-child(1)' is not a valid selector.
at __puppeteer_evaluation_script__:1:33
at ExecutionContext.evaluateHandle (node_modules/puppeteer/lib/ExecutionContext.js:124:13)
at <anonymous>
-- ASYNC --
at ExecutionContext.<anonymous> (node_modules/puppeteer/lib/helper.js:144:27)
at ElementHandle.$ (node_modules/puppeteer/lib/ExecutionContext.js:529:50)
at ElementHandle.<anonymous> (node_modules/puppeteer/lib/helper.js:145:23)
at Frame.$ (node_modules/puppeteer/lib/FrameManager.js:456:34)
at <anonymous>
-- ASYNC --
at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:144:27)
at Frame.click (node_modules/puppeteer/lib/FrameManager.js:735:31)
at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:145:23)
at Page.click (node_modules/puppeteer/lib/Page.js:973:29)
at Proxy.fillInAudience (libs/page/brand_create_quote_page.js:67:21)
at Proxy.<anonymous> (libs/logger.js:38:27)
at Context.it (ui/brand/create_quote_spec.js:53:16)
at <anonymous>
But this selector can run successfully in Devtools - $('div.button-table div:contains(Who) div.square-button:nth-child(1)').text()
I also figure out if I remove div:contains(Who), puppeteer can run it without panic.
Any ideas?
Thanks!
Puppeteer is using document.querySelector internally. So you would be able to use any CSS Selector. The problem here is that contains is not a CSS Selector but a JQuery feature.
The good thing is that you could test your selectors using the Chrome developer tools and test them using document.querySelector.