元素在检查模式下具有 ID，但在原始 HTML 中没有 ID

Question

我目前正在使用Python和Selenium开发一个小的Web抓取脚本。我正在尝试从表中获取一些信息，该表在检查模式下具有某个ID。但是，当我以原始HTML的形式打开页面时（我在无法使用xpath或css_selector找到该表之后），该表没有提到的ID。这怎么可能？为了更好的解释：这就是我在浏览器中的检查模式下的样子<table id='ext-gen1076' class='bats-table bats-table--center'>[...]</table>这就是我作为原始HTML文件打开页面时的样子<table class='bats-table bats-table--center'>[...]</table>ID怎么可能消失？（JFI，这是我的第一个问题，所以对格式不好表示歉意！提前致谢！

Answer 1

原因是，ID 是在运行时添加的。

Answer 2

id属性的值，即ext-gen1076包含一个数字，并且显然是动态生成的。id 属性值的前缀，即 ext-gen 表示 id 是使用 Ext JS 在运行时生成的。

分机 JS

Ext JS是一个JavaScript框架，用于为任何现代设备构建数据密集型，跨平台的Web和移动应用程序。

此用例

可能你甚至在 JavaScript 呈现完整的 DOM 树之前就已经识别了该元素。因此缺少 id 属性。<table>

识别 Ext JS 元素

随着id属性的值发生变化，即本质上是动态的，您将无法使用id属性的完整值，并且只能使用静态的部分值。根据您提供的 HTML：

<table id='ext-gen1076' class='bats-table bats-table--center'>

[...]

</table>

要识别<>节点，您需要诱导 WebDriverWait，并且可以使用以下任一定位器策略：tablevisibility_of_element_located()

用：CSS_SELECTOR

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

用：XPATH

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

注意：您必须添加以下导入：

from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.common.by import By

from selenium.webdriver.support import expected_conditions as EC

但是，还有很多其他元素的id属性以ext-gen开头。因此，要唯一标识元素，您需要按如下方式组合 class 属性：<table>

用：CSS_SELECTOR

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

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