Selenium Automation: How to find element to send text

Question

I would like to automate a test in Microsoft Redeem Code page

https://account.microsoft.com/billing/redeem

I tried to enter value by below code:

driver.findElement(By.id("tokenString")).sendKeys("GXXFV-CPMKR-VQVFV-2CCFD-J47GZ");

Inspect element showing:

<input aria-label="Enter 25-character code" name="tokenString" type="text" autocomplete="off" spellcheck="true" placeholder="Enter 25-character code" maxlength="tokenLength" autofocus="" autocorrect="off" autocapitalize="off" id="tokenString" class="ember-text-field ember-view">

I tried lot of ways nothing worked out , Spent 4 hrs cant figure out please correct my code Environment:

• Eclipse IDE - Java - Selenium latest

• Mac OS - Chrome

Correct Code to find element.

Answer 1

The desired element is a Ember.js enabled element, so to click() on the element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.ember-text-field.ember-view#tokenString[name='tokenString']"))).sendKeys("GXXFV-CPMKR-VQVFV-2CCFD-J47GZ");
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='ember-text-field ember-view' and @id='tokenString'][@name='tokenString']"))).sendKeys("GXXFV-CPMKR-VQVFV-2CCFD-J47GZ");
  

---

Update

Checkout the following line of code:

• cssSelector:

  new WebDriverWait(driver, Duration.ofSeconds(20)).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.ember-text-field.ember-view#tokenString[name='tokenString']"))).sendKeys("GXXFV-CPMKR-VQVFV-2CCFD-J47GZ");
  

• xpath:

  new WebDriverWait(driver, Duration.ofSeconds(20)).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='ember-text-field ember-view' and @id='tokenString'][@name='tokenString']"))).sendKeys("GXXFV-CPMKR-VQVFV-2CCFD-J47GZ");