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

這些Selenium定位器對(duì)于腳本編寫(xiě)至關(guān)重要，因?yàn)槿绻斎脲e(cuò)誤，自動(dòng)化腳本將無(wú)法正常工作。 因此，您的Selenium測(cè)試自動(dòng)化工作將依賴(lài)于任何測(cè)試框架中的這些Selenium定位器。 Protractor是Angular JS框架，具有許多Selenium定位符，可以在運(yùn)行時(shí)使用特定的By方法來(lái)標(biāo)識(shí)。

在本量角器測(cè)試教程中 ，我們將深入討論“量角器”中的Selenium定位器，以及如何使用定位器與應(yīng)用程序進(jìn)行交互并獲取當(dāng)前的運(yùn)行狀態(tài)。 因此，讓我們開(kāi)始吧。

使用量角器和硒自動(dòng)化跨瀏覽器測(cè)試

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

讓我們從量角器測(cè)試教程入手，討論有關(guān)選擇定位器性能時(shí)應(yīng)牢記的各種功能。 在大多數(shù)情況下，量角器中的硒定位器已被證明是良好且可靠的。 它提供的一些功能包括：

1.良好的可讀性：
量角器中的硒定位器易于閱讀和使用。 定位器通過(guò)使用戶(hù)可以訪(fǎng)問(wèn)它們來(lái)為測(cè)試代碼提供足夠的靈活性。

2.減少維護(hù)：

• 量角器中的硒定位器以?xún)?yōu)化的方式開(kāi)發(fā)，因此需要較少的維護(hù)費(fèi)用。
• 定位器的結(jié)構(gòu)設(shè)計(jì)精巧，因此，即使元素位置發(fā)生變化，也無(wú)需更新定位器。 僅當(dāng)Web應(yīng)用程序的功能發(fā)生任何更改時(shí)，才需要進(jìn)行修改。

3.提高速度：
這是Selenium定位器最重要的屬性之一，因?yàn)榇斯δ軟Q定了Web應(yīng)用程序的性能。 量角器中的Selenium定位器具有唯一的ID，這使其比其他Selenium定位器相對(duì)更快。 有時(shí)，元素定位的速度還取決于瀏覽器的內(nèi)部處理速度。

量角器中硒定位器的目的

繼續(xù)我們的量角器測(cè)試教程，我們將討論Selenium定位器的重要性。 為了在Protractor中編寫(xiě)良好的端到端測(cè)試，要記住的重要一點(diǎn)是為網(wǎng)頁(yè)找到合適的文檔對(duì)象模型（DOM）元素。 它傾向于通過(guò)實(shí)例化對(duì)象將定位器工廠全局導(dǎo)出。 由于量角器是基于Selenium接口構(gòu)建的，因此量角器中的Selenium定位器與Selenium WebDriver關(guān)聯(lián)的定位器具有相當(dāng)?shù)目杀刃浴?因此，很有趣的是，該框架也支持量角器中的Selenium定位器。

量角器中硒定位器的工作

接下來(lái)，在本量角器測(cè)試教程中，我們將討論Selenium定位器如何在量角器中工作。 定位器在量角器中的運(yùn)行方式是通過(guò)導(dǎo)出全局函數(shù)（即“ element”），該函數(shù)輸入定位器并向我們提供ElementFinder。

另一方面，ElementFinder提供了一種與元素進(jìn)行通信并使用各種操作方法（例如getText（），click（）和sendKeys（））獲取有關(guān)元素的詳細(xì)信息的基本方法。 這些方法非常流行，在執(zhí)行Selenium測(cè)試自動(dòng)化時(shí)經(jīng)常使用。

“元素”功能的主要目的是定位單個(gè)元素。 要查找多個(gè)元素，請(qǐng)使用'element.all'函數(shù)。

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

量角器中的硒定位劑清單

現(xiàn)在，在量角器測(cè)試教程的這一部分中，讓我們熟悉一些主要用于定位DOM元素的全局變量，并提供示例，以更好地了解量角器中的這些Selenium定位器。 這些是與“ by”關(guān)鍵字相關(guān)的一組元素定位器策略，例如by.className，by.css，by.model等。一些最常用的方法是：

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

1. by.className
className定位器是Protractor中使用最廣泛的硒定位器之一。 ts的目的是檢查頁(yè)面中具有class屬性的元素，然后進(jìn)一步對(duì)特定于其類(lèi)名稱(chēng)的元素進(jìn)行分類(lèi)。

例如：-
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文檔結(jié)構(gòu)中定義的id屬性來(lái)發(fā)現(xiàn)網(wǎng)頁(yè)中的元素。

例如 ：-
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選擇器（即用于區(qū)分網(wǎng)頁(yè)上現(xiàn)有元素的標(biāo)識(shí)符值）來(lái)幫助識(shí)別元素并對(duì)其進(jìn)行分類(lèi)。 當(dāng)我們沒(méi)有選擇基于類(lèi)名或ID進(jìn)行選擇時(shí)，這些Selenium定位器也是量角器中最優(yōu)選的替代品之一。

