在測試網站的功能時，特別是Web元素（例如單選按鈕，文本框，下拉列表等），您需要確保能夠訪問這些元素。 Selenium定位器正是出于這個目的，通過使用此命令，我們可以識別這些Web元素DOM（文檔對象模型），以通過腳本執行Selenium測試自動化 。

這些Selenium定位器對于腳本編寫至關重要，因為它們錯了，您的自動化腳本將無法工作。 因此，您的Selenium測試自動化工作將依賴于任何測試框架中的這些Selenium定位器。 Protractor是一個Angular JS框架，具有許多Selenium定位符，可以在運行時使用特定的By方法來標識。

在本量角器測試教程中 ，我們將深入討論“量角器”中的Selenium定位器，以及如何使用定位器與應用程序進行交互并獲取當前的運行狀態。 因此，讓我們開始吧。

使用量角器和Selenium自動化跨瀏覽器測試

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

讓我們開始討論量角器測試教程，方法是討論選擇定位器時應牢記的各種功能，以確保其性能。 在大多數情況下，量角器中的Selenium定位器已被證明是良好且可靠的。 它提供的一些功能包括：

1.良好的可讀性：
量角器中的Selenium定位器易于閱讀和使用。 定位器通過使用戶可以訪問它們來為測試代碼提供足夠的靈活性。

2.減少維護：

• 量角器中的Selenium定位器以優化的方式開發，因此需要較少的維護費用。
• 定位器的結構設計精巧，因此即使元素位置發生變化，也無需更新定位器。 僅當Web應用程序的功能發生任何更改時，才需要進行修改。

3.提高速度：
這是Selenium定位器最重要的屬性之一，因為此功能決定了Web應用程序的性能。 量角器中的Selenium定位器具有唯一的ID，這使其比其他Selenium定位器相對更快。 有時，元素定位的速度還取決于瀏覽器的內部處理速度。

量角器中Selenium定位器的目的

繼續我們的量角器測試教程，我們將討論Selenium定位器的重要性。 為了在Protractor中編寫良好的端到端測試，要記住的重要一點是為網頁找到合適的文檔對象模型（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定位器是量角器中使用最廣泛的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定位符用于根據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選擇器（即用于區分網頁上現有元素的標識符值）來幫助識別元素并對其進行分類。 當我們沒有選擇基于類名或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定位器是以識別對應于所述錨固元件即<一>標記在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.借名

名稱定位器用于發現名稱屬性中具有特定值的元素。
例如 ：-

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定位器用于需要在鏈接文本元素中查找包含字符串或字符串部分的元素的情況。

例如 ：-

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定位器用于查找提供的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自動化腳本，則可以查閱我們的支持文檔。

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定位器，保護器測試還有許多其他方面和功能可用于市場，這增加了更多的內容，我們最終將在量角器測試教程中進行介紹。

翻譯自: https://www.javacodegeeks.com/2020/04/complete-guide-to-selenium-locators-in-protractor-examples.html

總結

以上是生活随笔為你收集整理的量角器中Selenium定位器的完整指南（示例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。