Cypressでボタンによる遷移のテストを作成する

今回は自社サイト(https://appswingby.com/)を使用して、ヘッダーのソリューションボタンをクリックした際の挙動を確認してみようと思います。

テストケースの条件、手順、期待値を整理する

まず、このテストケースの「条件」「手順」「期待値」をまとめたいと思います。

・条件：自社サイト(https://appswingby.com/)が表示されていること
・手順：ヘッダーのソリューションボタンをクリックする
・期待値：自社のソリューション画面(https://appswingby.com/solution/)へ遷移完了していること

では、こちらを実際にコードに置き換えていこうと思います。

テストコードを書いていく

まず、条件から作成していきます。

    cy.visit("https://appswingby.com/");

cypressのサンプルにもあったcy.visit()という遷移コマンドでテストを行う画面まで遷移を行います。

次に手順です

   cy.contains("a", "ソリューション").click();

こちらでは、cy.contains()というコマンドを使用します、cy.contains()は特定のテキストを含む要素を検索できるcypressのコマンドとなります。
上記は「ソリューション」を含むaタグを検索し、クリックを行うというコードとなります。
同じ画面で「ソリューション」を含むaタグが複数ヒットしちゃった場合どうすればいいんだ？？と疑問を感じましたが、その場合は「要素の位置を指定する」や「ヒットした要素にインデックスを貼る」など様々な方法があるそうです。

最後に期待値です

cy.url().should("include", "https://appswingby.com/solution/");

cy.url()は、現在のURLを取得するcyコマンドです、そしてshould(“include”, “”)で取得したURLに指定した文字列が含まれているか検証を行います。

それでは全てのコードを繋げます。

describe("test spec", () => {
  it("test1", () => {
    cy.visit("https://appswingby.com/"); //条件
    cy.contains("a", "ソリューション").click(); //手順

    cy.url().should("include", "https://appswingby.com/solution/"); //期待値
  });
});

作成したテストの実施

では、作成したテストを実施してみましょう。

テストの正常終了を確認しました、これにてボタンによる遷移テストの作成完了です！