如何在 ExtJS 页面上找到与 Selenium 一起使用的元素的唯一选择器? [英] How to find unique selectors for elements on pages with ExtJS for use with Selenium?
问题描述
我正在使用 Selenium 和 Firefox Webdriver 来处理具有唯一性的页面上的元素CSS ID(在每次页面加载时)但 ID 每次都会更改，因此我无法使用它们来定位元素.这是因为该页面是使用 ExtJS 构建的 Web 应用程序.
我正在尝试使用 Firebug 来获取元素信息.
我需要找到一个唯一的 xPath 或选择器，以便我可以使用 Selenium 单独选择每个元素.
当我使用 Firebug 复制 xPath 时，我得到如下值:
//*[@id="ext-gen1302"]但是，下次加载页面时，它看起来像这样:
//*[@id="ext-gen1595"]在那个页面上，每个元素都有这个 ID 格式，所以不能使用 CSS ID 来查找元素.
我想根据其在 DOM 中的位置获取 xPath，但 Firebug 只会返回 ID xPath，因为它对于该页面实例是唯一的.
/html/body/div[4]/div[3]/div[4]/div/div/div/span[2]/span我怎样才能让 Firebug(或其他可以以类似速度工作的工具)为我提供一个独特的选择器，即使在 ext-gen ID 更改后也可以使用它来使用 Selenium 查找元素?
ExtJS UI 自动化测试的另一个受害者，这里是我专门针对测试 ExtJS 的技巧.(但是，这不会回答您标题中描述的问题)
提示 1:永远不要使用像 /div[4]/div[3]/div[4]/div/div/div/span[2] 这样的不可读的 XPath/span.源代码的微小变化可能会导致 DOM 结构发生变化.这将导致巨大的维护成本.
提示 2:利用有意义的自动生成的部分 id 和类名.
例如，this ExtJS 网格示例:By.cssSelector(".x-grid-view .x-grid-table") 会很方便.如果有多个网格，请尝试对它们进行索引或定位可识别的祖先，例如 By.cssSelector("#something-meaningful .x-grid-view .x-grid-table")..p>
提示 3: 在源代码中创建有意义的类名.ExtJS 提供了 cls 和 tdCls 用于自定义类名，因此您可以在源代码中添加 cls:'testing-btn-cancel'，并且通过 By.cssSelector(".testing-btn-cancel") 获取.
Tip3 是最好的也是最后一个.如果您无权访问源代码，请与您的经理联系，Selenium UI 自动化确实应该是可以修改源代码的开发人员的工作，而不是像最终用户一样的测试人员.
I am using Selenium with Firefox Webdriver to work with elements on a page that has unique CSS IDs (on every page load) but the IDs change every time so I am unable to use them to locate an element. This is because the page is a web application built with ExtJS.
I am trying to use Firebug to get the element information.
I need to find a unique xPath or selector so I can select each element individually with Selenium.
When I use Firebug to copy the xPath I get a value like this:
//*[@id="ext-gen1302"]
However, the next time the page is loaded it looks like this:
//*[@id="ext-gen1595"]
On that page every element has this ID format, so the CSS ID can not be used to find the element.
I want to get the xPath that is in terms of its position in the DOM, but Firebug will only return the ID xPath since it is unique for that instance of the page.
/html/body/div[4]/div[3]/div[4]/div/div/div/span[2]/span
How can I get Firebug (or another tool that would work with similar speed) to give me a unique selector that can be used to find the element with Selenium even after the ext-gen ID changes?
Another victim of ExtJS UI automation testing, here are my tips specifically for testing ExtJS. (However, this won't answer the question described in your title)
Tip 1: Don't ever use unreadable XPath like /div[4]/div[3]/div[4]/div/div/div/span[2]/span. One tiny change of source code may lead to DOM structure change. This will cause huge maintenance costs.
Tip 2: Take advantage of meaningful auto-generated partial ids and class names.
For example, this ExtJS grid example: By.cssSelector(".x-grid-view .x-grid-table") would be handy. If there are multiple of grids, try index them or locate the identifiable ancestor, like By.cssSelector("#something-meaningful .x-grid-view .x-grid-table").
Tip 3: Create meaningful class names in the source code. ExtJS provides cls and tdCls for custom class names, so you can add cls:'testing-btn-cancel' in your source code, and get it by By.cssSelector(".testing-btn-cancel").
Tip3 is the best and the final one. If you don't have access the source code, talk to your manager, Selenium UI automation should really be a developer job for someone who can modify the source code, rather than a end-user-like tester.
这篇关于如何在 ExtJS 页面上找到与 Selenium 一起使用的元素的唯一选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
