garris / garris/BackstopJS

Using CSS selector return a puppeteer error

Open
#1,128 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.