使用 css 选择器获取元素 table 中的多个元素

Question

我正在使用 Selenide/Selenium 编写我的 java 自动化脚本，最近我遇到了一个问题。我想从与第二个元素比较的同一行中取出一个元素。 Html 示例代码：

<tr ng-repeat="testing" class="ng-scope" style="">
    <td class="ng-binding">Style</td>
    <td ng-if="testing2" class="ng-binding ng-scope">1</td>
    <td class="ng-binding">5%</td>
</tr>
<tr ng-repeat="testing" class="ng-scope" style="">
    <td class="ng-binding">Mask</td>
    <td ng-if="testing2" class="ng-binding ng-scope">2</td>
    <td class="ng-binding">8%</td>
</tr>
...

让我们想象会有更多这样的人。最重要的是这些可以随机化。每一次。他们取决于最后一页我 select 以及如何。

所以基本上我想搜索测试，它有 8%。

我试过但不知道如何处理。它将所有元素存储在列表中。但是我得到 css select 或前面有 Chrome 驱动程序信息。我可以把它取下来，但我认为有更好的解决方案：

List<WebElement> list = getWebDriver().findElements(By.cssSelector("[ng-
repeat='hyvitisLiik in vm.taotluseHyvitised'] > [class='ng-binding']"));
for(int i = 0; i < list.size(); i++){
  logger.info(list.get(1));
}

我也试过用这段代码获取一个元素：

int counter = $$(By.cssSelector("tr > [class='ng-binding']")).size();
for (int i = 0; i < counter; i++) {
SelenideElement word= $$(By.cssSelector(lokaator)).get(counter);
word.getText();
}

此代码采用 "Mask" 和一个“8%”元素。但我真正想要的是测试 getText 给定值是否为 "Mask"，取百分比值并进行比较。例如：在 Web 中搜索单词 "Mask"，取百分比值（在这种情况下为 8%）并使用断言验证它正好是 8%。

有什么方法可以设置CSS select或者用索引，比如

tr[1] > [class='ng-binding']

哪个 select 用于第二个 tr class？还有其他建议可以找到我想要的吗？

编辑： 是否有可能使用 css select 或仅使用一行来获取元素，如 xpath 选项所示，以回答@Guy:

所写的内容

WebElementelement=getWebDriver().findElement(By.xpath("//td[text()='Mask']/followingsibling::td[2]"));
element.getText(); // 8%

Answer 1

您可以尝试使用以下 css 选择器，它可能会对您有所帮助。

table>tr:nth-child(2)>td ---- To get the first td element of second row

table>tr:nth-child(2)>td:nth-child(3) --- To get last td element of second row

在Java,

List<WebElemet> lstRows=getWebDriver().findElements(By.cssSelector("table>tr[ng-repeat='testing']");

for(WebElement row:lstRows){
   if(row.findElement(By.cssSelector("td")).getText().equals("Mask")){
  {
  String percentage= row.findElement(By.cssSelector("td:last-child")).getText();
   if(percentage.equals("8%")
     System.out.println("pass");
   else
     System.out.println("fail");
  break;
  }
}

Answer 2

使用CSS和Java，我们可以将其执行为：

List<WebElement> elements = getWebDriver().findElements(By.cssSelector("tr[ng-repeat='testing']"));
    for(int i = 0; i < elements.size(); i++) {
        if(elements.get(i).findElement(By.cssSelector("td")).getText().contains("Mask")) {
            //assert elements.get(i).findElements(By.cssSelector("td")).get(2).getText() equals 8%
    }
}

或者，如果你使用xpath，你可以通过比较文本来实现 '//tr[@ng-repeat='testing']/td[包含(text(),'Mask')]/../td[3]'定位器

Answer 3

您可以使用 xpath 通过 Mask 文本定位元素

WebElement element = getWebDriver().findElement(By.xpath("//td[text()='Mask']/following-sibling::td[2]"));
element.getText(); // 8%

Answer 4

如您所愿 search in web for the word "Mask", take the percent value (in that case it is 8%) and validate with assert that it is exactly 8%，您可以创建一个函数，该函数将采用 2 种字符串类型的参数，即文本 Mask 和文本 8%。从 main() 或 test() class 调用提供参数的函数。在被调用的函数中，我们可以轻松地检索文本并断言百分比。您的代码将如下所示：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;

public class Q46088968_validate_score 
{
    static WebDriver driver;
    public static void main(String[] args) 
    {
        System.setProperty("webdriver.chrome.driver", "C:\Utility\BrowserDrivers\chromedriver.exe");
        driver = new ChromeDriver();
        driver.get("https://www.gmail.com");
        //other actions
        validate_score("Mask", "8%");
        driver.quit();
    }

    public static void validate_score(String my_text, String expected_percentage)
    {
        String actual_percentage = driver.findElement(By.xpath("//td[.='" + my_text + "']//following::td[2]")).getText();
        Assert.assertEquals(actual_percentage, expected_percentage);
    }
}

Answer 5

试试这个

List<WebElement> elements = getWebDriver().findElements(By.xpath("//td[text()='Mask']/../td[3]"));

    int pass = 0;
    for(WebElement e | elements) {
       if(!(e.getText().equals("8%"))) {
          pass = 1
       }
    }

    if(pass == 0) {
System.out.println("Pass");
} 
else {
System.out.println("Fail");
}

使用 css 选择器获取元素 table 中的多个元素

Taking element with css selector with multiple elements in a table

java

selenium

css-selectors

ui-automation

selenide