web-dev-qa-db-ja.com

サイプレスのhrefセクションを取得

私は新しいタブで開くリンクがあるテストケースを持っていますが、サイプレスはマルチタブをサポートしていないため、そのリンクの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');
});
javascriptcypress
24
Max

以下のコードは、あなたが達成しようとしていることをするはずです。 新しいタブで開くリンクをテストする方法に関する提案を含むレシピ もあります。

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)
     })
})

また、変数を割り当てて操作するための最良の方法についてサイプレスドキュメントを読むことをお勧めします。 https://on.cypress.io/variables-and-aliases

33
Jennifer Shehane

解決策1：invoke("attr", "href")

要素のhref属性で指定されたURLに移動します。

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

8
Mobiletainment