如何 select span 下拉菜单中的元素 cssSelector webdriver Java

Question

我正在尝试 select 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

我正在尝试 select 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

这基本上意味着：

give me the span element which is a direct child of a div element with 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 的 class 属性的后代，然后搜索标签跨度。

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

编辑

如果 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)));

如何 select span 下拉菜单中的元素 cssSelector webdriver Java

How to select element in span dropdown menu cssSelector webdriver Java

css

java

selenium

webdriver

css-selectors