量角器中Selenium定位器的完整指南（示例）

矫情吗；* 2023-02-25 03:50 3阅读 0赞

在测试网站的功能时，特别是Web元素（例如单选按钮，文本框，下拉列表等），您需要确保能够访问这些元素。 Selenium定位器正是出于这个目的，通过使用此命令，我们可以识别这些Web元素DOM（文档对象模型），以通过脚本执行[Selenium测试自动化][Selenium] 。

这些Selenium定位器对于脚本编写至关重要，因为它们错了，您的自动化脚本将无法工作。 因此，您的Selenium测试自动化工作将依赖于任何测试框架中的这些Selenium定位器。 Protractor是一个Angular JS框架，具有许多Selenium定位符，可以在运行时使用特定的By方法来标识。

在本[量角器测试教程中][Link 1] ，我们将深入讨论“量角器”中的Selenium定位器，以及如何使用定位器与应用程序进行交互并获取当前的运行状态。 因此，让我们开始吧。

[使用量角器和Selenium自动化跨浏览器测试][Link 1]

## 量角器中Selenium定位器的重要性是什么？ ##

让我们开始讨论量角器测试教程，方法是讨论选择定位器时应牢记的各种功能，以确保其性能。 在大多数情况下，量角器中的Selenium定位器已被证明是良好且可靠的。 它提供的一些功能包括：

**1.良好的可读性：**  
量角器中的Selenium定位器易于阅读和使用。 定位器通过使用户可以访问它们来为测试代码提供足够的灵活性。

**2.减少维护：**

*  量角器中的[Selenium定位器][Selenium 1]以优化的方式开发，因此需要较少的维护费用。
 *  定位器的结构设计精巧，因此即使元素位置发生变化，也无需更新定位器。 仅当Web应用程序的功能发生任何更改时，才需要进行修改。

**3.提高速度：**  
这是Selenium定位器最重要的属性之一，因为此功能决定了Web应用程序的性能。 量角器中的Selenium定位器具有唯一的ID，这使其比其他Selenium定位器相对更快。 有时，元素定位的速度还取决于浏览器的内部处理速度。

## 量角器中Selenium定位器的目的 ##

继续我们的量角器测试教程，我们将讨论Selenium定位器的重要性。 为了在Protractor中编写良好的端到端测试，要记住的重要一点是为网页找到合适的[文档对象模型（DOM）][DOM]元素。 它倾向于通过实例化的对象向全球导出定位器工厂。 由于量角器基于Selenium接口构建，因此量角器中的Selenium定位器与[Selenium WebDriver][]关联的定位器具有相当的可比性。 因此，很有趣的是，该框架也支持量角器中的Selenium定位器。

## 量角器中Selenium定位器的工作 ##

接下来，在本量角器测试教程中，我们将讨论Selenium定位器如何在量角器中工作。 定位器在量角器中的运行方式是通过导出全局函数（即“ element”），该函数输入定位器并向我们提供ElementFinder。

另一方面，ElementFinder提供了一种与元素进行通信并使用各种操作方法（例如getText（），click（）和sendKeys（））获取有关元素的详细信息的基本方法。 这些方法非常流行，在执行Selenium测试自动化时经常使用。

“元素”功能的主要目的是定位单个元素。 要定位多个元素，请使用'element.all'函数。

还有其他几种方法可以用来在Protractor中找到元素，也可以使用Angular JavaScript框架中的元素定位策略，例如by.model（），by.repeater（），by.binding（）等。

## 量角器中的Selenium定位剂清单 ##

现在，在量角器测试教程的这一部分中，让我们熟悉一些主要用于定位DOM元素的全局变量，并提供示例，以更好地了解量角器中的这些Selenium定位器。 这些是与“ by”关键字相关的一组元素定位器策略，例如by.className，by.css，by.model等。一些最常用的方法是：

*  by.className
 *  by.id
 *  由CSS
 *  by.linkText
 *  按名字
 *  by.partialLinkText
 *  by.tagName
 *  by.xpath

