Проверьте, отсортированы ли элементы в алфавитном порядке в CypressIO

Question

Какова наилучшая практика, когда утверждается, что элементы сортируются по алфавиту с помощью CypressIO? Я хочу в основном проверить, что element[0].text() правильно отсортирован перед element[1].text() но для всех элементов, как в фрагменте ниже:

cy.get('#main div').each((account) => {

    });
  });

Answer 1

Я думаю, что это или что-то подобное будет работать для вас (не пробовал). Он получает текст всех элементов, соответствующих выбранному вами селектору, и сохраняет его в массиве, а затем утверждает, что этот массив совпадает до и после его сортировки.

cy.get('#main div').then($elements => {
  var strings = $elements.map($el => $el.text());
  cy.wrap(strings).should("equal", strings.sort()); // you may need deep equal here instead
});

Answer 2

В ответе Брендана есть несколько ошибок.

• $elements.map()имеет два параметра в обратном вызове. Первый — это индекс элемента в объекте jQuery, а не самого элемента.

• второй параметр — это элемент DOM, поэтому.text()не работает,innertTextнеобходим

• результат вstringsнельзя протестировать как массив, поскольку это другойjQueryобъект, его необходимо преобразовать в массив перед утверждением

• тотcy.wrap(strings).should("equal", strings.sort())сравнивает объект-оболочку jQuery с самим собой, что дает ложноположительный результат

Это проверенная версия, которую следовало выложить

      cy.get('main#1 div')
  .should($elements => {
    const strings = $elements.map((index, el) => el.innerText).get()
    return strings
  })
  .should('deep.eq', ['a', 'b', 'c'])

Тестовый HTML:

      <main id="1">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</main>

<main id="2">
  <div>c</div>
  <div>b</div>
  <div>a</div>
</main>

<main id="3">
  <div>b</div>
  <div>c</div>
  <div>a</div>
</main>

---

См. jQuery .map().

Тип обратного вызова
: Функция (Целый индекс, Элемент domElement) => Объект

Answer 3

Решение, которое будет работать на Cypress 7.x

      cy.get('#main div').then($elements => {
  const strings = [...$elements].map(el => el.innerText)
  expect(list).to.deep.equal([...strings].sort())
})

Рассуждение:

• jQuery работает иначе, чем vanilla JS .map, потому что он принимает параметры в другом порядке ( index, el вместо el, index) и не возвращает чистый массив, который понадобится для будущей сортировки. Поэтому список элементов jQuery распространяется на чистый массив.
• Array.sort() работает на месте, поэтому массив необходимо клонировать перед сортировкой, иначе он будет сравнивать те же данные.
• Для сравнения значений массива необходимо глубокое сравнение, поэтому использование синтаксиса Chai с expects а также deep.equal требуется.