javascript - 结合 Protractor 定位器

Question

如果我想找一个也有特定类的中继器怎么办？或者，如果我想查找包含文本的绑定(bind)？

如果我想通过 repeater OR CSS 选择器(匹配具有特定 repeater 表达式 OR 的元素，例如特定类/属性)来查找元素怎么办？

这是一个非常普遍的问题。我对那些具体情况并不完全感兴趣，但对组合这些定位器的一般方式感兴趣。

Protractor 允许链接定位器(即:element(by.this(...)).element(by.that(...)))，但它会寻找 child元素代替。我想做类似的事情，但使用多个定位器过滤元素，或查找与任何 n 个定位器匹配的元素。

目前可以吗？这样的功能是否会因为某些原因而不受欢迎或难以实现？

过滤示例:

// Template:
<li ng-repeat="fruit in fruits">...</li>

// Locator:
var evenFruitElements = element.all(by.repeater("fruit in fruits")).filter(by.css(":nth-child(even)"));

或示例:

// Template:
<span class="something-interesting">...</span>
<span class="something-else-similarly-interesting">...</span>

// Locator:
var interestingElements = element.all(by.css(".something-interesting"), by.css(".something-else-similarly-interesting"));

Answer 1

1. 有一个用于添加自定义定位器的 API:http://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.addLocator

   // Add the custom locator.
   by.addLocator('buttonTextSimple',
   function(buttonText, opt_parentElement, opt_rootSelector) {
   // This function will be serialized as a string and will execute in the
   // browser. The first argument is the text for the button. The second
   // argument is the parent element, if any.
   var using = opt_parentElement,
       buttons = using.querySelectorAll('button');
   
   // Return an array of buttons with the text.
   return Array.prototype.filter.call(buttons, function(button) {
       return button.textContent === buttonText;
   });
   
   // Use the custom locator.
   element(by.buttonTextSimple('Go!')).click();
   

2. CSS 选择器有时可以创造奇迹:

   var interestingElements = element.all(by.css(".something-interesting"), by.css(".something-else-similarly-interesting"));
   

   可以实际实现(在这里找到:https://stackoverflow.com/a/2144801):

   element.all(by.css(".something-interesting,.something-else-similarly-interesting"))