正在查找用于硒测试的 CSS 选择器

Question

谁能告诉我如何正确找到 css select 或以下代码。我需要知道 css selector 而不是 xpath，因为 Web 元素不能使用 xpath。

<div id="drag" class="dojoDndSource dojoDndTarget dojoDndContainer" style="height:300px;width:250px;font-size:1.2em;border:2px solid #ccc; padding:1em;overflow:auto; " data-dojo-type="dojo.dnd.Source">
<div id="1" class="dojoDndItem" style="padding:.5em;">1</div>
<div id="2" class="dojoDndItem" style="padding:.5em;">2</div>
<div id="3" class="dojoDndItem dojoDndItemAnchor" style="padding:.5em;">3</div>
<div id="99" class="dojoDndItem" style="padding:.5em;">T4</div>
<div id="100" class="dojoDndItem" style="padding:.5em;">T5</div>

我希望 select div 和 id="99"。我试过使用以下方法：

driver.findElement(By.cssSelector(".T4"));
driver.findElement(By.cssSelector("//input[@id='gbqfq']"));

Answer 1

您正在使用带有 By.cssSelector() 的 XPath 选择器，这是错误的，在 css 中 . 表示 class 而您正在尝试传递文本.目前您无法使用 css 选择器执行基于文本的搜索。 XPath 是这种情况下的最佳选择。

如果您想使用 cssSelector，

nth-child() 使您能够找到具有索引的子元素。参见 this

//css walk thorugh with index
.dojoDndItem:nth-child(1)

但是，在这种情况下，我更喜欢 xpath 基于文本的搜索

//div[.='1']
//div[.='T4']

..等等

Answer 2

您用来定位相关元素的代码都是错误的，如下所述：

1- driver.findElement(By.cssSelector(".T4"));
因为你你把“。”在 "T4" 之前，它将搜索具有 class T4 的元素，该元素不存在 。 "T4",其实就是你要定位的元素的innerHTML/text。

2-driver.findElement(By.cssSelector("//input[@id='gbqfq']"));
正如 @BoltClock 评论的那样，这实际上是您尝试与 cssSelector 方法一起使用的 xpath。

您可以使用下面的 代码使用 xpath 定位元素，而不是 :

driver.findElement(By.xpath("//div[.='T4']"));

这将精确定位 div 元素 innerHTML/text 作为 'T4'.

此外，您还可以使用'id'，只要它是唯一的并且不会动态变化，如下所示：

1- driver.findElement(By.xpath("//div[@id='99']"));
这将找到 ID 为“99”的 div 元素。

2- driver.findElement(By.id("99"));
这将定位 ID 为“99”的元素。

3-driver.findElement(By.cssSelector("div[id='99']"));
这还将定位 ID 为“99”的 div 元素。

Answer 3

您可以直接使用 driver.findElement(By.id("99")); 或者如果您想使用 css 选择器，请使用下面的选择器。如果您尝试通过 id 获取，则应使用 #；如果您通过 class 名称获取，则应使用 .。 id选择器是最快的，所以尽量使用id选择器。

driver.findElement(By.cssSelector("#99"));

正在查找用于硒测试的 CSS 选择器

Finding CSS Selector for selenium test

html

css

selenium