如何在跨度下拉菜单中选择元素 cssSelector webdriver Java

Question

单击打开下拉菜单的按钮后，我试图在 webdriver 中选择这些元素。我可以点击按钮很好，它会随着下降。

WebElement providers = driver.findElement(By.id("providers"));
      providers.click();

HTML

<input id="providers" class="providersOff" type="button">
<div id="providers-list" class="">
    <ul>
        <li ng-click="searchProvider(0)">
            <div class="imageContainer">
                <span>Google</span> <--TRYING TO SELECT THIS

我正在尝试选择 Google 元素。

这两种方法我都试过了，还是不行：

driver.findElement(By.cssSelector(".imageContainer[Google]"));
driver.findElement(By.cssSelector(".providers-list > li[ng-click*= searchProvider(0)]"));

它运行得非常好：

  // Assign search-bar & send keys
      WebElement searchbar = driver.findElement(By.id("txtSearch"));
      searchbar.sendKeys("Pizza");


      // Assign provider drop-down & click
      WebElement providers = driver.findElement(By.id("providers"));
      providers.click();

Answer 1

应该是：

div.imageContainer > span

这基本上意味着：

给我span 元素，它是div 元素与class="imageContainer" 的直接子元素。

要获取实际文本，请使用.text：

WebElement span = driver.findElement(By.cssSelector("div.imageContainer > span"));
System.out.println(span.text);

---

如果你想通过文本匹配span，你可以使用xpath：

WebElement google = driver.findElement(By.xpath("//div[@class='imageContainer']/span[. = 'Google']"));
google.click();

---

或者，您也可以依赖li 元素的ng-click 属性：

WebElement span = driver.findElement(By.cssSelector("li[ng-click$='(0)'] > div.imageContainer > span"));

其中$= 是ends-with selector。

Answer 2

熟悉基本的 CSS 选择器可能对您有好处。试试玩这个游戏，我从中学到了很多：https://flukeout.github.io/

现在回到你原来的问题。根据您提供的代码部分，最短的选择器就是span

driver.findElement(By.cssSelector("span")); - 它说给我一个 html 标签 但我假设你的页面上有很多跨度，所以这个选择器可能不是唯一的。

driver.findElement(By.cssSelector("#providers-list span")); - 搜索 id=providers-list 的元素并在此元素中搜索标签跨度。这可能就足够了，但如果你在这个特定的 div 中有很多跨度，你可以这样做：

driver.findElement(By.cssSelector("#providers-list .imageContainer span")); - 搜索 id=providers-list 的元素，在此元素中搜索具有包含 imageContainer 的类属性的后代，然后搜索标签跨度。

您还可以提供元素的完整路径： driver.findElement(By.cssSelector("#providers-list > ul > li > .imageContainer > span")); - '>' 表示去直接孩子，而空格表示去后代（无论多深）。

编辑

如果 ng-click 是唯一的唯一属性，那么代码将如下所示 driver.findElement(By.cssSelector("#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span"));

EDIT2

您可能需要在展开下拉菜单后等待元素变得可见（在您执行 providers.click() 之后）

WebDriverWait wait = new WebDriverWait(driver, 10);
String selector = "#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span";
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(selector)));