Атрибут Cypress get href

У меня есть тестовый пример, в котором у меня есть ссылка, которая открывается в новой вкладке, и так как Cypress не поддерживает мульти вкладки, я хочу получить атрибут href этой ссылки, а затем открыть его в той же вкладке, я пытаюсь сделать это таким образом, но по какой-то причине это не работает.

it('Advertise link should refer to Contact page', () => {
    var link = document.querySelector("div.footer-nav > ul > li:nth-child(2) > a").href;
     cy.visit(link);
     cy.title().should('include', 'Text');
});

Ответ 1

Код ниже должен делать то, что вы пытаетесь достичь. Существует также целый рецепт с предложениями по тестированию ссылок, которые открываются в новых вкладках.

it('Advertise link should refer to Contact page', () => {
   cy.get('div.footer-nav > ul > li:nth-child(2) > a')
     .should('have.attr', 'href').and('include', 'contact')
     .then((href) => {
       cy.visit(href)
     })
})

Я также предложил бы прочитать документ Cypress о лучших способах назначения и работы с переменными: https://on.cypress.io/variables-and-aliases.

Ответ 2

Решение 1: invoke("attr", "href")

Перейдите к URL-адресу, указанному в атрибуте элемента href:

cy.get(selector)
      .invoke('attr', 'href')
      .then(href => {
        cy.visit(href);
      });

Ссылка: https://docs.cypress.io/api/commands/invoke.html#Function-with-Arguments


Решение 2. Не открывайте содержимое в новой вкладке.

Удалите целевой атрибут из элемента привязки, затем щелкните по нему, чтобы перейти к его URL-адресу на той же вкладке:

cy.get(selector).invoke('removeAttr', 'target').click()

Ссылка: https://docs.cypress.io/examples/examples/recipes.html#Tab-Handling-and-Links.