Unable to fill the card details for Payments using Selenium at the merchant's checkout page

Question

I have just started learning Selenium web automation tool and wanted to auto-fill the card details on the merchant's Payment Page but unable to do so using Selenium. Below are the things which I tried. Even if there is a unique xpath found through chrome inspect tool, but when tried to find the element using

webDriver.findElement(By.xpath(xpath));

Sometimes exception will come stating unable to locate the element. I have also used JavascriptExecutor. The behaviour I found with Javascript executor is: for a particular merchant's checkout Page, I was able to enter the 16 digit card number through JavascriptExecutor but unable to input expiry date and other details of the card and also no execption was thrown by the JavascriptExecutor. this is the code I have written for the same for reaching to the checkout page and then entering the card details package testing;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class autofillCardDetails{
public static void main(String[] args) {
    // TODO Auto-generated method stub
    String URL="merchantURL";
    String mobileFieldXpath="//input[@placeholder='Mobile Number/ Email']";
    
    String email="email-id-here";
    
    String continueXpath="//button[@class='btn col-xs-24 btn-large btn-skyblue continueBtn marT20 marB30']";
    
    String passwordXpath="//input[@id='j_password_login_uc']";
    String password="password here";
    String loginButtonXpath="//button[@id='submitLoginUC']";
    
    String cartXpath="//div[@class='cartInner']";
    
    String proceedToPayXpath="//input[@type='button']";
    
    String paymentButtonXpath="//button[@id='make-payment']";
    
    String cvvXpath="//input[@class='storedcard-cvv-input'][@placeholder='Enter CVV']";
    
    
    String finalPaymentButtonXpath="//button[@id='creditcard-continue']";
    
    String debitCardClick="//div[@data-paymentmode='dc']";
    
    String cardNumberXpath="//input[@class='card_number change_card_fill valid']";
    
    String cardnumber="16 digit card number without any space here";
    
    
    WebDriver webDriver=null;
    System.setProperty("webdriver.chrome.driver",
            "path to chrome driver\\chromedriver.exe");
    webDriver=new ChromeDriver(); 
    openpage(webDriver,URL);
    sleeptime(5);
    
//  .giveinput(webDriver, xpath_searchBar, searchItem);
    jsInput(webDriver, mobileFieldXpath, email);
    sleeptime(1);
    jsClick(webDriver, continueXpath);
    sleeptime(5);

    jsInput(webDriver, passwordXpath, password);
    jsClick(webDriver, loginButtonXpath);
    
    sleeptime(15);
    jsClick(webDriver, cartXpath);
    sleeptime(5);
    //Now we need to click on the  proceed to Pay so that we can go to card details page.
    
    jsClick(webDriver, proceedToPayXpath);
    sleeptime(5);
    
    jsClick(webDriver, paymentButtonXpath);
    sleeptime(5);

    jsClick(webDriver, debitCardClick);
    sleeptime(3);
    jsInput(webDriver, cardNumberXpath, cardnumber);
    
    /*if(.checkElementFound(webDriver, cvvXpath))
        .sleeptime(1);
    .jsClick(webDriver, finalPaymentButtonXpath);
    //String OTP=.giveOTP(webDriver);*/
    //.submitOTP(OTP);
    sleeptime(10);
    webDriver.quit();
}

private static void multipleElementsSelectOne(WebDriver webDriver, String xpath, String value) {
    // TODO Auto-generated method stub
    WebElement webElement= webDriver.findElements(By.xpath(xpath)).get(0);
    webElement.sendKeys(value);
//JavascriptExecutor javaScriptExecutor = (JavascriptExecutor)webDriver;
    //  javaScriptExecutor.executeScript("arguments[0].click()", webElement);       
    
}

public static void clickButton(WebDriver webDriver, String payuURL) {
    // TODO Auto-generated method stub
    webDriver.findElement(By.xpath(payuURL)).click();
}

public static void openpage(WebDriver webDriver, String URL) {
    // TODO Auto-generated method stub
    webDriver.get(URL);
}

public static void giveinput(WebDriver webDriver, String xpath, String value) {
    // TODO Auto-generated method stub
    webDriver.findElement(By.xpath(xpath)).sendKeys(value);
}

public static void sleeptime(int i) {
    // TODO Auto-generated method stub
    try {
        Thread.sleep(i*1000);
    } catch (InterruptedException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

public static void sendkeysJS(WebDriver webDriver, WebElement webElement, String value) {
    // TODO Auto-generated method stub
     JavascriptExecutor javaScriptExecutor = (JavascriptExecutor)webDriver;
     javaScriptExecutor.executeScript("arguments[0].value='"+value+"';", webElement);   

    
}

public static void jsInput(WebDriver webDriver, String xpath,String value) {
    // TODO Auto-generated method stub
    System.out.println("inside js for:"+xpath);
    WebElement webElement= webDriver.findElement(By.xpath(xpath));
    sendkeysJS(webDriver,webElement,value);

}

public static void jsClick(WebDriver webDriver, String xpath) {
    // TODO Auto-generated method stub
    WebElement webElement= webDriver.findElement(By.xpath(xpath));
     JavascriptExecutor javaScriptExecutor = (JavascriptExecutor)webDriver;
     javaScriptExecutor.executeScript("arguments[0].click()", webElement);      
}


}

Is it possible that I can fill the card details on the checkout page with the help of the script written using Selenium Webdriver?

Edit: This is the corresponding HTML file : https://drive.google.com/file/d/1rMR3aDnBhiW06TESsV_PbzCoB8Yn3XUL/view?usp=sharing

Answer 1

Based on the HTML, I would say that the problem you are having is that the page shows and hides fields based on where you are in the checkout process. Because of this, you should probably be using conditional waits - Wait.Until(ExpectedConditions.ElementExists(By.Xpath(yourxpath))); (Do not use my code - I'm familiar with C# so my examples follow C# syntax, and are more pseudocode than actual code). You would want to wait until the element exists and the element is visible.

Alternatively, you could use WebDriverWait, which would give you more control over the individual call (I'm not entirely sure how the syntax works in Java - C#-ish example below)

wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); //sets the maximum wait time to 10 seconds
wait.Until(driver => driver.FindElement(By.XPath(myxpath))); // will wait 10 seconds or until the element is found

You might also want to consider adjusting your search selectors - it's possible that the XPath you are using is missing a space or there is another factor that you've missed, given the dynamic nature of the page. It's also possible that the class changes when the fields are displayed compared to when they are not displayed.

For debug purposes, I'd suggest writing driver.PageSource to the console. It's a lot to search through, but logging the page source just before you try to find your target field will let you know if the page you think your code is looking at matches the page your code is actually looking at.

It will take time, a lot of tweaking, and a fair amount of persistence to track down a locator and method that works all the time, but it's doable.