Behat-如何在条带订单结帐表单上测试信用卡号？

Question

我使用Behat with 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

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

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

Answer 2

这里有两件事：

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

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

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));
    }
}