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()用法。