CodeceptJSとPuppeteerでE2Eテスト（AutoLogin）

初めに

前回の記事の続きです。
今回はAutoLoginの機能を触ってみました。

公式の通りにやろうとしてうまく動かず、他サイトを参考にコードを書きました。
fetchなどいろいろと理解が怪しいですが、できたところまでまとめていきます。

AutoLogin

AutoLoginというプラグインがCodeceptJSにはあり、Cookieをメモリまたはファイルに保存することで自動的に再度ログインすることができます。

コードを書く

インストールは前回記事と同様です。
追加でcodecept.conf.jsへの追記をすることで自動ログインさせることができます。

//codecept.conf.js

plugins: {

    //ここから追記
    autoLogin: {
      enabled: true,
      saveToFile: true, 
      inject: 'login',
      users: {
        user: {
          //Cookieを設定
          restore: (I, cookie) => {
            I.amOnPage('URL')
            I.setCookie(cookie)
          },
          //ユーザーがログインしていることを確認
          //例えばログイン時のみ表示されるものの確認など
          check: (I) => {
            I.amOnPage('URL')
            I.waitForElement('要素指定')
          },
          //checkでログイン状態でないと判定された場合は再度ログインする
          login: (I) => {
            I.amOnPage('URL')
            I.fillField('ユーザー名', 'ダミー')
            I.fillField('パスワード', 'ダミー')
            I.click(''要素指定')
            I.waitForElement(''要素指定')
          },
        },
      },
    },

  },

・saveToFile（デフォルト：false）：Cookieをファイルに保存
・inject（デフォルト：login）：使用するログイン関数の名前
・login：システムにサインイン
・check：ユーザーがログインしていることを確認
・restore：Cookieを設定

restoreが実行された後、checkによりログインしていることを確認します。
これらが失敗した場合、loginが実行されてログインします。
fetchの使い方がまだ分かりません……

login時にwaitForElementで完全にログインさせることがポイントのようです。
参考）こちらのサイト

また、codecept.conf.jsに複数ユーザーの設定を書くことも可能です。
詳しくは公式サイトへ

あとはテストコードを書きます

Feature('自動ログイン')

Scenario('サイトにログイン', async({ I, login }) =>{
  login('user')
  I.see('要素指定')
})

Scenario('サイトにログイン、二回目', async({ I, login }) =>{
  login('user')
  I.see('要素指定')
　I.fillField('検索:', 'ダミー')
  I.pressKey('Enter');
})

公式サイトにはBeforeを使った方法で記載がありましたがうまく動かせず、こちらのサイトを参考に書きました。

codecept.conf.jsでuserという名前で設定した情報を使ってログインしています。

前回同様、バージョンによって書き方が違うことに注意↓ （戒め）

async({ I, login })

これで実行すると、最初はログインするための情報を入力する動きが見られますが
二回目からは自動でログインして進んでいきます。

実行が終わるとoutputフォルダにuser_session.jsonのファイルが増えていると思います。
ここにuserのCookieが保存されています。

codecept.conf.jsで複数の情報を記載した場合、その分だけファイルが作られるはずです。
↓の場合user_session.jsonとtest_session.jsonのファイルができます。

//codecept.conf.js
users: {
        user: {
          //省略
        },
        test: {
          //省略
        },
      },

終わり

公式サイトとしばらく睨めっこしてましたが参考サイトのおかげでなんとか動かせました。
ファイルに保存して使いまわせるのは便利ですし、テストコードが短いのも有難いです。

参考