Unable to enter in dynamic textfield

Question

Trying to enter pin number in dynamic textfield. Pin number option get change each time once website loaded.

<input type="password" maxlength="1" class="input-pin input-validation-error" placeholder="3rd" id="txtPin_3" name="txtPin_3" required="" data-errormessage-value-missing="Please input PIN" data-errormessage-type-mismatch="Invalid!" autocomplete="off" style="width:50px;">
<input type="password" maxlength="1" class="input-pin" placeholder="2nd" id="txtPin_2" name="txtPin_2" required="" data-errormessage-value-missing="Please input PIN" data-errormessage-type-mismatch="Invalid!" autocomplete="off" style="width:50px;">
<input type="password" maxlength="1" class="input-pin" placeholder="1st" id="txtPin_1" name="txtPin_1" required="" data-errormessage-value-missing="Please input PIN" data-errormessage-type-mismatch="Invalid!" autocomplete="off" style="width:50px;">
<input type="password" maxlength="4" class="input-pin" placeholder="4th" id="txtPin_1" name="txtPin_4" required="" data-errormessage-value-missing="Please input PIN" data-errormessage-type-mismatch="Invalid!" autocomplete="off" style="width:50px;">

Update:

I tried below CSS selector and its not working.

WebElement Pin = driver.findElement(By.cssSelector("input[id*txtPin_1]"));
Pin.sendKeys("1");

WebElement Pin1 = driver.findElement(By.cssSelector("input[id*txtPin_2]"));
Pin1.sendKeys("2");

WebElement Pin2 = driver.findElement(By.cssSelector("input[id*txtPin_3]"));
Pin2.sendKeys("3");

WebElement Pin3 = driver.findElement(By.cssSelector("input[id*txtPin_4]"));
Pin3.sendKeys("4");

I need to enter only 3 pin numbers out of 4

Answer 1

As per your posted HTML, either you can try with indexes if its same type of field as below:

driver.findElement(By.cssSelector("div[class='field-set'] input.input-pin:nth-child(1)")).sendKeys("your value"); // for first text box

Change the index in csspath div[class='field-set'] input.input-pin:nth-child(index) as per textbox in page UI position.

Or use placeholder which is not dynamic.

div[class='field-set'] input[placeholder='1st']   // for first textbox
div[class='field-set'] input[placeholder='2nd']   // for second textbox

If you are not sure which textbox have to accept value then use below logic

public static void main(String[] args) {

   // first you need to store your testdata in a collection 

    Map<String,String> pinCodes = new HashMap<String, String>();
    pinCodes.put("pin1", "2");
    pinCodes.put("pin2", "3");
    pinCodes.put("pin3", "3");
    pinCodes.put("pin4", "4");

    // you can remove the values as per you need suppose you only want `pin1` `pin2` then remove  `pinCodes.put("pin3", "3");` and `pinCodes.put("pin4", "4");` from above code

    enterPinCode(pincodes); //call method to enter the values in corresponding text-boxes 
}

public void enterPinCode(Map<String,String> pinCodes) {

        for (Entry<String, String> entry : pinCodes.entrySet()) {
            String key = entry.getKey();
            String value = entry.getValue();

            switch (key) {
                case "pin1" :
                List<WebElement> box1 = driver.findElements(By.cssSelector("div[class='field-set'] input[placeholder='1st']"));
                if(!box1.isEmpty()) {
                    box1.get(0).sendKeys(value);
                }
                break;

                case "pin2" :
                List<WebElement> box2 = driver.findElements(By.cssSelector("div[class='field-set'] input[placeholder='2nd']"));
                if(!box2.isEmpty()) {
                    box2.get(0).sendKeys(value);
                }
                break;

                case "pin3" :
                List<WebElement> box3 = driver.findElements(By.cssSelector("div[class='field-set'] input[placeholder='3rd']"));
                if(!box3.isEmpty()) {
                    box3.get(0).sendKeys(value);
                }
                break;

                case "pin4" :
                List<WebElement> box4 = driver.findElements(By.cssSelector("div[class='field-set'] input[placeholder='4th']"));
                if(!box4.isEmpty()) {
                    box4.get(0).sendKeys(value);
                }
                break;

                default :
                System.out.println("pincode textbox key not found");
                break;
            }               
    }
}

This code will send the pin-code in corresponding pin-code textbox if available on webpage.

Answer 2

Use one of these css selectors:

input.input-pin

input[type=password]

input[id*=txtPin]

I recommend learning some basic css selectors rules.