Can't input text to field that is Visible and Enabled

[Sascha Linn]

Hi all,

I'm trying to do a pretty simple test... Input some info on a form and submit. I've got other form submission tests working just fine. But for some reason this one is choking.

The form itself is loaded in an iframe from Braintree. Here's my test so far:

  Payment Page Should Be Open  (PASSES)

  Wait Until Element is Visible  css=#bt-form > iframe  (PASSES)

  Select Frame  css=#bt-form > iframe  (PASSES)

  Locator Should Match X Times  credit-card-number  1  (PASSES)

  Input Credit Card  4111111111111111  (FAILS)

Input Credit Card

  [Arguments]  ${cc}

  Wait Until Element Is Enabled  id=credit-card-number  5 seconds

  Input Text  xpath=//*[@id="credit-card-number"]  ${cc}

It's that last part where I actually try to input text that fails. The error is: Element is not currently interactable and may not be manipulated

I can Focus the element (and see that reflected in the screenshot), but trying to input always give me the error.

Any ideas?

TIA

[mr]

Why don't you use the same locator for the last two keywords?

I mean:

Wait Until Element Is Enabled  id=credit-card-number  5 seconds

Input Text  id=credit-card-number  ${cc}

[Sascha Linn]

I've tried using multiple versions of the locator. Doesn't help.

[mr]

What is the element with id=credit-card-number exactly?

[Sascha Linn]

It's a std input field. I've included the form below. I think I've narrowed it down to something with PhantomJS. Though exactly what I can't say. When I run the same test but use the Chromedriver instead, it works just fine.

<div class="add-payment-method-form-view"><form action="#" method="post" class="grid card-form">

  <label class="card-label credit-card-number-label" for="credit-card-number">

    <span class="field-name">Card Number</span>

    <input id="credit-card-number" name="credit-card-number" class="card-field" type="tel" inputmode="numeric" placeholder="Card Number" autocomplete="off">

    <span class="payment-method-icon"></span>

    <div class="invalid-bottom-bar"></div>

  </label>

  <div class="row">

    <div class="column half">

      <label class="card-label expiration-label right-border" for="expiration">

        <span class="field-name">MM / YY</span>

        <input id="expiration" name="expiration" class="expiration card-field" type="tel" inputmode="numeric" placeholder="Expiration Date" autocomplete="off">

        <div class="invalid-bottom-bar"></div>

      </label>

    </div>

    <div class="column half">

      <label class="card-label cvv-label" for="cvv">

        <span class="field-name">CVV (3 digits)</span>

        <input id="cvv" name="cvv" class="cvv card-field" maxlength="3" type="tel" inputmode="numeric" placeholder="CVV" autocomplete="off" autocapitalize="off">

        <span class="payment-method-icon" id="undefined"></span>

        <div class="invalid-bottom-bar"></div>

      </label>

    </div>

  </div>

  <div class="row">

    <div class="column">

      <label class="card-label postal-code-label" for="postal-code">

        <span class="field-name">Postal Code</span>

        <input id="postal-code" name="postal-code" class="postal-code card-field" autocomplete="off" maxlength="8" placeholder="Postal Code" autofill="off" autocapitalize="off">

        <div class="invalid-bottom-bar"></div>

      </label>

    </div>

  </div>

</form>

<div class="server-error">

  <div class="server-error-message-container">

    <div class="server-error-message">

      <span class="error-icon"></span>There was an error processing your request. <a href="#" class="error-retry">Try again</a>

    </div>

  </div>

</div>

</div>

[mr]

Sorry, I have no experience with PhantomJS.

You should extend the topic of this posting with the word "PhantomJS"

[nnc]

the problem looks like you are trying to input Text instead of numeric for the field because the inputmode="numeric" in below line

 <input id="credit-card-number" name="credit-card-number" class="card-field" type="tel" inputmode="numeric" placeholder="Card Number" autocomplete="off">

and you are doing below which might be entering a string a value.

Input Text  xpath=//*[@id="credit-card-number"]  ${cc}

just a guess

[Sascha Linn]

Thanks. Though I'm fairly certain the inputmode only matters for which keyboard is used on mobile/tablet devices. Besides, Selenium only offers a "Input Text" keyword. There is no Input Numbers.

The search for answers continues...

Appreciate the responses so far though. 

[Cristian Romero]

Hi! 

I was experiencing the same problem with my tests for braintree and I managed to solve the problem by focusing the elements by javascript as follows

((JavascriptExecutor) driver).executeScript("document.getElementById('credit-card-number').focus()");

after the javascript call to focus the element, the sendKeys call to send the credit card information worked perfectly

sample code in java:

WebDriverWait wait = new WebDriverWait(driver, 10);

WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#credit-card-number")));

element = driver.findElement(By.cssSelector("#credit-card-number"));

Assert.assertTrue(element.isDisplayed());

((JavascriptExecutor) driver).executeScript("document.getElementById('credit-card-number').focus()");

element.sendKeys("4111111111111111");

I hope this helps to solve your issue, best regards!

CR