无法使用 selenium java 输入信用卡号

Question

无法使用 selenium java 输入信用卡号。需要有关 iFrame 中元素的 xpath 识别方面的帮助

<div class="stripe-payments-elements no-wrap">
    <div id="stripe-payments-card-number" class="stripe-elements-field StripeElement StripeElement--empty">
        <div class="__PrivateStripeElement"
            style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;">
            <iframe name="__privateStripeFrame2445" frameborder="0" allowtransparency="true" scrolling="no"
                allow="payment *"
                src="https://js.stripe.com/v3/elements-inner-card-89f740fc0e6722810574102caaa6bdc1.html#locale=en&amp;wait=false&amp;style[base][fontSize]=16px&amp;rtl=false&amp;componentName=cardNumber&amp;keyMode=test&amp;apiKey=pk_test_B9tz7MWYrP8hZdqKqXbP3HiI00ClIvASDq&amp;referrer=https%3A%2F%2Fstaging1.beyourlabel.com%2Fcheckout%2F%23payment&amp;controllerId=__privateStripeController2441"
                title="Secure card number input frame"
                style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; will-change: transform !important; height: 19.2px;"></iframe>
            <input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false"
                maxlength="1"
                style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: -1px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;">
        </div>
    </div>

WebDriverWait wait4 = new WebDriverWait(driver,50);
WebElement cardNum = wait4.until(
    ExpectedConditions.elementToBeClickable(
        By.xpath("//div[@id='stripe-payments-card-number']")));
((JavascriptExecutor) driver).executeScript(
    "arguments[0].scrollIntoView(true);", 
    cardNum);
cardNum.sendKeys("4242424242424242");

我可以识别出该元素位于iframe 中。由于我是 selenium java 新手，请您帮我编写 selenium java 代码以发送包括 xpath 标识的卡号？

Answer 1

切换到 iframe 后，您需要将信用卡发送到输入字段。有几种方法可以构建 xpath，例如：

            //v1 by containing name, probably the safest option
            WebElement iframe_by_name_contains = driver.findElement(By.xpath("//iframe[contains(@name,'__privateStripeFrame')]"));
            driver.switchTo().frame(iframe_by_name_contains);
            
            //v2 by name - might not be goood if the 2445 is dynamic
            WebElement iframe_by_name = driver.findElement(By.xpath("//iframe[@name='__privateStripeFrame2445']"));
            driver.switchTo().frame(iframe_by_name);
    
            //by title - might not be good in case that there are locales and the title is translated
            WebElement iframe_by_title = driver.findElement(By.xpath("//iframe[@title='Secure card number input frame']"));
            driver.switchTo().frame(iframe_by_title);
    
            //get input field
            driver.findElement(By.name("cardnumber")).sendKeys("4242424242424242");

对于月/年和 CVC

  driver.switchTo().defaultContent();

  WebElement iframe_by_title_mm_yy = driver.findElement(By.xpath("//iframe[@title='Secure expiration date input frame']"));
  driver.switchTo().frame(iframe_by_title_mm_yy);

  driver.findElement(By.name("exp-date")).sendKeys("03/24");

  driver.switchTo().defaultContent();

  WebElement iframe_by_title_cvc = driver.findElement(By.xpath("//iframe[@title='Secure CVC input frame']"));
  driver.switchTo().frame(iframe_by_title_cvc);

  driver.findElement(By.name("cvc")).sendKeys("123");