使用 Selenium 获取 XPATH 和 CSS SELECTORS 的最佳方法

Question

你们知道使用 selenium 获取抓取网站的 XPATH 和 CSS 选择器的最佳方法是什么？

有人建议我使用这些 XPATH 和 CSS SELECTORS 作为我正在进行的练习的参数：

wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[placeholder='Search']"))).send_keys('Tech')
wait.until(EC.element_to_be_clickable((By.XPATH, "//button[text()='Cancel']/.."))).click()

这些参数非常适合练习。但是，我不确定如何获取（或“构建”）这些参数...... 如果我使用 Chrome 的 Inspect > 右键单击​​ > Copy XPATH 或 Copy Selector，我会得到一些非常不同的参数，这些参数似乎不能正常工作，并且 selenium 似乎找不到。

#search-bar
//*[@id="app-container"]/div/section/div/div/div[2]/button

是否有工具或技术可以像我的第一个示例那样获得更好的 XPATH 或 CSS SELECTORS？

Answer 1

我喜欢@JD2775 分享的资源。它们有助于您开始了解如何构建和理解 xpath 和 css 选择器。当您对此感到满意时，您可以制定您的选择器策略。希望您至少发现以下一些内容对您有所帮助。

什么是“好”的 xpath 或 css 选择器？

• 选择器应该可靠且唯一地标识目标元素。
  • 例如，如果一个元素的类在页面上出现多次，不要只使用这个类来标识该元素。这是您的选择器最基本的要求
• 选择器不应该容易出现“不稳定”——即由于与测试无关的更改而发生的错误失败。
  • 通过尽可能少地依赖 DOM 来识别您的元素来实现这一点。例如，如果两者都可以唯一标识元素，则应首选//*[@id="app-container"]//button 而不是//*[@id="app-container"]/div/section/div/div/div[2]/button。或者，如您所见，"//button[text()='Cancel']/.." 是更好的选择。
• 可能不太重要，但仍然值得考虑：从选择器中了解正在抓取的元素有多容易？

一些最佳做法

• 如果您与开发团队合作，因此可以访问您正在测试的应用程序的源代码，请实现一个仅用于自动化的自定义 HTML 属性，该属性具有唯一标识和描述元素的值.然后，在您的测试代码中，您可以使用这样的一行来识别您需要的每个元素：

my_field = driver.find_element_by_css_selector('input[data-e2e-attribute="aCertainField"]')`

• 将您选择的元素组织成一个Page Object Model，它将网络元素的定义抽象到一个位置。因此，您可以在测试中的任何位置使用这些元素，而无需定位它们，并且在必要时更容易对选择器进行更改

Answer 2

您是正确的，右键单击并复制 Xpath 是获取 Xpath 的不好方法。你只剩下一个又长又脆的选择器。建立自己的要好得多。一旦掌握了窍门，就可以开始构建自己的 CSS 和 Xpath 选择器了。其中一些变得复杂，但如果你不断练习和寻找解决方案，你会变得越来越好。

问题是很难在这样的论坛上解释如何做到这一点。您最好的选择是在 YouTube 上观看一些有关如何为 Selenium 创建 Xpath 和 CSS 选择器的视频。这是我刚刚为 Xpath 找到的一个不错的：

https://www.youtube.com/watch?v=3uktjWgKrtI

这遵循我在 Chrome 开发工具中使用的方法并使用内置的查找窗口（无插件）

这是我过去用于 Xpath 和 CSS 选择器的一个很好的备忘单

https://www.automatetheplanet.com/selenium-webdriver-locators-cheat-sheet/

祝你好运