Get HTML element generated from JavaScript

Question

I have this input field generated by JavaScript

<input class="postal-code form-text required form-control" autocomplete="postal-code" data-drupal-selector="edit-field-client-address-0-address-postal-code" type="text" id="edit-field-client-address-0-address-postal-code--bwzakXWpxR0" name="field_client_address[0][address][postal_code]" value="" size="10" maxlength="128" required="required" aria-required="true">

As you can see every time the id String is different: id="edit-field-client-address-0-address-postal-code--bwzakXWpxR0"

What is the proper way to locate this id using Selenium?

You can give a try with class attribute – Ashok kumar Ganesan Sep 12 '19 at 23:45 — Ashok kumar Ganesan, Sep 12 '19 at 23:45
Can you give me example please? – Peter Penzov Sep 12 '19 at 23:48 — Peter Penzov, Sep 12 '19 at 23:48

score 1 · Answer 1 · answered Sep 13 '19 at 00:13

1

you can try using the following

driver.findElement(By.className("postal-code")).sendKeys("your value");

answered Sep 13 '19 at 00:13

Arun Nair

425
3
11

Ashok kumar Ganesan · Answer 2 · 2019-09-13T00:42:27.663

0

You can try with other locators if the id is dynamic.

CSS Selector:

driver.findElement(By.cssSelector(input[data-drupal-selector='edit-field-client-address-0-address-postal-code'])).sendKeys("your value");

edited Sep 13 '19 at 00:42

answered Sep 12 '19 at 23:58

Ashok kumar Ganesan

1,098
5
20
48

1

That won't work because `By.className()` accepts only a single class name and you've passed in 4. – JeffC Sep 13 '19 at 00:23
Agree, haven't noticed the spaces properly and modified now. – Ashok kumar Ganesan Sep 13 '19 at 00:43

score 0 · Answer 3 · answered Sep 13 '19 at 00:26

There are a LOT of attributes that seem to be unique. Have you tried any of them? Potential CSS selectors

input[autocomplete='postal-code']
input[data-drupal-selector='edit-field-client-address-0-address-postal-code']
input[name='field_client_address[0][address][postal_code]']

or you can try ID starts with, e.g.

input[id^='id="edit-field-client-address-0-address-postal-code--']

score 0 · Answer 4 · answered Sep 13 '19 at 11:13

As the desired element is an <input> element so moving next you would either invoke click() or sendKeys(), so to locate the element you need to use elementToBeClickable() and you can use either of the following Locator Strategies:

cssSelector:

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.postal-code[id*='address-postal-code'][name^='field_client_address']")));

xpath:

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='postal-code form-text required form-control' and contains(@id, 'address-postal-code')][starts-with(@name, 'field_client_address')]")));

Get HTML element generated from JavaScript

4 Answers4