在 Mink 中测试 Stripe.js 时信用卡号出现乱码答案

【问题标题】：Credit card number is garbled when testing Stripe.js in Mink在 Mink 中测试 Stripe.js 时信用卡号出现乱码
【发布时间】：2020-09-12 17:16:59
【问题描述】：

我正在尝试使用 Behat/Mink 在我的 Drupal 网站上测试 Stripe。

我配置了一个 Stripe 测试支付网关。我的

我的FeatureContext.php 看起来像这样：

  /**
   * @Then I enter my US JCB credit card info
   */
  public function iEnterMyUsJcbCreditCardInfo() {
    $this->enterCardDetails('3566 0020 2036 0505', '11 / 21', '777');
  }

  private function enterCardDetails($card_number, $exp_date, $cvc) {
    $this->getSession()->wait(2000);
    // Switch to the payment iframe.
    $this->getSession()->switchToIFrame(self::STRIPE_CARDNO_IFRAME);
    $this->getSession()->wait(1000);
    $this->fillField('cardnumber', "$card_number");
    $this->getSession()->wait(2000);

我添加了wait()，因为信用卡号填写不正确。

例如，当我有步骤And I enter my US JCB credit card info 时，我得到的不是正确的测试卡号 (3566 0020 2036 0505)，而是：3566 0000 3605 5022。

错误的卡号不一致；当我重新运行 3 次测试时，我得到了这些数字：

3566 0022 3005 5600
3566 0002 0360 5502
3566 0006 5500 3220

因此，stripe.js 似乎干扰了我的信用卡号输入。

信用卡有效期和CVC/安全码输入没有这个问题。

当我把信用卡号中的空格去掉后，我仍然有同样的问题（输入时数字随机乱码）。

即使我将输入卡号前后的等待时间分别设置为5秒，卡号仍然会出现乱码。

如何在behat/mink中输入信用卡号而不乱码？

【问题讨论】：

标签： testing stripe-payments behat mink

【解决方案1】：

我对 behat 或 mink 一无所知，但我建议您删除空格；这些看起来都包含相同的数字，只是顺序不同，因此空格可能会导致问题，因为光标可能会移动一点。

【讨论】：

正如我的问题中所述：“当我消除信用卡号中的空格时，我仍然遇到同样的问题（输入时数字随机乱码）。”
啊，好的。看起来它输入值的方式与 Elements 期望它们的方式不一致，但我不确定在这里建议什么。 :(
是的，有问题，只有卡号字段。我已经运行了数百次测试，但从未在过期或 CVC 字段中发现问题，也从未在 Drupal 中测试的 100 多个字段中的任何一个字段中发现问题。
我认为这可能会发生，因为 Elements 字段每四个数字添加一个空格，这会导致问题 - cvc 和 expires 字段不这样做。有没有办法模拟整个字符串值的粘贴，而不是模拟输入？

【解决方案2】：

总结：你必须一次输入一个数字的信用卡号，因为如果你尝试一次输入，Stripe.js 会搞砸间距。

这是我过去几周一直在使用的相关代码：

  // Handle randomized iframe numbers by targeting the div above them.
  const STRIPE_CARDNO_IFRAME = 'card-number-element';
  const STRIPE_EXP_IFRAME = 'expiration-element';
  const STRIPE_CVC_IFRAME = 'security-code-element';

  /**
   * @Then I enter my credit card number :cc_number
   */
  public function iEnterMyCreditCardNumber($cc_number) {
    $payment_errors_element = $this->getSession()->getPage()->find('css', 'div#payment-errors');
    if ($payment_errors_element->getText()) {
      throw new Exception($payment_errors_element->getText());
    }
    echo "Test credit card number: $cc_number\n";
    $this->switchToMyIframe(self::STRIPE_CARDNO_IFRAME);
    $this->getSession()->wait(5000);
    $credit_card_field = $this->getSession()->getPage()->findField('cardnumber');
    $cc_number_nospaces = str_replace(' ', '', "$cc_number");
    $creditcard_singledigits = str_split("$cc_number_nospaces", 1);

    foreach ($creditcard_singledigits as $creditcard_singledigit) {
      $this->getSession()->wait(2000);
      $credit_card_field->sendKeys("$creditcard_singledigit");
    }
    // Take a screenshot for debugging when the card number is entered incorrectly.
    $this->saveScreenshot();
    $this->getSession()->switchToIFrame(null);
  }

  /*
   * Helper function to find the iframe.
   */
  private function switchToMyIframe($selector) {
    $iframe_selector = "div#$selector iframe";
    $iframe = $this->getSession()->getPage()->find('css', $iframe_selector);
    $iframe_name = $iframe->getAttribute('name');
    echo "Switching to iframe $iframe_name\n";
    $this->getSession()->switchToIFrame("$iframe_name");
  }

【讨论】：