Question

我使用 Stripe 付款，使用 angular e2e 进行测试。我想将卡测试数据添加到付款窗口中。 Stripe 注入了一个 iframe，包括。将表单元素转换为#card-element（这是我的标记的一部分），但没有表单名称和 ID。这是 Stripe 注入支付容器后标记的一部分：

<div id="card-element" class="StripeElement StripeElement--empty">
 <div class="__PrivateStripeElement">
  <iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame5395" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-xxx.html" ></iframe>
 </div>
</div>

iframe 内部是（仍然只显示部分标记）：

<form class="ElementsApp is-empty" dir="ltr">
 <div tabindex="-1" class="CardNumberField CardNumberField--ltr">
  <div class="CardNumberField-input-wrapper">
   <input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" type="text" name="cardnumber" data-elements-stable-field-name="cardNumber" inputmode="numeric" aria-label="Kredit- eller debetkortnummer" placeholder="Kortnummer" aria-invalid="false" value="">
  </div>
 </div>
 <button tabindex="-1" aria-hidden="true" type="submit"></button>
</form>

// 来自检查器的完整选择器： //#root > form > div > div.CardField-input-wrapper.is-ready-to-slide > span.CardField-number.CardField-child > span:nth-child(2) > div > div.CardNumberField-输入包装器 > 跨度 > 输入

我设法选择了卡片元素和 iframe：

var cont = document.getElementById('card-element');
console.log(cont); // i get the card-element markup
var iframe = cont.getElementsByTagName('iframe');
console.log(iframe);

iframe 在控制台中显示：

HTMLCollection []
0: iframe
length: 1
__privateStripeFrame3085: iframe
__proto__: HTMLCollection

从这里我有点卡住了，我在 iframe[0] 数组中四处点击，但我在列表中找不到 name="cardnumber"，搜索它给了我 15 个点击，但是数据集没有打开，所以仍然卡住。 CardNumberField-input-wrapper 只提供 3 次点击，但同样的问题，没有打开...

所以我的问题是，我如何设法将数据填充到名为“cardnumber”的输入字段中？

顺便说一句：我也知道跨域问题，但我还没有遇到这些（还）并且不确定我是否会因为 iframe 是从 Stripe 注入的。

Answer 1

简短的回答是你不能，设计使然。出于安全原因，跨域 iframe 不能让 JavaScript 访问其内容。 Stripe 使用它来确保没有人可以访问 iframe 中包含的敏感信息（例如信用卡号）。

这样做的双重目的是保护您的用户以及将您的 PCI 合规性级别保持在最低水平。

如果您尝试自动化端到端测试，这确实会让事情变得棘手。幸运的是，有像 Cypress 这样的工具可以解决这个问题。这是一篇关于如何使用 Cypress 测试条纹元素的好文章：https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b

Answer 2

从安装到成功测试，我在不到 3 小时的时间内根据这篇文章使用 Cypress 制作了一个针对 Stripes iframe 卡元素解决方案的有效测试用例：https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b 我不得不进行一些修改，这里提到了这些： Cypress: automatic tests for credit card payment

原帖的想法是使用 vanillaJS 实现相同的目标，所以你不能说它已经解决了。但我想说的是，与使用 Cypress 相比，我确实花了更长的时间来尝试使用 vanillaJS 寻找解决方案，因为 Cypress 易于使用，所以如果您处于相同的情况，请试一试:-)

使用 Javascript 填写 iframe 中的输入字段

2 个答案: