Cypress.SelectorPlayground

Платформа «Selector Playground» предоставляет API, который позволяет:

Изменить стратегию выбора селектора по умолчанию
Переопределить селекторы, возвращаемые для каждого элемента

Синтаксис

Cypress.SelectorPlayground.defaults(options)
Cypress.SelectorPlayground.getSelector($el)

Аргументы

options (Объект)

Объект, содержащий любые или все следующие параметры:

Параметр	Принимает	Описание
`selectorPriority`	`Array of strings`	Определяет порядок предпочтения селектора для элемента.
`onElement`	`function`	Функция, которая вызывается с элементом и должна вернуть уникальную строку селектора для элемента. Если возвращается ложное значение, используется функция выбора селектора по умолчанию.

Порядок приоритета селекторов по умолчанию:

data-cy
data-test
data-testid
id
class
tag
attributes
nth-child

$el (Объект)

Элемент jQuery, для которого нужно получить значение селектора.

Примеры

Порядок приоритета селекторов

Установите приоритет селекторов, чтобы ID имели больший приоритет, чем классы, а классы — больший, чем атрибуты.

Cypress.SelectorPlayground.defaults({
  selectorPriority: ['id', 'class', 'attributes'],
})

Обратный вызов onElement

Установите пользовательскую функцию для определения селектора элемента. Вернётся поведение по умолчанию, если возвращено ложное значение.

Cypress.SelectorPlayground.defaults({
  onElement: ($el) => {
    const customId = $el.attr('my-custom-attr')

    if (customId) {
      return `[my-custom-attr=${customId}]`
    }
  },
})

Получение селектора

Возвращает значение селектора для заданного элемента, определяемого стратегией выбора селектора.

Например, рассмотрите этот фрагмент HTML.

<button id="bingo" class="number3">Cup of tea</button>

При использовании стратегии выбора селектора по умолчанию значение селектора будет '#bingo' , так как ID имеет больший приоритет, чем классы.

const $el = Cypress.$('button')
const selector = Cypress.SelectorPlayground.getSelector($el) // '#bingo'

При использовании пользовательской стратегии выбора селектора, отдающей предпочтение классам, значение селектора будет '.number3'.

Cypress.SelectorPlayground.defaults({
  selectorPriority: ['class', 'id'],
})

const $el = Cypress.$('button')
const selector = Cypress.SelectorPlayground.getSelector($el) // '.number3'