英文:
How can I find the XPATH or the CSS locator of any element on an HTML web page
问题
I am trying to find the locator of an element in a screen using chrome. I am using Inspect elements but I don't know how to extract the locator for my automated UI testing. How can I do that. Here is an example of the element I am trying to locate
我正在尝试在屏幕上找到元素的定位器，使用的是Chrome。我正在使用检查元素，但我不知道如何提取用于自动化UI测试的定位器。我该如何做到这一点。这是我试图定位的元素示例。
I am trying to locate the Login button. I do not need to locate the login button I need to know about a strategy to locate anything I want. How can I extract any locator I want?
我试图定位登录按钮。我不只是需要找到登录按钮，我需要了解一种定位任何我想要的元素的策略。我怎样才能提取任何我想要的定位器？
英文:
I am trying to find the locator of an element in a screen using chrome. I am using Inspect elements but I don't know how to extract the locator for my automated UI testing. How can I do that. Here is an example of the element I am trying to locate
I am trying to locate the Login button. I do not need to locate the login button I need to know about a strategy to locate anything I want. How can I extract any locator I want?
答案1
得分: 1
要点击<kbd>登录</kbd>元素，您可以使用以下定位策略：
-
使用_xpath_：
driver.get("https://tinder.com/"); driver.findElement(By.xpath("//a//div[text()='登录']")).click();
英文:
To click on the element <kbd>Log in</kbd> you can use the following locator strategy:
-
Using xpath:
driver.get("https://tinder.com/"); driver.findElement(By.xpath("//a//div[text()='Log in']")).click();
答案2
得分: 1
提取Chrome的检查元素中的元素定位器，您可以按照以下步骤操作：
-
右键单击要定位的元素（在本例中是登录按钮），然后从上下文菜单中选择“检查”。这将打开Chrome开发工具面板并突出显示相应的HTML代码。
-
在开发工具面板中，找到表示登录按钮的突出显示的HTML代码。它可能是按钮、输入或任何其他相关的HTML标记。
-
寻找可以用作定位器的元素的唯一属性。常用的属性包括id、class、name、data-*属性等。
参考：
使用id属性：如果元素具有唯一的id属性，您可以将其用作定位器。例如：By.id("loginButton")。
使用class属性：如果元素具有唯一的class，您可以将其用作定位器。例如：By.className("login-button")。
使用其他属性：如果没有唯一的id或class属性，您可以使用其他属性，如name、data-*或cssSelector。例如：By.cssSelector("button[data-testid='loginButton']")。
英文:
To extract a locator for an element in Chrome's Inspect Elements, you can follow these steps:
-
Right click on the element you want to locate (in this case, the Login button) and select "Inspect" from the context menu. This will open the Chrome DevTools panel and highlight the corresponding HTML code.
-
In the DevTools panel, locate the highlighted HTML code that represents the Login button. It might be a button, input, or any other relevant HTML tag.
-
Look for unique attributes of the element that can be used as locators. Commonly used attributes include id, class, name, data-* attributes etc.
Reference :
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']").
答案3
得分: 0
你右键单击要定位的元素，然后选择“检查”选项，这将打开开发者工具，并突出显示HTML代码中的给定行。右键单击该行，然后根据您想要获取的定位器类型选择“复制XPATH”或“复制CSS定位器”选项。
英文:
You right click on the element you want to locate and you choose the option "Inspect", this will open the developer tools and the given line of the HTML code will be highlighted. Right click on the line and choose the option copy XPATH or CSS locator depending on the type of locator that you want to obtain.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论