**1. by.className**  
[className定位器][className]是量角器中使用最广泛的Selenium定位器之一。 ts的目的是检查页面中具有class属性的元素，然后进一步对特定于其类名的元素进行分类。

**例如：-**  
XML文档样本：

/* The list contains a class for positive or negative */
     
    <ul class="digits">
      <li class="positive">5</li>
      <li class="negative">-6</li>
    </ul>

使用的定位器：-

/* The locator that returns the expected element for the specified class */
     
    var even = browser.findElement(by.className(positive));
    expect(even.getText()).toBe('5');
    // making use of our locator in our test script //
    expect(browser.findElement(by.className('even'))).toBe('-6');

**2. by.id**

[Id定位符][Id]用于根据XML文档结构中定义的id属性在网页中发现元素。

**例如 ：-**  
XML文档样本：

/* The list contains class for positive or negative */
     
    <ul class="digits">
      <li class="negative">-6</li>
      <li class="positive" id="positiveNumber">5</li>
    </ul>

使用的定位器：-

/* The locator that returns the expected element for the specified id */
     
    // making use of our locator in our test script //
    var positive = browser.findElement(by.id('positiveNumber'));
    expect(positive.getText()).toBe('5');

**3. by.css**

[CSS定位器][CSS]根据CSS选择器（即用于区分网页上现有元素的标识符值）来帮助识别元素并对其进行分类。 当我们没有选择基于类名或ID进行选择时，这些Selenium定位器也是量角器中最优选的替代物之一。

**例如 ：-**  
XML文档样本：

/* The list contains class for two color i.e blue or red */
     
    <ul class="color">
      <li class="first">blue</li>
      <li class="second" id="secondColor">red</li>
    </ul>

使用的定位器：-

/* The locator that returns the expected element for the specified CSS */
     
    var first = browser.findElement(by.css('.first'));
    expect(first.getText()).toBe('blue');
    // making use of our locator in our test script //
    expect(browser.findElement(by.css('#secondColor'))).toBe('red');

**4. by.linkText**

所述的目的[LINKTEXT定位器][LINKTEXT]是以识别对应于所述锚固元件即**<一>**标记在DOM匹配的字符串的文本。 它仅对超链接有效，并且默认情况下，如果网页上的链接文本存在多个元素，则选择第一个链接文本。

**例如 ：-**  
XML文档样本：

/* The anchor tag which contains the website name and its URL */
     
    <a href="http://www.lambdatest.com">LambdaTest</a>
     
    <a href="http://www.lambdatest.com">LambdaTest</a>

使用的定位器：-