例如 ：-
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定位器是以識(shí)別對(duì)應(yīng)于所述錨固元件即<一>標(biāo)記在DOM匹配的字符串的文本。 它僅對(duì)超鏈接有效，并且默認(rèn)情況下，如果網(wǎng)頁(yè)上的鏈接文本存在多個(gè)元素，則選擇第一個(gè)鏈接文本。

例如 ：-
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.借名

名稱(chēng)定位器用于發(fā)現(xiàn)名稱(chēng)屬性中具有特定值的元素。
例如 ：-

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定位符用于定位具有特定標(biāo)簽名稱(chēng)的元素。 它在網(wǎng)頁(yè)中查找具有任何標(biāo)簽名稱(chēng)的元素，例如<a>，<div>，<p>等。它的功能類(lèi)似于XML文檔結(jié)構(gòu)中使用的getElementsByTagName函數(shù)。

例如：-

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定位器時(shí)要注意的重要事項(xiàng)是，要搜索整個(gè)XML文檔模型并為其元素化，我們必須以“ //”開(kāi)始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’);

特定于角度的硒定位器

現(xiàn)在，在此量角器測(cè)試教程中，讓我們看一下Angular中使用的一些Selenium定位器，但它們也可用于量角器框架。

• 按型號(hào)
• by.buttonText
• by.partialButtonText
• by.exactBinding
• 綁定
• by.exactRepeater
• 中繼器
• by.cssContainingText
• 選項(xiàng)
• by.deepCss
• by.addLocator

1.按型號(hào)

模型定位器標(biāo)識(shí)具有與ng-model屬性關(guān)聯(lián)的確切文本的元素。

例如 ：-

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定位器查找與按鈕標(biāo)簽具有相同文本或在標(biāo)簽的子元素內(nèi)部的元素匹配。

例如 ：-

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查找與包含文本部分的元素匹配，即在button標(biāo)簽或標(biāo)簽子元素內(nèi)部的部分匹配。

例如 ：-

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定位器用于使用提供的確切字符串/文本值來(lái)定位ng-bind屬性。 它不會(huì)檢查文本中是否有任何部分匹配。

例如：-

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.綁定

該綁定定位器用于使用給定的文本值來(lái)定位ng-bind屬性。 它還有助于查找部分匹配的文本，即，如果某個(gè)屬性與給定的定位器具有某些匹配，則此元素將由我們的定位器找到，因此將返回相關(guān)的匹配元素。

例如：-

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定位器標(biāo)識(shí)具有與ng-repeat屬性關(guān)聯(lián)的確切文本的元素。 它不會(huì)檢查文本中是否有任何部分匹配。

例如：-

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

轉(zhuǎn)發(fā)器定位器用于查找具有ng-repeat屬性的元素。 它還有助于查找部分匹配的文本，即，如果某個(gè)屬性與給定的定位器具有某些匹配，則此元素將由我們的定位器找到，因此將返回相關(guān)的匹配元素。

例如：-

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定位器通過(guò)具有特定文本字符串CSS查找元素，即，它結(jié)合了CSS定位器和文本元素定位器的功能來(lái)標(biāo)識(shí)該元素。

例如：-

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

選項(xiàng)定位器標(biāo)識(shí)與屬性ng-option關(guān)聯(lián)的元素。

例如 ：-

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定位器用于發(fā)現(xiàn)陰影DOM元素，默認(rèn)情況下，使用標(biāo)準(zhǔn)元素Selenium定位器不容易發(fā)現(xiàn)它。

例如：-

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);

在量角器測(cè)試教程的下一部分中，我們將討論如何將量角器與其他功能強(qiáng)大的工具集成。 在此之前，如果您想設(shè)置一個(gè)量角器來(lái)運(yùn)行Selenium自動(dòng)化腳本，則可以查閱我們的支持文檔。

11. by.addLocator

量角器中的addLocator用于創(chuàng)建自定義定位器，并稍后在配置中加載它們。

例如 ：-

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; }); });

結(jié)論

正如我們?cè)诖肆拷瞧鳒y(cè)試教程中所看到的那樣，由于量角器是基于Selenium構(gòu)建的，并且主要用于Angular網(wǎng)站，因此它從它們繼承屬性。 這就是我們?cè)诹拷瞧髦惺褂肧elenium定位器的原因，它為框架增添了更多魅力，并在充分使用時(shí)使其更強(qiáng)大。 另一方面，量角器不僅與硒定位器有關(guān)，還可以在市場(chǎng)上使用保護(hù)器測(cè)試的許多其他方面和功能，從而增加了更多的內(nèi)容，我們最終將在量角器測(cè)試教程中進(jìn)行介紹。

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

總結(jié)

以上是生活随笔為你收集整理的分度器中硒定位器的完整指南（示例）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。