garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.71k stars 602 forks source link

Using CSS selector return a puppeteer error #1128

Open number33 opened 4 years ago

number33 commented 4 years ago

I'm testing this tool on a React site and the class names have random hashes appended to them, as a result I need to select elements where the class name contains.

Using this selector on the Backstopjs.io site throws a puppeteer error, and I know for a fact that if I were to use that selector in puppeteer it would work. Anyone know what the issue could be? Is there something I can/should customize?

I'm using the following selector p[class*='supportsBlock']

And here is the error I get

Puppeteer encountered an error while running scenario "BackstopJS Homepage" Error: Evaluation failed: SyntaxError: Unexpected identifier Puppeteer encountered an error while running scenario "BackstopJS Homepage" Error: Evaluation failed: SyntaxError: Unexpected identifier

Here is my backstop config

{ "id": "backstop_default", "viewports": [ { "label": "Pixel 2", "width": 411, "height": 731 }, { "label": "tablet", "width": 1024, "height": 768 } ], "onBeforeScript": "puppet/onBefore.js", "onReadyScript": "puppet/onReady.js", "scenarios": [ { "label": "BackstopJS Homepage", "cookiePath": "backstop_data/engine_scripts/cookies.json", "url": "https://garris.github.io/BackstopJS", "referenceUrl": "", "readyEvent": "", "readySelector": "", "delay": 0, "hideSelectors": [], "removeSelectors": [], "hoverSelector": "", "clickSelector": "", "postInteractionWait": 0, "selectors": [ "p[class*='supportsBlock']" ], "selectorExpansion": false, "expect": 0, "misMatchThreshold" : 0.1, "requireSameDimensions": true } ], "paths": { "bitmaps_reference": "backstop_data/bitmaps_reference", "bitmaps_test": "backstop_data/bitmaps_test", "engine_scripts": "backstop_data/engine_scripts", "html_report": "backstop_data/html_report", "ci_report": "backstop_data/ci_report" }, "report": ["browser"], "engine": "puppeteer", "engineOptions": { "args": ["--no-sandbox"] }, "asyncCaptureLimit": 5, "asyncCompareLimit": 50, "debug": false, "debugWindow": false }

garris commented 4 years ago

Can you try using "p[class*=\"supportsBlock\"]" instead of "p[class*='supportsBlock']"

Just a guess...