使用 Selenium Webdriver 与 Stripe Card Element iFrame 交互 - Cucumber/Selenium Java答案

【问题标题】：Using Selenium Webdriver to interact with Stripe Card Element iFrame - Cucumber/Selenium Java使用 Selenium Webdriver 与 Stripe Card Element iFrame 交互 - Cucumber/Selenium Java
【发布时间】：2018-02-15 10:58:26
【问题描述】：

我有一个表单，我想在 Java 中使用 Cucumber 和 Selenium Webdriver 实现自动化——在这个表单中，我们有一个来自 Stripe 的卡片元素。我们调用 div，其余的由 stripe 完成。我不确定这是否是 iFrame，但是当我使用

Hooks.driver.findElement(By.xpath("xpathOfTheCardNumberField")).sendKeys("123");

命令，它不与之交互并在控制台日志中返回“无法定位元素”错误。

我已经要求我们的前端尝试在字段中添加一些 ID 或名称标签，但他告诉我他不能与卡片元素内的字段的标记交互，只能与卡片元素本身交互 -就像 Stripe 处理其他所有事情一样。

附件是卡片元素的图片，以及相关卡片元素的标记。

是否可以让 Selenium 与此元素交互？

非常感谢任何帮助。 Card element front end

Mark up for the card element

【问题讨论】：

标签： html iframe selenium-webdriver cucumber stripe-payments

【解决方案1】：

为了完整起见，对 Fabio 接受的答案进行了额外的跟进。

self.browser = webdriver.Chrome()

# fill in the other fields as usual (i.e. self.browser.find_element_by_id(...))

# When you arrive at the iframe for the card number, exp. date, CVC, and zip:
self.browser.switch_to.frame(frame_reference=self.browser.find_element(By.XPATH, '//iframe[@name="__privateStripeFrame3"]'))

# This switches to the iframe, which Selenium can now start selecting elements from.

# The remaining form elements can be found by name

self.browser.find_element_by_name('cardnumber').send_keys('4242 4242 4242 4242')

# And find the other elements the same way as above (exp-date, cvc, postal).
# Finally, switch back to the default content to select the submit button

self.browser.switch_to.default_content()
self.browser.find_element_by_tag_name('button').click()

【讨论】：

【解决方案2】：

实际上我自己已经弄清楚了，所以我将回答这个问题并将其关闭，以防其他人遇到问题。

我认为这是一种通用方法，可用于任何 iframe，而不仅仅是 Stripe。

首先，您必须告诉您的 webdriver 将帧切换到您尝试访问的 iframe：

Hooks.driver.switchTo().frame(Hooks.driver.findElement(By.xpath("xpathOfIframe")));

然后，您可以为该 iframe 中的事物创建 webElement，并与它们进行交互：

WebElement creditcardNumber = Hooks.driver.findElement(By.name("cardnumber"));
creditcardNumber.sendKeys("1234567890000066");

【讨论】：

【解决方案3】：

当前的 Stripe 配置将卡号、到期日期 (exp-date) 和 cvc 放在不同的 iframe 中。与以前不同，所有内容都在一个 iframe 中，并且上述解决方案有效。

我只需转移到一个 iframe 即可更新卡信息。然后 Stripe 的变化来了，前端开发者更新了支付网页。然后是到期日期和 cvc 的“无法定位元素...”错误。同样，我问开发人员是否可以为 3 个输入输入 ID 或名称。他说，他做不到，Stripe 会制作付款屏幕。

通常，当您在 Firefox 或 Chrome 中检查信用卡信息时，您会看到输入属于哪个 iframe。

在我们的网页中，卡号在 __privateStripeFrame5 中。 exp-date 在 __privateStripeFrame6 中，cvc 在 __privateStripeFrame7 中。

这是解决我在使用 selenium python 更新/测试卡信息时遇到的难题的代码（java 具有类似的方法/功能）：

# has_zip_code - True or False
# added params for flexibility
# exp_date     - expiration date
# cvc_val      - 3-digit number
def enter_card_details_and_submit(driver, card_num, exp_date, cvc_val, has_zip_code):

    #print("\n{} -------------------------------------------\n".format(PI_WIN))
    print("Use card number ... {}".format(card_num))
    print(card_num)
    driver.switch_to.frame(frame_reference=wait_and_get_elem_by(driver, By.NAME, "__privateStripeFrame5"))
    card_num_text = wait_and_get_elem_by(driver, By.NAME, "cardnumber")
    card_num_text.click()
    time.sleep(1)
    card_num_text.send_keys(card_num)
    driver.switch_to.default_content()

    print("\nEnter expiry month/year ...")
    iframe6 = wait_and_get_elem_by(driver, By.NAME, "__privateStripeFrame6")
    driver.switch_to.frame(iframe6)
    exp_dt = wait_and_get_elem_by(driver, By.NAME, "exp-date")
    exp_dt.click()
    time.sleep(1)
    exp_dt.send_keys(exp_date)
    driver.switch_to.default_content()

    print("\nEnter CVC ...")
    driver.switch_to.frame(frame_reference=wait_and_get_elem_by(driver, By.NAME, "__privateStripeFrame7"))
    cvc = wait_and_get_elem_by(driver, By.NAME, "cvc")
    cvc.click()
    time.sleep(1)
    cvc.send_keys(cvc_val)
    .
    .
    .

wait_and_get_elem_by() 是一个内部函数，用于查找元素，但其中包含 wait() 函数。您可以使用 find_element_by_name()。

使用 selenium (python) 更新卡号、exp-date 和 cvc：

【讨论】：

【解决方案4】：

对我来说，这现在有效。发现 Card 上的 Name 不是 iframe 必须是 chrome.webdriver 找到的

driver.switch_to.frame(frame_reference=driver.find_element(By.XPATH, '/html/body/div[1]/div/main[2]/section/div/div[2]/div/article/div/form/fieldset[3]/div[2]/div/div/div/iframe'))
creditNumber = driver.find_element_by_name("cardnumber").send_keys("4242 4242 4242 4242")
time.sleep(1)

driver.switch_to.default_content()

driver.switch_to.frame(frame_reference=driver.find_element(By.XPATH, '/html/body/div[1]/div/main[2]/section/div/div[2]/div/article/div/form/fieldset[3]/div[3]/div[2]/div[1]/div/div/iframe'))
expiryDate = driver.find_element_by_name("exp-date").send_keys("1223")

driver.switch_to.default_content()

driver.switch_to.frame(frame_reference=driver.find_element(By.XPATH, '/html/body/div[1]/div/main[2]/section/div/div[2]/div/article/div/form/fieldset[3]/div[3]/div[2]/div[2]/div/div/iframe'))
cvc = driver.find_element_by_name("cvc").send_keys("345")

driver.switch_to.default_content()
time.sleep(1)

nameOnCard = driver.find_element_by_name("name_on_card").send_keys("Testing")

【讨论】：