Cypress - атрибут, содержащий текст и конец строки

Question

Давайте предположим, что у меня есть html:

<div class="my_class" id="first_case">
  <a href="/foo/bar/123"></a>
</div>

<div class="my_class" id="second_case">
  <a href="/foo/bar/1234567"></a>
</div>

Я хочу сделать утверждение, что есть элемент с href, который заканчивается на '/123'.

const test_id = '123'

cy.get('.my_class').find('a').should("have.attr", "href").and("contain", '/' + test_id);

Это работает, однако я не знаю, как убедиться, что утверждение верно только для href с точным окончанием ('/ 123', как показано в #first_case в первом фрагменте кода) и что оно ложно для других начинающихся строк с таким номером, например ('/ 1234567', как показано в #second_case в первом фрагменте кода).

Другими словами, утверждение должно быть истинным для #first_case, но ложным для # second_case.

Я попытался использовать символ конца строки или создать новый объект RegExp, но не смог заставить его работать. Любая помощь будет оценена!

Answer 1

.should() даст вам href, так что вы можете использовать его в блоке .then() так, как вам нравится (см. { ссылка }), поэтому вы можете использовать .endsWith():

const test_id = '123'

cy.get('.my_class')
  .find('a')
  .should("have.attr", "href")
  .then(href => {
    expect(href.endsWith(test_id)).to.be.true;
  });

Или чтобы сделать его немного более читабельным и чтобы сообщение о сбое было понятнее, вы можете использовать https://www.chaijs.com/plugins/chai-string/:

const test_id = '123'

cy.get('.my_class')
  .find('a')
  .should("have.attr", "href")
  .then(href => {
    expect(href).to.endWith(test_id);
  });

Answer 2

Я думаю, что есть еще более простой способ сделать это. Вы можете использовать один cy.get() и один should(), поскольку селекторы Cypress должны вести себя так же, как и селекторы jQuery.

cy.get('.my_class a[href$="/123"]').should('have.length', 1);

$= будет соответствовать только атрибутам, которые заканчиваются на /123 .

Answer 3

В ванили JS можно попробовать с querySelector(), а атрибут заканчивается селектором ([name$="value"). Обратите внимание, что вы забыли закрыть элемент a.

const test_id = '123'
var el = document.querySelector(`[href$="${test_id}"]`);
console.log(el);

<div class="my_class" id="first_case">
  <a href="/foo/bar/123"></a>
</div>

<div class="my_class" id="second_case">
  <a href="/foo/bar/1234567"></a>
</div>