Next.jsでCypressに入門する

経緯

社内のNext.jsプロジェクトにCypressが導入された。
その一環で別画面の200表示確認のコードを書くことを任された

書き始めた時の知識量

Cypressという名前と何するものかは知っているが、どうやって使うのかは全く知らない

導入

npm i -D cypress

起動方法

npx cypress open

操作方法

起動後にcypressフォルダとcypress.jsonが作成される
GUIで実行・停止が可能

各フォルダの説明

downloads

？？

fixtures

テスト時に使用するデータを管理する場所

integration

テストの定義ファイルを管理する場所

plugins

プラグインを作る場所

support

カスタムコマンドを管理する場所

基本的な読み方

visit()指定された画面に遷移する
get()指定された要素を取得する
should()評価 確認したいこと, 期待する値を記載する

チートシート見つけた

https://cheatography.com/aiqbal/cheat-sheets/cypress-io/

公式ドキュメントの方がわかりやすかった

https://docs.cypress.io/api/table-of-contents

実際に書くとき

cypress/integration/にファイルを作成して以下のように書いていけば良い
以下は指定した画面にアクセスできるかどうかの確認

describe('指定したページにアクセスできるかの確認', () => {
  it('トップページを正常に開ける', () => {
    cy.visit('/')
  })
})