【Cypress】要素が被ってクリックできないと言われた

エラー内容

cypressで要素を取得し、クリックしようとしたところ、
要素が被りクリックできないと言われました。

実装はこんな感じです。

sample.cy.ts

cy.get('[data-cy="target-element"]').click()

// 後続のテスト

cypressのエラーから、clickメソッドにforceオプションをつけてあげることで解決できると言われましたが、
テストとして本質的でないような気がしたので少し調べてみました。

何が起きているか見てみたところ、getメソッドで取得してきた要素が画面上部にポジショニングされてしまい、
そこにヘッダーがかぶってしまってクリックできない状態になってました。

scrollIntoViewなどを使い解決しようとしましたが、
結局画面上部にポジショニングされクリックできず...

解決策

根本的な解決策ではないですが、
以下で動作を担保することとしました。

sample.cy.ts

// 1. まず要素自体が表示されていることをテスト
cy.get('[data-cy="target-element"]').should('be.visible')
// 2. clickメソッドにforceオプションをつけてクリック
cy.get('[data-cy="target-element"]').click({ force: true })

// 後続のテスト