How to use ext-gen ID generated by EXTJS in Selenium?

Question

While test automating a web application, I get dynamically generated ext-gen IDs. I tried using xpath but the test cases are failing. I went through different websites but did not find any luck. Can somebody help me?

Thank you, Srinivas Marthi

You need to supply the page HTML and tell us what you are trying to do. — Ardesco, May 23 '11 at 10:17
Wouldn't you want to use xpath during testing automation, rather than id? Then you will never have an issue. — JustBeingHelpful, Sep 08 '14 at 21:05

score 1 · Answer 1 · answered Sep 02 '11 at 12:04

For automated testing, the auto-generated ID-s of ExtJS are best avoided altogether. You can assign your own static ID-s to components, but now you are basically littering your code with global variables, not good either. Using some ID-s might be a helpful compromise, but you don't want to assign an ID to every single little button.

For ExtJS 4 I suggest using the ComponentQuery:

Ext.ComponentQuery.query("panel[title='Orders'] button[text='Save']")

score 0 · Answer 2 · answered Feb 29 '20 at 23:42

As the value of the id attribute changes i.e. dynamic in nature you won't be able to use the complete value of the id attribute and can use only partial value which is static. As an example, for the following HTML:

<table id='ext-gen1076' class='bats-table bats-table--center'>
[...]
</table>

To identify the <table> node you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "table[id^='ext-gen']")))

Using XPATH:

WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//table[starts-with(@id,'ext-gen')]")))

Note : You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

However, there would be a lot other elements with id attribute starting with ext-gen. So to uniquely identify the <table> element you need to club up the class attribute as follows:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "table.bats-table.bats-table--center[id^='ext-gen']")))

Using XPATH:

WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//table[@class='bats-table bats-table--center' and starts-with(@id,'ext-gen')]")))

Reference

You can find a relevant detailed discussion in:

score 0 · Answer 3 · answered Jun 17 '11 at 04:53

I've been successful with automating EXTJS sites and auto-generated ids, though I do not recommend it. (because the ids are autogenerated, if new elements are added to the page, all your locators are potentially invalid.)

I'd recommend pin-pointing the precise item, instead of a full path

//*[@id="ext-js123"]

score 0 · Answer 4 · answered Sep 01 '11 at 14:58

The best thing using Selenium is to set unique IDs in the Code.

As there is no config buttonId you have to attach the ID for buttons after creation of the button. In ExtJS 3 we used to set the ID for buttons:

dlg.getDialog().getEl().select('button').each(function(el) {
    el.dom.id = 'confirm-' + el.dom.innerHTML;
});

Unfortunatly this does not work anymore in ExtJS 4, so I am looking for a new solution also. ;-)

How to use ext-gen ID generated by EXTJS in Selenium?

4 Answers4

Reference

Linked