/* The locator that returns the expected element for the link i.e. Lambda Test*/
     
    // making use of our locator in our test script //
    var myLink = element(by.linkText(‘LambdaTest'));
     
    expect(myLink.getTagName()).toBe('a');

**5.借名**

[名称定位器][Link 2]用于发现名称属性中具有特定值的元素。  
**例如 ：-**

XML文档样本：

/* The list contains a class for two names i.e John and Mark */
     
    <ul>
     
      <li name="developer">John</li>
     
      <li name="tester">Mark</li>
     
    </ul>

使用的定位器：-

/* The locator that returns the expected element for the specified name */
     
    // making use of our locator in our test script //
    var developer = browser.findElement(by.name('developer'));
     
    // making use of our locator in our test script //
    var tester = browser.findElement(by.name('tester'));
     
    expect(developer.getText()).toBe('John');
     
    expect(tester.getText()).toBe('Mark');

**6. by.partialLinkText**

[partialLinkText定位器][LINKTEXT]用于需要在链接文本元素中查找包含字符串或字符串部分的元素的情况。

**例如 ：-**

XML文档样本：

/* The list contains anchor tag which has the required text */
     
    <ul>
      <li><a href="http://www.lambdatest.com"> Selenium test automation Cloud</a></li>
      <li>Online Selenium Grid for Automated Testing</li>
    </ul>

使用的定位器：-

// /* The locator that returns the expected element i.e. gives us the 'a' element value ‘Selenium test automation Cloud’ and navigates to the same link */
     
    // making use of our locator in our test script //
    var myLink = browser.findElement(by.partialLinkText('Cloud'));
     
    myLink.click();

**7. by.tagName**

tagName定位符用于定位具有特定标签名称的元素。 它在网页中查找具有任何标签名称的元素，例如<a>，<div>，<p>等。它的功能类似于XML文档结构中使用的getElementsByTagName函数。

**例如：-**

XML文档样本：

/* The list contains anchor tag which has the required text */
     
    <a href="http://www.lambdatest.com">LambdaTest</a>

使用的定位器：-

// /* The locator that returns the expected element i.e. gives us the 'a' tag  value and that matches with the text given */ //
     
    // making use of our locator in our test script //
    expect(element(by.tagName('a')).getText()).toEqual('LambdaTest');

**8. by.xpath**

[Xpath定位器][Xpath]用于查找提供的XML Xpath Selector的匹配元素。 处理XPath Selenium定位器时要注意的重要事项是，要搜索整个XML文档模型并为其元素化，我们必须以“ //”开始XPath定位器。

例：

XPath = //*[ @ value='Inbox'] - matches with Inbox  xpath= //button[ @name="Gma"] - matches with Gmail

**例如 ：-**

XML文档样本：

/* The list contains anchor tag which has the required text */
     
    <ul>
      <li><a href="http://www.lambdatest.com">Selenium test automation Cloud </a> </li>
      <li> Online Selenium Grid for Automated Testing </li>
    </ul>

使用的定位器：-

// /* The locator that returns the expected element i.e. gives us the 'a' tag  value with the help of XPath and that matches with the text given */
     
    // making use of our locator in our test script //
    var xpathEle = browser.findElement(by.xpath('//ul/li/a'));
     
    expect(xpathEle.getText()).toBe(‘Selenium test automation Cloud’);

## 特定于角度的Selenium定位器 ##

现在，在此量角器测试教程中，让我们看一下Angular中使用的一些Selenium定位器，但它们也可用于量角器框架。

*  按型号
 *  by.buttonText
 *  by.partialButtonText
 *  by.exactBinding
 *  绑定
 *  by.exactRepeater
 *  中继器
 *  by.cssContainingText
 *  选项
 *  by.deepCss
 *  by.addLocator

**1.按型号**

模型定位器标识具有与ng-model属性关联的确切文本的元素。

**例如 ：-**

XML文档样本：

// /* The XML input type contains the text with the model attribute */ //
     
    <input type="text" ng-model="developer.name">

使用的定位器：-

// /* The locator finds the element with the model attribute and returns the value */ //
     
    // making use of our locator in our test script //
    element(by.model('developer.name')).click();

**2. by.buttonText**

buttonText定位器查找与按钮标签具有相同文本或在标签的子元素内部的元素匹配。

**例如 ：-**

XML文档样本：

// /* The XML contains the button with the required value */ //
     
    <button> Selenium test automation Cloud </button>

使用的定位器：-

// /* The locator finds the element with the button tag and returns the value */ //
     
    // making use of our locator in our test script //
    element(by.buttonText('Selenium test automation Cloud'));

**3. by.partialButtonText**

partialButtonTextlocator查找与包含文本部分的元素的匹配，即在按钮标签或标签子元素内部的部分匹配。

**例如 ：-**

XML文档样本：

// /* The XML contains the button with the required value */ //
     
    <button> Selenium test automation Cloud </button>

使用的定位器：-

// /* The locator finds the element with the button tag and returns the value */ //
     
    // making use of our locator in our test script //
    element(by.partialButtonText('Cloud'));

**4. by.exactBinding**

compareBinding定位器用于使用提供的确切字符串/文本值来定位ng-bind属性。 它不会检查文本中是否有任何部分匹配。

**例如：-**

XML文档样本：

// /* The XML input type contains the text with the bind attribute */ //
     
    <p ng-bind="developer.name"></p>

使用的定位器：-

// /* The locator finds the element with the bind attribute and returns the value */ //
     
    // making use of our locator in our test script //
    expect(element(by.exactBinding('developer.name')).isPresent()).toBe(true);

**5.绑定**

该绑定定位器用于使用给定的文本值来定位ng-bind属性。 它还有助于查找部分匹配的文本，即，如果某个属性与给定的定位器匹配，则该元素将由我们的定位器找到，因此将返回相关的匹配元素。

**例如：-**

XML文档样本：

// /* The XML input type contains the text with the bind attribute */ //
     
    <p ng-bind="developer.name">John</p>

使用的定位器：-

// /* The locator finds the element with the bind attribute and returns the value */ //
     
    // making use of our locator in our test script //
    var eleName = element(by.binding(developer));
    expect(eleName.getText()).toBe('John');

**6. by.exactRepeater**

compareRepeater定位器标识具有与ng-repeat属性关联的确切文本的元素。 它不会检查文本中是否有任何部分匹配。

**例如：-**

XML文档样本：

// /* The XML input type contains the text with the bind attribute */ //
     
    <li ng-repeat="dev in developer_names"></li>
     
    <li ng-repeat="test in tester_names"></li>

使用的定位器：-

// /* The locator finds the element with the bind attribute and returns the exact value */ //
     
    // making use of our locator in our test script //
     
    expect(element(by.exactRepeater('dev in developer_names')).isPresent()).toBe(true);

**7. by.repeater**

转发器定位器用于查找具有ng-repeat属性的元素。 它还有助于查找部分匹配的文本，即，如果某个属性与给定的定位器匹配，则该元素将由我们的定位器找到，因此将返回相关的匹配元素。

**例如：-**

XML文档样本：

// /* The XML input type contains the text with the repeater attribute */ //
     
    <tr ng-repeat="developer_info">
        <td>{
        {dev.id}}</td>
        <td>{
        {dev..name}}</td>
        <td>{
        {dev.salary}}</td>
    </tr>

使用的定位器：-

// /* The locator finds the element with the repeater attribute and returns the value */ //
     
    // making use of our locator in our test script //
     
    var devID = element(by.repeater('developer_info').row(0));
    expect(devID.getText()).toBe('2');
     
    var devName = element(by.repeater('developer_info').row(1));
    expect(devName.getText()).toBe('Mark');

**8. by.cssContainingText**

cssContainingText定位器通过具有特定文本字符串CSS查找元素，即，它结合了CSS定位器和文本元素定位器的功能来标识该元素。

**例如：-**

XML文档样本：

// /* The XML input type contains the text with the css text */ //
     
    <ul>
      <li class="color">Blue</li>
      <li class="color">Red</li>
    </ul>

使用的定位器：-

// /* The locator finds the element and returns the value for the Blue color but not the Red color */ //
     
    // making use of our locator in our test script //
     
    var blue = element(by.cssContainingText('.color', 'Blue'));

**9. by.options**

选项定位器标识与属性ng-option关联的元素。

**例如 ：-**

XML文档样本：

// /* The XML input type contains the text with the option attribute */ //
     
    <select ng-options="Colors options in the custom collection">
      <option value="0">Blue Color</option>
      <option value="1">Red Color</option>
      <option value="2">Green Color</option>
    </select>

使用的定位器：-

// /* The locator finds the element with the options attribute and returns the value */ //
     
    // making use of our locator in our test script //
     
    var colorOptions = element.all(by.options('Colors options in the custom collection'));
    expect(colorOptions.count()).toEqual(Green);

**10. by.deepCss**

量角器中的deepCss定位器用于发现阴影DOM元素，默认情况下，使用标准元素Selenium定位器不容易发现该阴影DOM元素。

**例如：-**

XML文档样本：

// /* The XML input type contains the text and returns the fetched value */ //
     
    <div>
      <span id="outerspan">   //outerspan
      <"shadow tree">           //shadow tree
        <span id="span1"></span>
        <"shadow tree">
          <span id="span2"></span>
        </>
      </>
    </div>

使用的定位器：-

// /* The locator finds the element with the options attribute and returns the value */ //
     
    // making use of our locator in our test script //
     
    var mySpan = element.all(by.deepCss('span'));  //myspan
    expect(mySpan.count()).toEqual(7);
    // making use of our locator in our test script //
     
    var checkSpans = element.all(by.css('span');  //verify span
    expect(checkSpans.count()).toEqual(5);

在量角器测试教程的下一部分中，我们将讨论如何将量角器与其他强大的工具集成。 在此之前，如果您想设置一个量角器来运行Selenium自动化脚本，则可以查阅我们的[支持][Link 3]文档。

**11. by.addLocator**

量角器中的addLocator用于创建自定义定位器，并稍后在配置中加载它们。

**例如 ：-**

XML文档样本：

// /* The XML input type contains the text and returns the fetched value */ //
     
    <button ng-click="viewResults()">View</button>

使用的定位器：-

// /* The locator finds the element with the options attribute and returns the value */ //
     
    // making use of our locator in our test script //
     
    by.addLocator('Selenium Grid',function(buttonText, opt_parentElement, opt_rootSelector) {
    var using = opt_parentElement || document,
    buttons = using.querySelectorAll(‘Automate testing’);
    return Array.prototype.filter.call(buttons, function(button) {
    return button.textContent === buttonText;
    });
    });

## 结论 ##

正如我们在此量角器测试教程中看到的那样，由于量角器是基于Selenium构建的，并且主要用于Angular网站，因此它从它们继承属性。 这就是我们在量角器中使用Selenium定位器的原因，它为框架增添了更多魅力，并在充分使用时使其更强大。 另一方面，量角器不仅仅是Selenium定位器，保护器测试还有许多其他方面和功能可用于市场，这增加了更多的内容，我们最终将在量角器测试教程中进行介绍。

![format_png][]

> 翻译自: [https://www.javacodegeeks.com/2020/04/complete-guide-to-selenium-locators-in-protractor-examples.html][https_www.javacodegeeks.com_2020_04_complete-guide-to-selenium-locators-in-protractor-examples.html]

[Selenium]: https://www.lambdatest.com/selenium-automation
[Link 1]: https://www.lambdatest.com/blog/automated-cross-browser-testing-with-protractor-selenium/
[Selenium 1]: https://www.lambdatest.com/blog/locators-in-selenium-webdriver-with-examples/
[DOM]: https://www.lambdatest.com/document-object-model-range
[Selenium WebDriver]: https://www.lambdatest.com/blog/tips-for-test-automation-with-selenium/
[className]: https://www.lambdatest.com/blog/selenium-java-tutorial-class-name-locator-in-selenium/
[Id]: https://www.lambdatest.com/blog/making-the-move-with-id-locator-in-selenium-webdriver/
[CSS]: https://www.lambdatest.com/blog/how-pro-testers-use-css-selectors-in-selenium-automation-scripts/
[LINKTEXT]: https://www.lambdatest.com/blog/using-link-text-and-partial-link-text-in-selenium/
[Link 2]: https://www.lambdatest.com/blog/how-to-use-name-locator-in-selenium-automation-scripts/
[Xpath]: https://www.lambdatest.com/blog/complete-guide-for-using-xpath-in-selenium-with-examples/
[Link 3]: https://www.lambdatest.com/support/docs/protractor-with-selenium-running-protractor-automation-scripts-on-lambdatest-selenium-grid/
[format_png]: /images/20230209/b1babd0fd85a4e1cb794651dfbf6a939.png
[https_www.javacodegeeks.com_2020_04_complete-guide-to-selenium-locators-in-protractor-examples.html]: https://www.javacodegeeks.com/2020/04/complete-guide-to-selenium-locators-in-protractor-examples.html