fix: validate selectorPriority configuration

packages/driver/cypress/integration/cypress/selector_playground_spec.js

@@ -23,11 +23,50 @@ describe('src/cypress/selector_playground', () => {
     })
 
     it('sets selector:playground:priority if selectorPriority specified', () => {
+      const selectorPriority = [
+        'data-1',
+        'data-2',
+        'id',
+        'class',
+        'tag',
+        'attributes',
+        'nth-child',
+      ]
+
       SelectorPlayground.defaults({
-        selectorPriority: ['foo'],
+        selectorPriority,
       })
 
-      expect(SelectorPlayground.getSelectorPriority()).to.eql(['foo'])
+      expect(SelectorPlayground.getSelectorPriority()).to.eql(selectorPriority)
+    })
+
+    it('throws if selectorPriority contains an unsupported priority', () => {
+      const fn = () => {
+        SelectorPlayground.defaults({
+          selectorPriority: [
+            'id',
+            'name',
+          ],
+        })
+      }
+
+      expect(fn).to.throw()
+      .with.property('message')
+      .and.include('`Cypress.SelectorPlayground.defaults()` called with invalid `selectorPriority` property. It must be one of: `data-*`, `id`, `class`, `tag`, `attributes`, `nth-child`. You passed: `name`')
+    })
+
+    it('throws if selectorPriority has an unsupported priority that contains a substring of a valid priority', () => {
+      const fn = () => {
+        SelectorPlayground.defaults({
+          selectorPriority: [
+            'idIsNotValid',
+          ],
+        })
+      }
+
+      expect(fn).to.throw()
+      .with.property('message')
+      .and.include('`Cypress.SelectorPlayground.defaults()` called with invalid `selectorPriority` property. It must be one of: `data-*`, `id`, `class`, `tag`, `attributes`, `nth-child`. You passed: `idIsNotValid`')
     })
 
     it('sets selector:playground:on:element if onElement specified', () => {

packages/driver/src/cypress/error_messages.ts

@@ -1428,10 +1428,14 @@ export default {
       message: '`Cypress.SelectorPlayground.defaults()` must be called with an object. You passed: `{{arg}}`',
       docsUrl: 'https://on.cypress.io/selector-playground-api',
     },
-    defaults_invalid_priority: {
+    defaults_invalid_priority_type: {
       message: '`Cypress.SelectorPlayground.defaults()` called with invalid `selectorPriority` property. It must be an array. You passed: `{{arg}}`',
       docsUrl: 'https://on.cypress.io/selector-playground-api',
     },
+    defaults_invalid_priority: {
+      message: '`Cypress.SelectorPlayground.defaults()` called with invalid `selectorPriority` property. It must be one of: `data-*`, `id`, `class`, `tag`, `attributes`, `nth-child`. You passed: `{{arg}}`. Consider using the `onElement` property if a specific selector is desired.',
+      docsUrl: 'https://on.cypress.io/selector-playground-api',
+    },
     defaults_invalid_on_element: {
       message: '`Cypress.SelectorPlayground.defaults()` called with invalid `onElement` property. It must be a function. You passed: `{{arg}}`',
       docsUrl: 'https://on.cypress.io/selector-playground-api',

packages/driver/src/cypress/selector_playground.ts

@@ -58,16 +58,25 @@ export default {
       })
     }
 
-    const { selectorPriority: priority, onElement } = props
+    const { selectorPriority, onElement } = props
 
-    if (priority) {
-      if (!_.isArray(priority)) {
-        $errUtils.throwErrByPath('selector_playground.defaults_invalid_priority', {
-          args: { arg: $utils.stringify(priority) },
+    if (selectorPriority) {
+      if (!_.isArray(selectorPriority)) {
+        $errUtils.throwErrByPath('selector_playground.defaults_invalid_priority_type', {
+          args: { arg: $utils.stringify(selectorPriority) },
         })
       }
+      // Validate that the priority is one of: "data-*", "id", "class", "tag", "attributes", "nth-child"
+
+      selectorPriority.forEach((priority) => {
+        if (!/^(data\-.*|id|class|tag|attributes|nth\-child)$/.test(priority)) {
+          $errUtils.throwErrByPath('selector_playground.defaults_invalid_priority', {
+            args: { arg: priority },
+          })
+        }
+      })
 
-      defaults.selectorPriority = priority
+      defaults.selectorPriority = selectorPriority
     }
 
     if (onElement) {