自分のサイトにe2eテストを導入しようとしている話

この記事はPlayground Advent Calendar 2019の12/25の記事です。(めちゃめちゃ遅れてすんまそん。。)
こんにちは。にっし〜です。
今日は自分のサイトにe2eテストを導入しようとする話を書きます。
"しようとする話"なので今回で完結はしません。詰まったことがあればその都度更新していこうと思います。
(導入そのものでは詰まらなかったのでそこは省きます)

詰まったこと一覧

• cross origin error

自分のサイトではてなブログなどの外部サービスのリンクを張っている部分があるのですが、そこのテストを書こうとした時に出くわしました。
iframe間のリンクに飛べないってやつですね。
色々調べた結果2パターンの回避策があると知り、両方試したところ片方は上手くいってもう片方は失敗したので両方まとめときます。

1, chromeWebSecurity: falseを設定する
cypressが出していたerrorの中にあった回避策で、security policyを無効にしてしまうことで無理くりアクセスしようというやつです。言い方から分かるように今回のケースでは失敗しました。

まぁそりゃそうですね。厳密に言うと失敗という言い方は正しくなくて、追加でプロキシの設定とかを弄ってcypressからのアクセスを"悪い人じゃないよ〜"ってしてあげれば良いみたいなのですが、ここでやりたいのは疎通確認(link切れ起こしてないよね？？)なのでそこまですることはないかぁという感じです。

2, requestコマンドを使う
error文では上の回避策をレコメンドされるのですが、同時に渡されるlinkに飛ぶとこっちの回避策が上に出てきます。
何をするかというと、

spec.js

cy.get('a').then(($a) => {
  // pull off the fully qualified href from the <a>
  const url = $a.prop('href')

  // make a cy.request to it
  cy.request(url).its('body').should('include', '</html>')
})

こんなコードを書きます(初めのgetの中身は各自のサイトのlink張ってる部分のタグに読み替えてください)
hrefタグを見て、そこからlink先のurlを取得します。
その後requestコマンドを使ってGETリクエストを送ります。(無事に疎通できると200で返ってきます)
あとは返ってきたものをitsコマンドで受けて、その中身についてテストを書きます。
自分の場合は一先ず簡単にこんな感じにしています。

spec.js

cy.get('.v-card__text > a').then(($a) => {
  // pull off the fully qualified href from the <a>
  const url = $a.prop('href')

  // make a cy.request to it
  cy.request(url).its('body').should('include', '<title>夏インターンに参加してきた話(サイボウズ編) - nisshii18’s blog</title>')
})

副次的な効果として、visitやclick等の動作やブラウザからのアクセスが必要なくなるので実行時間が短くなります。テストの観点から実行時間が短く済むのは良いですね。

続く...