cypressでStripeの入力画面を自動で操作する方法解説【iframeの自動操作を行う】

こんにちは、フルスタックのryuです。

今回の記事では、cypressでStripeの入力画面を自動で操作する方法について解説します。stripeの入力画面はiframeで実装されているので、cypressだといい感じに自動で操作できませんでした。その場合、cypress-plugin-stripe-elementsというモジュールを使ったら、簡単に自動テストができるようになりました。

※本ページには、プロモーション・アフィリエイトリンクが含まれています

cypressでStripeの入力画面を自動で操作する方法解説
- stripeの入力画面を簡単に操作するモジュール
- cypress-plugin-stripe-elementsを導入する
Stripeをcypressで操作するテストコード
cypressでStripeの入力画面を自動で操作する方法まとめ

cypressでStripeの入力画面を自動で操作する方法解説

今回の記事では、cypressでStripeの入力画面を自動で操作する方法について解説します。Stripeで決済機能を付けているシステムを自動テストする場合にやってみましょう！

cypressの導入方法や使い方については、こちらの記事で詳しく解説しています。

stripeの入力画面を簡単に操作するモジュール

stripeの入力画面はcypressで操作するのは難しいです。stripeはiframeで実装されており、cypressはiframeを操作することができないからです。

One of the limitations with using Cypress is about handling iframes. First of all, Cypress can’t access iframes directly.
サイプレスを使用しての制限の1つは、iframeの処理についてです。まず第一に、サイプレスはiframeに直接アクセスすることはできません。
引用:Testing Iframes with Cypress (mariedrake.com)

なので、iframeを操作する方法をいろいろと探していたら、stripeを操作するための便利なモジュールを見つけました。

そのモジュールが「cypress-plugin-stripe-elements」です。今回は、cypress-plugin-stripe-elementsを使ってstripeを操作してみようと思います。

cypress-plugin-stripe-elementsを導入する

では、早速cypress-plugin-stripe-elementsを導入してみましょう。インストールには、以下のコマンドを入力して下さい。

npm install --save-dev cypress-plugin-stripe-elements
# or
yarn add --dev cypress-plugin-stripe-elements

また、cypress.jsonファイルで、chromeのセキュリティを無効にしておきましょう。

{
　 "chromeWebSecurity": false 
}

stripeの入力画面は、stipeのドメインへ通信を行っています。テストするサイトと別のドメインの操作を行う際は、上記の設定を行いましょう。

詳しくは、こちらのドキュメントをご覧ください。

Web Security | Cypress Documentation

そして、モジュールをインポートするように設定ファイルに記述します。設定ファイルは、cypress/support/index.jsです。

import 'cypress-plugin-stripe-elements';

これで準備が完了です。実際にテストコードを記述してみましょう。

Stripeをcypressで操作するテストコード

Strpieを操作するためのソースコードは以下のようになります。

describe('payment form', () => {
  it('allows for a successful payment', () => {
　 //Webサイトへのアクセス
    cy.visit(`http://localhost:4000`);

　//ここからStripeの入力画面の操作
    cy.get('#card-element').within(() => {
      //カード番号の入力
      cy.fillElementsInput('cardNumber', '4242424242424242');
　　//有効期限の入力
      cy.fillElementsInput('cardExpiry', '1025'); 
　　//カードのセキュリティコードの入力
      cy.fillElementsInput('cardCvc', '123');
    });

これで実装は完了です。Stripeのテストで使用するクレジットカードの情報は、こちらのサイトに載っております。セキュリティコードと有効期限は任意の値で大丈夫です。

組み込みをテストする (stripe.com)

今回の記事は、こちらのGithubを参考にしております。

GitHub – dbalatero/cypress-plugin-stripe-elements: A small Cypress plugin that assists you in filling in Stripe Elements inputs