Cypress.io: Как создать функцию, которая помогает выбирать различные элементы DOM на основе ввода

Question

Я понимаю, что вы не можете назначать или работать с возвращаемыми значениями любой команды Cypress, однако я хочу иметь возможность написать вспомогательную функцию, которая позволяет мне выбирать любой элемент DOM, который я хочу, без необходимости явной записи в DOMселектор каждый раз, так как мое значение ключа одинаково для всех моих тестов.

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

<div data-e2e="one-div-element">
<div data-e2e="second-div-element>
<div data-e2e="third-div-element>
<div data-e2e="fourth-div-element>

Я хочу иметь возможность выполнитьдопустимый эквивалент:

const getByE2EID = (id) => cy.get('[data-e2e="${id}"]') // <--- (this of course, would be interpolated)

, и тогда я смогу написать тест вроде:

getByE2EID('third-div-element') // <--- and then I'd have the third div

---

Я пытаюсь ИЗБЕГАТЬ:

cy.get('[data-e2e="first-div-element"]')

Каждый раз, когда я хочу захватить элемент DOM, потому что он заканчивается ...

cy.get('[data-e2e="first-div-element"]')
cy.get('[data-e2e="second-div-element"]')
cy.get('[data-e2e="third-div-element"]')
cy.get('[data-e2e="fourth-div-element"]')

Снова и снова.

Answer 1

Спасибо за помощь всем!С вашими предложениями я смог перевести то, что мне нужно было написать в Cypress.io, чтобы эта идея работала, и все сводилось к записи этого внутри файла commands.js в каталоге поддержки:

Cypress.Commands.add('getDataE2EID', function (id) {
  return cy.get(`[data-e2e="${id}"]`)
})

cy.getDataE2EID('first-div-element') <--- даст мне первый div </p>

Теперь у меня может быть пользовательская функция кипариса, которая позволяет мне передавать любое значение, которое я хочу, где ключ 'data-e2e'.

Answer 2

Да! Вы можете определить функцию как:

const getByE2EID = ( val )=> document.querySelector(`[data-e2e='${val}']`);

И вы можете использовать его getByE2EID ('четвертый-div-элемент'), но для использования этого ваш HTML должен быть действительным как:

<div data-e2e="one-div-element">Div 1</div>
<div data-e2e="second-div-element">Div 2</div>
<div data-e2e="third-div-element">Div 3</div>
<div data-e2e="fourth-div-element">Div 4</div>

Answer 3

Это будет работать, если вы используете шаблонные литералы :

const getByE2EID = (id) => cy.get(`[data-e2e="${id}"]`)

Примечание: ` вместо '.

Прочитайте « Возвращаемые значения » для получения дополнительной информации.

Answer 4

Вы можете легко сделать это с помощью функций массива es6:

function getByE2EIDs(...ids) {
  return ids.map(cy.get(`[data-e2e="${id}"]`));
}

getByEIDs(id1, id2, id3, id4);

альтернативно:

function getByE2EIDs(ids) {
  return ids.map(cy.get(`[data-e2e="${id}"]`));
}

getByEIDs([id1, id2, id3, id4]);