-2

Unable to input Credit card number using selenium java. Need help on xpath identification for the element located in iFrame

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

I could identify the element is in iframe. Since I am new to selenium java, could you please help me with writing selenium java code to send card number including xpath identification?

Connor Low
  • 5,900
  • 3
  • 31
  • 52
Kiruthika Manimozhi
  • 3
  • 3
  • For this iframe locator is needed. – vitaliis May 17 '21 at 16:01
  • See https://stackoverflow.com/questions/9942928/how-to-handle-iframe-in-selenium-webdriver-using-java – Siebe Jongebloed May 17 '21 at 16:23
  • Please take a minute to beautify your HTML so that it's more readable, e.g. using https://beautifytools.com/html-beautifier.php. – JeffC May 17 '21 at 18:51
  • You stated that, "I could identify the element is in `iframe`". According to your posted HTML, there are no elements inside the IFRAME. Is your HTML not correct? – JeffC May 17 '21 at 18:55

1 Answers1

0

You need to send the credit card to the input field after you switch to the iframe. There are several ways to build the xpath, like:

            //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");

For month/year and 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");
art_architect
  • 919
  • 6
  • 8