selenium中js定位_Selenium中的定位剂

selenium中js定位

1.什么是Selenium定位器？ (1. What is a Selenium Locator?)

Selenium Locators are used for identifying the web elements on the web page. To access the HTML elements from a web page locators are used. In Selenium, we can use locators to perform actions on text boxes, checkboxes, links, radio buttons, list boxes, and other web elements. Locators help us in identifying the objects.

Selenium定位器用于识别网页上的网页元素。 为了从网页访问HTML元素，使用了定位器。 在Selenium中，我们可以使用定位器对文本框，复选框，链接，单选按钮，列表框和其他Web元素执行操作。 定位器帮助我们识别物体。

This tutorial explains different types of locators, how, when and ideal Strategies to use these locators.

本教程介绍了不同类型的定位器，如何，何时以及使用这些定位器的理想策略。

2.不同类型的Selenium定位器 (2. Different types of Selenium Locators)

We have 8 types of locators in Selenium Webdriver to find elements on web pages.

Selenium Webdriver中有8种类型的定位符，用于查找网页上的元素。

1. id
   ID
2. name
   名称
3. tagName
   标签名
4. className
   班级名称
5. linkText
   linkText
6. partialLinkText
   partialLinkText
7. xpath
   路径
8. cssSelector
   cssSelector

Why we need to use different locators?

为什么我们需要使用不同的定位器？

1. Sometimes developers may not provide all locators for all elements
   有时开发人员可能未提供所有元素的所有定位符
2. Some locators may be duplicated sometimes.
   某些定位符有时可能会重复。

So we have to choose any one unique locator to identify the element. Let’s look into these selenium locators one by one.

因此，我们必须选择任何一个唯一的定位器来标识元素。 让我们一一研究这些Selenium定位器。

2.1）ID定位器 (2.1) ID Locator)

Ids’ are the most preferred way to locate elements on a web page, as each id is supposed to be unique which makes ids faster and more reliable way to locate elements on a page.

id是在网页上定位元素的最优选方法 ，因为每个id都应该是唯一的，这使id可以更快，更可靠地在页面上定位元素。

With ID Locator strategy, the first element with the id attribute value matching the location will be returned.

使用ID Locator策略，将返回id属性值与位置匹配的第一个元素。

A NoSuchElementException will be raised, if no element has a matching id attribute.

如果没有元素具有匹配的id属性，则将引发NoSuchElementException 。

Example: Now, let’s understand the working of ID locator with an example. Here we will launch Google Chrome and navigate to yahoo.com. Here, We will try to locate the email text box using ID Locator.

示例：现在，让我们通过一个示例来了解ID定位器的工作原理。 在这里，我们将启动Google Chrome浏览器并导航到yahoo.com 。 在这里，我们将尝试使用ID定位器找到电子邮件文本框 。

Locator ID

定位器ID

Right-click on the above web element to inspect the element.

右键单击上述Web元素以检查该元素。

Inspect Element

检查元素

On inspecting the above web element, you can see an input tag with attributes like id and class. Now, we will use the value of Id locator i.e login-username to locate the email text box.

检查上面的Web元素时，您会看到一个带有id和class之类的属性的输入标签。 现在，我们将使用Id定位器的值，即login-username来找到电子邮件文本框。

Login Username

登录用户名

Use the same in your Selenium test script as well:

在Selenium测试脚本中也使用相同的命令：

driver.findElement(By.id("login-username")).sendKeys("seleniumtesting@yahoo.com"); //id locator for text box

Even though id is the most preferred locator, obviously it is not realistic for all objects to have ids on a web page. In some cases, developers will give non-unique ids on a web page, in that case id should be avoided.

尽管id是最优选的定位器，但显然所有对象在网页上都具有id是不现实的。 在某些情况下，开发人员会在网页上提供非唯一ID，在这种情况下应避免使用ID 。

2.2）名称定位器 (2.2) Name Locator)

This is also the most efficient way to locate an element with a name attribute. With this strategy, the first element with the value name attribute will be returned.

