如何使用 Selenium Webdriver 在 HTML 的上一行找到 class 名称

Question

我有以下 HTML 代码：

<!-- language: lang-html -->
<td class="Schedule-col details">
<td class="Schedule-col timeslots">
<div class="timeslots-container" style="opacity: 1; visibility: visible;">
<div class="timeslot d1422270000000 row0 col0 outside" data-time="1422270000000" style="width: 3.22581%;">
<div class="timeslot d1422356400000 row0 col1 outside" data-time="1422356400000" style="width: 3.22581%;">
<div class="timeslot d1422442800000 row0 col2 outside" data-time="1422442800000" style="width: 3.22581%;">
<div class="timeslot d1422529200000 row0 col3 outside" data-time="1422529200000" style="width: 3.22581%;">
<div class="timeslot d1422615600000 row0 col4 outside" data-time="1422615600000" style="width: 3.22581%;">
<input class="row0 col4 widget" type="text" autocomplete="off">
</div>
<div class="timeslot d1422702000000 row0 col5 current" data-time="1422702000000" style="width: 3.22581%;">
<input class="row0 col5 widget" type="text" autocomplete="off">
</div>

基本上我想找到带有class="row0 col5 widget"的元素，找到它之后，我想在HTML中上一级并找到<div class="timeslot d1422702000000 row0 col5 current"然后检查是否class 值包含 current 或 outside。

我使用 Webdriver 编写了这段代码，我可以找到该元素。

int ColIndex=5;
int RowIndex=0; 

WebElement pointer = driver.findElement(By.cssSelector(".row"+RowIndex+".col1"+ColIndex+".widget")); 
String xx=pointer.getAttribute("class");
System.out.println(xx);

使用这段代码我可以找到元素 <input class="row0 col5 widget" type="text" autocomplete="off"> 但我不知道如何向上一级找到 <div class="timeslot d1422702000000 row0 col5 current" 并检查它是否包含 current .

我无法直接找到timeslot d1422702000000 row0 col5 current，因为d1422702000000这个数字是系统随机生成的。据我所知，我们不能在cssSelector中使用contains。

有什么建议吗？谢谢。

Answer 1

您可以使用 //div[input[@class='row0 col5 widget']] XPath 表达式：

WebElement div = driver.findElement(By.xpath("//div[input[@class='row0 col5 widget']]"));
String xx = div.getAttribute("class");

表达式将匹配 div 元素，该元素具有直接 input 子元素 class="row0 col5 widget"。

当然还有其他选择。例如，要继续您已经开始的工作：

WebElement pointer = driver.findElement(By.cssSelector(".row"+RowIndex+".col1"+ColIndex+".widget"));
WebElement div = pointer.findElement(by.xpath(".."));
String xx = div.getAttribute("class");

其中 .. 会上升到直接父级。

Answer 2

您可以使用 XPath 轴并使用父轴向上一级。 Link:

http://www.w3schools.com/xpath/xpath_axes.asp

如果页面使用jQuery你也可以这样做：

$(this).parent().attr('class');

Answer 3

我只会使用 xpath 表达式来显式检索您要获取的元素。

driver.findElement(By.xpath("//div[contains(@class, 'timeslot')][contains(@class, 'row" + RowIndex + "')][contains(@class, 'col" + ColIndex + "')]"));

应该可以得到你需要的东西，而不需要依赖 DOM 结构，它可能非常脆弱。

并且，您是正确的 -- 并非所有浏览器类型都支持 CssSelector。但是，它在使用 Xpath 时受支持。

edit：当 RowIndex= 0 和 ColIndex=5。

如何使用 Selenium Webdriver 在 HTML 的上一行找到 class 名称

How to find the class name in the upper line of HTML using Selenium Webdriver

html

java

selenium

webdriver

selenium-webdriver