自動テスト

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

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

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

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

cypressでStripeの入力画面を自動で操作する方法まとめ

今回の記事では、cypressでStripeの入力画面を自動で操作する方法について解説しました。まとめると以下のようになります。

  • cypressでiframeの操作は難しい
  • Stripeの操作はcypress-plugin-stripe-elementsを使うと楽

cypressでテストを自動化して開発スピードを上げましょう!

当ブログでは、このようなITに関連する内容を発信しているので興味のある方は是非ご覧ください。

自動テストについてさらに詳しく知りたい方はこちらの参考書がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!

UdemyでIT講座をチェック!

  • セールだと1500円前後!
  • 無料サンプル講義動画・無料講義動画あり!
  • 気に入らなければ30日間返金保証!