2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Cypress】ログイン情報をCircleCIの環境変数に追加する

Posted at

はじめに

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()で呼び出すことが可能です。

FireShot_Capture_526_-Environment_Variables-enu-web-_app_circleci_com.jpg

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?