Abstract
window.open をスタブすれば良い。
Body
Cypress は Chromium を使って e2e テストを実施できるツール・ライブラリです。
まず前提として、Web ページを開くには a タグをクリックする方法と JS で window.open を使う方法の2通りあります。
前者の場合は、次のように Element に対する操作としてチェックを掛けてあげれば良いです。
1-href
// click <a href='/users/1/edit' date-test="edit-link">EDIT</a>
cy.get('[date-test=edit-link]')
.should('have.attr', 'href')
.and('include', '/users/1/edit');
後者の場合は、 window.open が同じタブで新しいページを開く場合には cy.url() でチェックできます。
2-window.open
// window.open('/users/1/edit')
cy.url()
.should('include', '/users/1/edit');
後者の中でも window.open が _blank を指定して新しいタブを開いてしまっている場合は、window.open をモックしてから open を calledWithMatch 等でチェックしてあげると良いです。
3-window.open-with-_blank
// window.open('/users/1/edit', '_blank')
cy.visit(`http:localhost:8000/yeyeyeyey`, {
onBeforeLoad: win => cy.stub(win, 'open')
});
...
cy.window()
.its('open')
.should('be.calledWithMatch', '/users/1/edit');
クエリパラメタ等のほとんどの状況では本質的でない情報で URL は変化しうるので calledWithMatch で判定を行うのが良いと思います。
Motivation
href に対するチェックは言わずもがな、window.open をモックするというやり方も、結果を見れば割と正攻法という感じがしますが、Cypress ではタブに関する操作ができず新しく開いたタブの URL はどうやっても取得できないので、cy.url で頑張ろうとしても無駄です。
window オブジェクトの取得にクセがあったりするのも地味にハマリポイントだと思うのでまとめてみました。
なお、同じサイトのページに移動する場合は移動先の要素に対してテストを行えば十分です。今回は特定の外部サイトのページを開くというシナリオだったため、遷移先の情報を仮定しないために URL に対してのみチェックを行うようなコードを書きました。