Adding Selectors to Backstop.Json with Playwright Throws Error

[awhisler]

When I add selectors to my backstop.json, it throws error:

Playwright encountered an error while running scenario "Dashboard Home"
Error: page.evaluate: unexpected token: identifier
evaluate@debugger eval code:226:30
@debugger eval code:1:44

This is the setup:

"scenarios": [
    {
      "label": "Dashboard Home",
      "cookiePath": "",
      "url": "https://XXX.dashboard.XXX.co/",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [
        "[test-id='create-new-flyreel']",
        "h1.chakra-heading"
      ],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ],

When I do this, it works:

"scenarios": [
    {
      "label": "Dashboard Home",
      "cookiePath": "",
      "url": "https://XXX.dashboard.XXX.co/",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ],

"backstopjs": "^6.2.2"

Error:

Playwright encountered an error while running scenario "Dashboard Home"
Error: page.evaluate: SyntaxError: Unexpected identifier 'create'
    at eval (<anonymous>)
    at UtilityScript.evaluate (<anonymous>:226:30)
    at UtilityScript.<anonymous> (<anonymous>:1:44)

[dgrebb]

@awhisler I believe this is because of Playwright's literal nature in testing strings in strings. It's looking for the DOM pattern, which in this case is double quotes around the test-id's value.

Can you try changing it to the below? Swapping the double quotes for single quotes to test with attribute selectors appears to be a Playwright requirement.

Or if you like to live on the edge, skip the quotes around test-id's value entirely: "[test-id=create-new-flyreel]"

Try this copypasta out:

"scenarios": [
    {
      "label": "Dashboard Home",
      "cookiePath": "",
      "url": "https://XXX.dashboard.XXX.co/",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [
        '[test-id="create-new-flyreel"]',
        "h1.chakra-heading"
      ],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ],

Happy holidays!

[dgrebb]

Details about Playwright text-selector implementations.

[awhisler]

@dgrebb Single quotes does not work because it's a json file:

But, living on the edge worked:

[dgrebb]

@awhisler ah yes — apologies. Did you also try omitting the double quotes around theid? Eg "[test-id=create-new-flyreel]".

I read too fast. Glad it worked!