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

问题

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

回答1:

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']")

回答2:

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"]

回答3:

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. ;-)

回答4:

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:

• How to find element by part of its id name in selenium with python
• How to get selectors with dynamic part inside using Selenium with Python?

来源：https://stackoverflow.com/questions/6014376/how-to-use-ext-gen-id-generated-by-extjs-in-selenium