Xpath到CSS转换

Question

我有转换几个特定的​​XPath到CSS选择器的问题。 尝试了几个接近，但最后放弃：/也许它是特定于我的测试框架（量角器），或者我犯了错误。

任何人都可以请帮助下面四个转换？

findElement(by.xpath('//*[@id="availableDomains"]/li[1]')) 

pageMain.prototype.newUser = function (userId) { 
    return element(by.xpath('//tbody//tr[td[contains(text(), "' + userId + '")]]')); 
}; 

UsersPage.prototype.rowFor = function (user) { 
    return element(by.xpath('//tr[@data-user="' + user.id + '"]')); 
}; 

findElement(by.xpath('//*[@class="table table-striped"]/tbody/tr[1]/td[5]')) 

Answer 1

有些事情还是比较容易通过的XPath拿到，尽管recommendations不使用XPath定位技术。您可以虽仍不同的解决这个问题采用不同的定位机制：

element(by.xpath('//*[@id="availableDomains"]/li[1]')) 

将被转换为下面的CSS选择器：

$('#availableDomains li:first-child') 

---

相反的：

element(by.xpath('//tbody//tr[td[contains(text(), "' + userId + '")]]')) 

的可以使用by.cssContainingText：

element(by.cssContainingText("tbody tr td", userId)); 

---

这一部分：

element(by.xpath('//tr[@data-user="' + user.id + '"]')); 

可以转换为：

$('tr[data-user="' + user.id + '"]'); 

---

作为奖励，如果要执行 “从来没有使用的XPath” 的规则，有一个eslint-plugin-protractor ESLint plugin会警告您在代码库中的by.xpath()用法。