Behat-如何在 Stripe 订单结账表上测试信用卡号？

Question

我正在使用 Behat 和 Mink 和 Drupal 扩展来测试我的 Drupal 8 网站。我已经在 Docker 上的 Selenium 服务器上运行了测试，所以我可以观察它们的发生情况。

我的测试非常简单，只需填写表格并确保结果符合预期，如下所示：

And I fill in "Sesame Street" for "Street address"
And I fill in "FamilyName" for "Last name"

但是，我无法让它与信用卡字段一起使用。这是我到目前为止所尝试的。

And I fill in "4242424242424242" for "The card number"
And I fill in "4242424242424242" for "edit-payment-information-add-payment-method-payment-details-card-number"
And I fill in "4242424242424242" for "card-number-element"

所有这些都给出相同的错误：

 Form field with id|name|label|value|placeholder "The card number" not found. (Behat\Mink\Exception\ElementNotFoundException)

注意：此测试站点配置为使用 Stripe 测试网关，我正在尝试使用测试信用卡号。任何真实的卡号都不会触及这个系统。

我认为这是因为信用卡支付是使用 Stripe 库处理的，并且它使用了某种我不熟悉的特殊 HTML 结构。这是下面的 HTML：

<div data-drupal-selector="edit-payment-information-add-payment-method" class="form-group js-form-wrapper form-wrapper" id="edit-payment-information-add-payment-method"><div class="stripe-form form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-payment-information-add-payment-method-payment-details" id="edit-payment-information-add-payment-method-payment-details"><div id="payment-errors"></div><input id="stripe_token" data-drupal-selector="edit-payment-information-add-payment-method-payment-details-stripe-token" type="hidden" name="payment_information[add_payment_method][payment_details][stripe_token]" value="" /><div id="edit-payment-information-add-payment-method-payment-details-card-number" class="form-item js-form-item form-type-item js-form-type-item form-item-payment-information-add-payment-method-payment-details-card-number js-form-item-payment-information-add-payment-method-payment-details-card-number form-group"><label class="js-form-required form-required control-label" for="edit-payment-information-add-payment-method-payment-details-card-number">The card number</label><div id="card-number-element" class="form-text"></div></div>

如何定位信用卡输入并使用 Behat 填写测试卡号？

编辑：即使我等待，我也会收到同样的错误：

And I wait 5 seconds

Answer 1

这里有两件事：

1. 条带字段在Iframe中，搜索包含条带字段的iFrame，切换到Iframe然后使用我之前填写的常规。

   1. 要使用带有 Stripe 字段的测试卡，您必须切换到 Stripe 测试模式： Stripe_test_mode

Answer 2

我可以在您提供的代码中看到的唯一输入字段是隐藏字段。所以我想您尝试访问的字段是在#card-number-element div 内动态生成的客户端。

在这种情况下，您需要确保浏览器已完成页面加载，然后才能检查这是否正常工作。 如果您使用自定义定义，您可以在上下文文件中使用 Mink 的会话 wait() 方法。或者，您可以在使用 selenium 进行测试时尝试使用不同的浏览器。

Answer 3

您好，您需要切换到条纹 iframe：

/**
 * @When /^I fill stripe credit card informations$/
 */
public function fillCreditCardInformations(int $card = 0)
{
     ...
     $this->switchToIFrame('iframe[name^="__privateStripeFrame"]');
     $this->fillField('cardnumber', self::CARDS[$card]);
     ...
}

/**
 * @Given /^I switch to iframe "([^"]*)"$/
 */
public function switchToIFrame(string $locator)
{
    $found = false;
    $selector = '/' === $locator[0] ? 'xpath' : 'css';
    $iframes = $this->getSession()->getPage()->findAll($selector, $locator);

    foreach ($iframes as $iframe) {
        try {
            if ($name = $iframe->getAttribute('name')) {
                $this->getSession()->getDriver()->switchToIFrame($name);
                $found = true;
                break;
            }
        } catch (Exception $e) {
            //ignoring
        }
    }

    if (!$found) {
        throw new InvalidArgumentException(sprintf('Could not evaluate CSS Selector: "%s"', $locator));
    }
}