Cypressで認証テストの自動化を行う

自社開発サイトの認証周りのテストをCypressを使用して自動化する

テストケース

今回作成するテストケース
・ログインを実施する(正常系)
・ログアウトを実施する(正常系)
の2パターンを作成しようと思います

シナリオを考える

まず、ログインを実施する(正常系)から
条件：
・未ログイン状態であること
・ログイン画面が表示されていること
手順：
・メールアドレスを入力する
・パスワードを入力する
・ログインボタンをクリックする
期待値：
・ログイン後ページが表示されること
・ログイン済み状態であること

次に、ログアウトを実施する(正常系)です。
条件：
・ログイン済み状態であること
・ログイン済み画面が表示されていること
手順：
・ログアウトボタンをクリックする
期待値：
・ログアウト後ページが表示されること
・未ログイン状態であること

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

それでは、作成したシナリオに沿ったテストを作成していきます。

ログインを実施する(正常系)

条件：
・未ログイン状態であること
今回テストを行うwebアプリケーションの認証方法はセッションベース認証の為、「未ログイン状態であること」を「cookieがクリアされていること」というように言い換え、記載していきます。
Cypressはテスト実行タイミングにてcookieはクリアされるようなのですが、念の為行っておきましょう

cy.clearCookie("cookie");
cy.reload(); //念の為ページをリロード

次に
・ログイン画面が表示されていること
こちらを記載します。
ルートURLは環境変数化を行っているので、こちらを編集しログイン画面のURLとします。
環境変数に関してはこちら

  const baseUrl = Cypress.config("baseUrl");  //環境変数で設定
  const path = "/login";
  const fullUrl = baseUrl + path;

  cy.visit(fullUrl);

これで条件は設定完了です。

手順：
・メールアドレスを入力する
・パスワードを入力する
・ログインボタンをクリックする
上記を記載していきます、メールアドレス、パスワードはplaceholderから検索し、環境変数に設定した値をを入力するようにします。

    cy.get('[placeholder="info@examlpe.jp"]').type(Cypress.config("email"));
    cy.get('[placeholder="半角英数字8文字以上"]').type(Cypress.config("password"));
    cy.get("button").contains("ログイン").click();

期待値：
・ログアウト後ページが表示されること
・未ログイン状態であること
上記を記載していきます、「ログイン済み状態であること」を「Cookieに”session”が存在すること」に置き換えます

    cy.url().should("include", "/jp/home");
    cy.getCookie("session").should("exist");

それでは、条件、手順、期待値を繋げてみます。

//条件
cy.clearCookie("cookie");
cy.reload(); 
const baseUrl = Cypress.config("baseUrl");
const path = "/login";
const fullUrl = baseUrl + path;
cy.visit(fullUrl);
//手順
cy.get('[placeholder="info@examlpe.jp"]').type(Cypress.config("email"));
cy.get('[placeholder="半角英数字8文字以上"]').type(Cypress.config("password"));
cy.get("button").contains("ログイン").click();
//期待値
 cy.url().should("include", "/jp/home");
 cy.getCookie("session").should("exist");

これでログインに関するテストはできました。
次にログアウトのテストを作成します。

ログアウトを実施する(正常系)

条件：
・ログイン済み状態であること
・ログイン済み画面が表示されていること
こちらは先ほど作成したログインのテストコードを使用します。
あと、このタイミングで、ログイン後(ログイン可能な)のセッションIDを取得しておきます

cy.clearCookie("cookie");
cy.reload();
cy.visit(fullUrl);
cy.get('[placeholder="info@examlpe.jp"]').type(Cypress.config("email"));
cy.get('[placeholder="半角英数字8文字以上"]').type(
  Cypress.config("password")
);
cy.get("button").contains("ログイン").click();
cy.url().should("include", "/jp/home");

cy.getCookie("session").then((loginCookie) => {
      const loginSessionValue = loginCookie.value;
});　//ログイン後ののセッションIDを取得

手順：
・ログアウトボタンをクリックする
上記を記載します。

    cy.get("p").contains("ログアウト").click();

期待値：
・ログアウト後ページが表示されること
・未ログイン状態であること
上記を記載していきます、「未ログイン状態であること」を「ログイン中のセッションIDと現在のセッションIDが相違していること」に置き換えます

cy.url().should("include", "/jp/logout");
cy.getCookie("session").then((logoutcookie) => {
  const logoutSessionValue = logoutcookie.value;
  expect(logoutSessionValue).to.not.equal(loginSessionValue);
});

それでは、条件、手順、期待値を繋げてみます。

//条件
cy.clearCookie("cookie");
cy.reload();
cy.visit(fullUrl);
cy.get('[placeholder="info@examlpe.jp"]').type(Cypress.config("email"));
cy.get('[placeholder="半角英数字8文字以上"]').type(
  Cypress.config("password")
);
cy.get("button").contains("ログイン").click();
cy.url().should("include", "/jp/home");
cy.getCookie("session").then((loginCookie) => {
      const loginSessionValue = loginCookie.value;
     //手順
    cy.get("p").contains("ログアウト").click();
    //期待値
    cy.url().should("include", "/jp/logout");
    cy.getCookie("session").then((logoutcookie) => {
      const logoutSessionValue = logoutcookie.value;
      expect(logoutSessionValue).to.not.equal(loginSessionValue);
  });
});

これでログアウトに関するテストも完了です。