这也是查找具有name属性的元素的最有效方法。 使用此策略，将返回具有值名称属性的第一个元素。

A NoSuchElementException will be raised, if no element has a matching name attribute.

如果没有元素具有匹配的name属性，则将引发NoSuchElementException 。

Example: Now, let’s understand the working of the name locator with an example. In the below image you can see, the name locator with a value called username. The difference is that you should use a name instead of id.

示例：现在，让我们通过一个示例来了解名称定位器的工作原理。 在下图中，您可以看到名称定位器，其值名为username。 不同之处在于您应该使用名称而不是ID。

Locator Name

定位器名称

Use the same in your Selenium test script as well:

在Selenium测试脚本中也使用相同的命令：

driver.findElement(By.name("username")).sendKeys("seleniumtesting@yahoo.com"); //name locator for text box

The tagName and className locators are similar to ID and name locators. They are used to select the elements having the html tag or css class.

tagName和className定位符类似于ID和名称定位符。 它们用于选择具有html标记或CSS类的元素。

2.3）linkText定位器 (2.3) linkText Locator)

Selenium linkText locator is used for identifying the hyperlinks on a web page. It can be identified with the help of an anchor tag “a”. In order to create the hyperlinks on a web page, you can use anchor tags.

Selenium linkText定位器用于标识网页上的超链接。 可以借助定位标记“ a”来识别它。 为了在网页上创建超链接，您可以使用定位标记。

Example: Now, let’s understand the working of the linkText locator with an example. Suppose you want to locate ‘Difficulty signing in?’ link as shown below.

示例：现在，让我们通过一个示例来了解linkText定位器的工作方式。 假设您要查找“登录困难？” 链接，如下所示。

Locator LinkText

定位器LinkText

Right-click on “Difficulty signing in?” link for inspecting-you can notice that it starts with an anchor tag, which doesn’t have any id and name attributes. In those cases, you can use linkText locator.

右键单击“登录困难？” 检查链接-您会注意到它以锚标记开头，该锚标记没有任何id和name属性。 在这种情况下，可以使用linkText定位器。

Inspect LinkText

检查LinkText

Use the same in your Selenium test script as well:

在Selenium测试脚本中也使用相同的命令：

driver.findElement(By.linkText("Difficulty signing in?")).click(); //linkText locator for links

2.4）partialLinkText定位器 (2.4) partialLinkText Locator)

In some situations, we may need to find links by a portion of the text in a linkText element. In those situations, we use Partial Link Text to locate elements.

在某些情况下，我们可能需要在linkText元素中按文本的一部分查找链接。 在这种情况下，我们使用部分链接文本来定位元素。

Example: Now, let’s understand the working of PartiallinkText locator with an example. Suppose you want to locate ‘Difficulty signing in?’ link as shown below.

示例：现在，让我们通过一个示例来理解PartiallinkText定位器的工作。 假设您要查找“登录困难？” 链接，如下所示。

Locator PartialLinkText

定位器PartialLinkText

Right click on “Difficulty signing in?” link for inspecting. Now, instead of pasting full text we will give just Difficulty.

右键单击“登录困难吗？” 检查链接。 现在，我们将仅给出Difficulty ，而不是粘贴全文。

Inspect PartialLinkText

检查PartialLinkText

Use the same in your Selenium test script as well:

在Selenium测试脚本中也使用相同的命令：

driver.findElement(By.partiallinkText("Difficulty")).click(); //partiallinkText locator for links

2.5）XPath定位器 (2.5) XPath Locator)

XPath also called as XML Path is a language to query XML documents. XPath is an important strategy to locate elements in selenium.

XPath也称为XML路径，是一种查询XML文档的语言。 XPath是在Selenium中定位元素的重要策略。

Example: Now, let’s understand the working of XPath locator with an example. Suppose you want to locate the search box using XPath of google.com. On inspecting the web element you can see an input tag and attributes like class and name. To construct XPath we make use of tag names and attributes to locate the search bar.

