Bug: Modifying the `Cypress.SelectorPlayground.defaults - selectorPriority` breaks the Selector Playground

Current behavior:

Modifying the Cypress.SelectorPlayground.defaults in the support/index.js file breaks the Selector Playground in the GUI.

Desired behavior:

To be able to modify/add to the selectorPriority list and still use the Selector Playground.

Test code to reproduce

If you modify the cypress/support/index.js file with this:

Cypress.SelectorPlayground.defaults({
  selectorPriority: [
    "data-qa",
    "data-test",
    "data-cy",
    "id",
    "class",
    "name",
    "tag",
    "attributes",
    "nth-child",
  ],
});

The selector playground is broken and doesn’t work at all.

When I comment this block of code out, the Selector Playground works normally.

This issue helped me figure out where to modify the selectorPriority: 7606

Versions

Cypress 4.7.0 and 4.8.0, MacOS, Chrome

[dwilches]

I found a workaround, instead of using selectorPriority use onElement.

So instead of:

Cypress.SelectorPlayground.defaults({
  selectorPriority: [
    "my-attribute-1",
    "my-attribute-2",
    ...
  ]
})

Use this:

Cypress.SelectorPlayground.defaults({
    onElement: ($el) => {
        const attr1 = $el.attr("my-attribute-1");
        if (attr1) {
            return `[my-attribute-1="${attr1}"]`;
        }
        const attr2 = $el.attr("my-attribute-2");
        if (attr2) {
            return `[my-attribute-2="${attr2}"]`;
        }
        // Default behaviour
        return false;
    },
});

[madbreena]

I am facing the same issue. Will this be resolved?