はじめに
Cypressに環境変数を定義する際は、cypress.env.json
に記述し、Cypress.env()
で取得可能ですが、E2Eテストで使用するログイン情報をGithubに公開したくなかった。CircleCIでも同じログイン情報でE2Eテストを実行できるよう、環境変数をCircleCIに追加し、Cypressで取得できるようにしていきます。
カスタムコマンドの追加
ログイン処理は各specファイルで必ず使用するので、使い回しが出来るようにカスタムコマンドを追加していきます。
support/commands.js
Cypress.Commands.add('login', () => {
cy.get('body').contains('ログイン');
cy.get('[data-cy=email-input]').type(Cypress.env('EMAIL'));
cy.get('[data-cy=password-input]').type(Cypress.env('PASSWORD'));
cy.get('[data-cy=login-button]').click();
});
Custom Commands | Cypress Documentation
実際にspecファイルで使う場合は、cy.login()
と記述することでログイン処理が実行できます。
context('Login Test', () => {
before(() => {
cy.visit('/login');
cy.login();
});
})
Cypressのenvファイル作成
ローカルでE2Eテストを実行できるよう、ログイン情報をcypress.env.json
に記述し、.gitignoreにenvファイルを追加します。
{
"EMAIL": "test@example.com",
"PASSWORD": "test1111"
}
これでローカルでCypressを実行した際、envファイルのemailとpasswordを用いてログイン処理を行ってくれます。
Cypressに環境変数追加
Githubにはenvファイルを公開していないので、CircleCIでCypressを実行する際は別途環境変数を追加する必要があります。
CircleCIに環境変数は、Project Settings > Environment Variables > Add Environment Variable で追加することができます。CYPRESS_ プレフィックスをつけた環境変数を定義することで、Cypress.env()
で呼び出すことが可能です。