【随時更新】用途別 Cypress辞典

案件でCypressを扱っているが、情報量が少なく
新しく学ぶ人が苦戦しがちであるため、少しずつ自分の知見を共有していきます。
この記事ではテストしたい動作別にcypressの記法を掲載していきます。
なるべく網羅的に記述していきたいところですがすべてを一度に記述するのは大変なため随時更新していきます。
よければLGTM、ストックして更新をお待ち下さい。

特定のURLにアクセスする

cy.visit("path") を使う

例

cy.visit("http://localhost;:3000") // ルートパスにアクセス

なお、ここで記述するURLは cypress.json に以下の記述を入れることで簡潔にすることが可能

{
  "baseUrl": "http://localhost:3000",

この記述を入れることで、先程の記述は

cy.visit("/") // ルートパスにアクセス

のように書ける

要素を取得する

cy.get を使う

例

cy.get('#hoge') // idがhogeの要素を取得
cy.get('.fuga') // classがfugaの要素をすべて取得
cy.get('button span') // buttonタグの子要素のspanタグをすべて取得
cy.get('li.test') // クラス名がtestのliタグをすべて取得

ポイント

引数にはCSSのセレクタと同様の記述が入る

要素をクリックする

cy.get("hoge").click() を使う

例

cy.get("#hoge").click()

なお、click()に引数を渡すことで、要素内の特定の位置を指定してクリックすることも可能

cy.get("#modal").click("topLeft") // #modalというidの要素の左上をクリック

これは上記のように、モーダルの外部をクリックしてモーダルを閉じる動作を検証する際に役立つ

プルダウンの選択

cy.get(#hoge).select("fuga") を使う

例

cy.get("#genre").seleect("test") // テキストが"test"の選択肢をプルダウンから選択

選択したプルダウンの要素を取得する

cy.get("#hoge").find(":selected") を使う

例

cy.get("#genre").find(":selected") // #genreというidが設定されたプルダウンから選択された要素を取得する

選択したプルダウンのテキストを検証する

cy.get("#hoge").find(":selected") で取得した要素を should(have.text, 'hoge') で検証する

例

// #genreというidが設定されたプルダウンの選択された要素が"fuga" というテキストを持っていることを検証する
cy.get('#genre').find(":selected").should("have.text", "fuga") 

なお、valueを検証する場合は以下。テキストは文字列だけどvalueはid、といったケースもあるので両方使えるようにしておくと良い。

// #genreというidが設定されたプルダウンの選択された要素のvalueが0であることを検証
cy.get('#genre').find(":selected").should("have.value", 0) 

リクエストのモック

cypressはテストといいつつも、実際にはローカルサーバをプログラムに従って自動操作しているだけなので
APIとの通信部分はモックして実際に通信が走らないようにする必要があります。
これを実現するためには cy.intercept というのを使う必要があります。

例

cy.intercept("GET", "http://localhost:3000/posts", {
  statusCode: 200,
  body: {
    data: [
       {
        id: 1,
        context: "test"
       }
     ]
   }
  }
)

このように書くと、GETで http://localhost:3000 にアクセスした時にステータス200でbody以下のレスポンスを返しますよ
というモックができる。こうすることでフロントで、レスポンスを受け取って次の処理に進むことができる。

エラーを発生させたい場合はstatusCodeプロパティをいじる。
エラーメッセージを画面上に表示したい場合はbodyに適切なエラーメッセージを仕込む

例

cy.intercept("POST", "http://localhost:3000/posts", {
  statusCode: 422,
  body: {
    errors: ["contentを入力してください"]
   }
  }
)

モックする時のポイントとして、画面操作の都合で発生するリクエストは全てモックするということを押さえておきたい。
例えば以下のようにuseEffectでコンポーネント読み込み時に発生するリクエストもモックする必要がある。

　　useEffect(() => {
    const fetchPostData = async () => {
      const response = await postRequest("fetch")
      if (response.data.data) {
        postDispatch("index", response.data.data)
      }
    }
    fetchGmoPaymentApplication()
  }, [])

これは裏を返せば、非同期で走るリクエストを追加するたびにテストコードにモックを追加する必要があるということだ。
特にチームで開発しているときは非同期通信を実装した時に自分が触っていないテストがこける可能性があるので、注意する。