如何在跨度下拉菜单中选择元素 cssSelector webdriver Java
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29259697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select element in span dropdown menu cssSelector webdriver Java
提问by Elsid
I am trying to select these elements in webdriver, after I click a button which opens a drop down menu. I can click the button fine and it drops down with.
单击打开下拉菜单的按钮后，我试图在 webdriver 中选择这些元素。我可以很好地单击按钮，然后它就会下降。
WebElement providers = driver.findElement(By.id("providers"));
providers.click();
HTML
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
I'm trying to select the Googleelement.
我正在尝试选择Google元素。
I have tried both of these and it doesn't work:
这两个我都试过了，还是不行：
driver.findElement(By.cssSelector(".imageContainer[Google]"));
driver.findElement(By.cssSelector(".providers-list > li[ng-click*= searchProvider(0)]"));
It runs these perfectly fine:
它运行得非常好：
// 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();
采纳答案by JacekM
It may be good for you to familiarize yourself with basic CSS selectors. Try playing this game, I've learned a lot from it: https://flukeout.github.io/
熟悉基本的 CSS 选择器可能对您有好处。尝试玩这个游戏，我从中学到了很多：https: //flukeout.github.io/
Now back to your original question. Based on the part of the code you provided the shortest possible selector is simply span
现在回到你最初的问题。根据您提供的代码部分，最短的选择器很简单span
driver.findElement(By.cssSelector("span"));- it says give me a html tag
But I assume you have a lot of spans on your page so this selector may not be unique.
driver.findElement(By.cssSelector("span"));- 它说给我一个 html 标签但我假设你的页面上有很多跨度，所以这个选择器可能不是唯一的。
driver.findElement(By.cssSelector("#providers-list span"));- search for an element with id=providers-list and within this element search for a tag span. This probably will be enough, but in case you have many spans within this particular div you may do:
driver.findElement(By.cssSelector("#providers-list span"));- 搜索具有 id=providers-list 的元素，并在该元素中搜索标签跨度。这可能就足够了，但是如果您在这个特定的 div 中有很多跨度，您可以这样做：
driver.findElement(By.cssSelector("#providers-list .imageContainer span"));- search for element with id=providers-list, within this element search for a descendant with class attribute containing imageContainer and then for a tag span.
driver.findElement(By.cssSelector("#providers-list .imageContainer span"));- 搜索 id=providers-list 的元素，在该元素中搜索具有包含 imageContainer 的 class 属性的后代，然后搜索标签跨度。
You may also provide the full path to the element:
driver.findElement(By.cssSelector("#providers-list > ul > li > .imageContainer > span"));- '>' says go to direct child while space means go to a descendant (no matter how deep).
您还可以提供元素的完整路径：
driver.findElement(By.cssSelector("#providers-list > ul > li > .imageContainer > span"));- '>' 表示转到直接子级，而空格表示转到后代（无论多深）。
EDIT
编辑
If ng-click is the only unique attribute then the code will look like this
driver.findElement(By.cssSelector("#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span"));
如果 ng-click 是唯一的唯一属性，那么代码将如下所示
driver.findElement(By.cssSelector("#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span"));
EDIT2
编辑2
You probably need to wait for element to become visible after you expand dropdown (after you do providers.click())
您可能需要在展开下拉列表后等待元素变为可见（在您执行 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)));
回答by alecxe
It should be:
它应该是：
div.imageContainer > span
which basically means:
这基本上意味着：
give me the
spanelement which is a direct child of adivelement withclass="imageContainer".
给我一个
span元素，它是一个元素的直接子div元素class="imageContainer"。
To get the actual text, use .text:
要获取实际文本，请使用.text：
WebElement span = driver.findElement(By.cssSelector("div.imageContainer > span"));
System.out.println(span.text);
If you want to match the spanby text, you can approach it with xpath:
如果要匹配spanby text，可以使用以下方法进行处理xpath：
WebElement google = driver.findElement(By.xpath("//div[@class='imageContainer']/span[. = 'Google']"));
google.click();
Or, you can also rely on ng-clickattribute of the lielement:
或者，您也可以依赖元素的ng-click属性li：
WebElement span = driver.findElement(By.cssSelector("li[ng-click$='(0)'] > div.imageContainer > span"));
where $=is an ends-with selector.
哪里$=是结尾选择器。