示例：现在，让我们通过一个示例来了解XPath定位器的工作原理。 假设您要使用google.com的 XPath找到搜索框。 在检查Web元素时，您可以看到一个输入标记以及诸如类和名称之类的属性。 为了构造XPath，我们利用标签名称和属性来定位搜索栏。

Inspect XPath

检查XPath

Click the Elements tab and press Ctrl + F to open a search box in Chrome’s developer’s tool. In the above image, you can see an input tag.

点击元素标签，然后按Ctrl + F，以在Chrome开发人员工具中打开搜索框。 在上图中，您可以看到一个输入标签。

Now, I will start with //input, where //input implies a tag name. Here we make use of name attribute and pass ‘q’ in single quotes as its value.

现在，我将从//输入开始，其中// input表示标记名称。 在这里，我们使用name属性，并在单引号中传递“ q”作为其值。

This will give the below XPath expression:

这将给出以下XPath表达式：

//input[@name=’q’]

//输入[@ name ='q']

Locator Xpath

定位器Xpath

Use the same in your Selenium test script as well:

在Selenium测试脚本中也使用相同的命令：

driver.findElement(By.xpath("//input[@name='q']")).sendKeys("Selenium Webdriver"); //xpath for search box

2.6）CSS选择器 (2.6) CSS Selectors)

CSS Selector is the combination of an element selector and a selector value which identifies web element within a web page. Like Xpath, CSS Selector is also used to locate web elements having no ID, class or Name.

CSS选择器是元素选择器和选择器值的组合，用于标识网页中的Web元素。 与Xpath一样，CSS Selector也用于查找没有ID，类或名称的Web元素。

Example: Now, let’s understand the working of CSS Selector with an example. Here we will launch Google Chrome and navigate to yahoo.com. Here, I will try to inspect the email text box using CSS Selector.

示例：现在，让我们通过一个示例来了解CSS Selector的工作方式。 在这里，我们将启动Google Chrome浏览器并导航到yahoo.com 。 在这里，我将尝试使用CSS选择器检查电子邮件文本框 。

Locator CSSSelector

定位器CSSSelector

Right-click on the above web element to inspect the element.

右键单击上述Web元素以检查该元素。

Inspect CSSSelector

检查CSSSelector

Once inspecting the element, we can see the image as below

检查元素后，我们可以看到如下图

Locator CSS Selector

定位器CSS选择器

Click Elements tab and press Ctrl + F to open a search box in Chrome’s developer’s tool. CSS Selector always starts with # and on giving the value of id attribute as login-username, the element gets highlighted.

点击元素标签，然后按Ctrl + F以在Chrome开发人员工具中打开搜索框。 CSS Selector始终以＃开头，并将id属性的值指定为login-username ，该元素将突出显示。

CSSSelector Value

CSSSelector值

Use the same in your Selenium test script as well:

在Selenium测试脚本中也使用相同的命令：

driver.findElement(By.cssSelector("#login-username")).sendKeys("seleniumtesting@yahoo.com");

结论 (Conclusion)

Now we have successfully learned how to locate elements in Selenium. As you can see locating element by name, id, linkText, partialLinkText is simple. We just need to select the right locator based on the uniqueness of the element i.e we mostly prefer using id because the id of elements is generally unique. In some scenarios, we might not have an id, name attributes that might not fetch the unique web element. In those scenarios, we should use XPath and CSSSelector locators. These two locators are very powerful and help in creating robust locators for complex web elements.

现在，我们已经成功学习了如何在Selenium中定位元素。 如您所见，按名称，id，linkText，partialLinkText定位元素很简单。 我们只需要根据元素的唯一性来选择合适的定位符，即我们最喜欢使用id，因为元素的id通常是唯一的。 在某些情况下，我们可能没有ID，可能无法获取唯一Web元素的名称属性。 在这些情况下，我们应该使用XPath和CSSSelector定位器。 这两个定位器功能非常强大，有助于为复杂的Web元素创建可靠的定位器。

翻译自: https://www.journaldev.com/29481/locators-in-selenium

selenium中js定位