如何找到 HTML 网页上任何元素的 XPATH 或 CSS 定位器

Question

我正在尝试使用 Chrome 查找屏幕中元素的定位器。我正在使用 Inspect 元素，但我不知道如何提取定位器以进行自动化 UI 测试。我怎样才能做到这一点。这是我试图找到的元素的示例

我正在尝试找到“登录”按钮。我不需要找到登录按钮，我需要了解找到我想要的任何内容的策略。如何提取我想要的任何定位器？

Answer 1

要在 Chrome 的 Inspect Elements 中提取元素的定位器，您可以按照以下步骤操作：

• 右键单击要查找的元素（在本例中为“登录”按钮），然后从上下文菜单中选择“检查”。这将打开 Chrome DevTools 面板并突出显示相应的 HTML 代码。

• 在 DevTools 面板中，找到代表“登录”按钮的突出显示的 HTML 代码。它可能是按钮、输入或任何其他相关的 HTML 标签。

• 寻找可用作定位器的元素的独特属性。常用的属性有id、class、name、data-*属性等

参考：

    Using id attribute: If the element has a unique id attribute, you can use it as a locator. For example: By.id("loginButton").

    Using class attribute: If the element has a unique class, you can use it as a locator. For example: By.className("login-button").

    Using other attributes: If there are no unique id or class attributes, you can use other attributes like name, data-*, or cssSelector. For example: By.cssSelector("button[data-testid='loginButton']").

Answer 2

要单击元素登录，您可以使用以下定位器策略：

• 使用xpath：

  driver.get("https://tinder.com/");
  driver.findElement(By.xpath("//a//div[text()='Log in']")).click();
  

Answer 3

右键单击要定位的元素并选择“检查”选项，这将打开开发人员工具，并且 HTML 代码的给定行将突出显示。右键单击该行并选择选项复制 XPATH 或 CSS 定位器，具体取决于您想要获取的定位器类型。

Answer 4

首先检查，然后选择一个元素，然后单击 Ctrl-F。搜索栏将在元素部分下方打开。