Using CSS selector return a puppeteer error
- Dominant language
- JavaScript
- Stars
- 7.2k
- Forks
- 621
- PR merge metrics
- No merged PRs in 30d
Description
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
> }
>
Contributor guide
Research direction
Start by reproducing the failure with the scenario configuration in the issue, especially the selectors entry using p[class*='supportsBlock'] and the puppeteer engine. Then inspect the referenced puppet/onBefore.js and puppet/onReady.js entry points and the selector-capture path. Done means identifying why this selector produces the reported SyntaxError and confirming a working behavior or a clearly documented limitation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100