元素exist/present/visible(vanish)/enable的区别

一、判断元素exist/present/visible(vanish)/enable的区别：

1、首先，从selenium代码上来区别：

1）exist/present表示元素个数是否大于0

  List<WebElement> elements = driver.findElements(wrapper.getBy(locator));
  return elements.size() > 0;

2）visible 检查是否可见

  return driver.findElement(wrapper.getBy(locator)).isDisplayed();

3）enable 检查是否可编辑

 return driver.findElement(By.cssSelector("a > font")).isEnabled()

2、其次， 从html源代码来看：

1）exist/present， 表示给出的locator， 整个html上是否能找到，可以用seleniumIDE 先去find，try一下是否有该元素；

2）visible， 是检查元素的样式或父级及以上元素含有不可显示属性，（隐藏一个元素可以用设置css的'visibility'属性为'hidden'，也可以设置'display'属性为'none'）

3）enable， 针对每个元素检查其特定属性， 比如， input 元素， 检查其是否 readonly

二、通过上面对几种元素检查的区别后， 现在对于以下这种异常解决就比较有的放矢~

Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with Command duration or timeout: 31 milliseconds

1）首先检查xpath, 确定元素是否present;

2) 检查元素是否visible, 通过element对象提供的isDisplayed()或者selenium IDE的 assertVisible来确认；

3）检查element是否存在多个地方：

选取元素的时候，可能存在两个相同的，但一次只会用一个，这两个区别就有一个样式的属性是不可见的，这个时候选取元素时要去掉不可见属性，如下例子：

WebElement label = driver.findElement(By.xpath("//label[text()='User Name:' and not(contains(@style,'display:none'))]"));

display: block; 则是可见。

三、对于一些通过class属性设置某section是否显示，此时检查visibility，可以直接拿该元素（带上特定class属性值的元素）来判定

1）比如，某div如下：

<div id="accordians-ivrMenu-ivrAccordionPanel-prompt" class="x-collapsable-row x-collapsable-selected">

观察该div class变化， 可以看出， 当该div区域块里的内容不展示时， 该div元素变成：

<div id="accordians-ivrMenu-ivrAccordionPanel-prompt" class="x-collapsable-row">

所以，检查该div是否展示， 可以判断assertVisible元素：

//div[@id='accordians-ivrMenu-ivrAccordionPanel-prompt' and contains(@class,'x-collapsable-selected')]

2）再比如， 对input/textArea这种里面有填充默认值的， 测试时，检查鼠标定位到文本区域里后，默认值是否消失

界面：

<div id="rc-gen248-transferTo" class="x-form-item x-form-item-align-left" style="">
  <label id="rc-gen248-transferTo-fieldLabel" class="x-form-label" style="width: 80px;" title="">Transfer to:</label>
  <div id="rc-gen248-transferTo-field" class="x-form-textfield x-form-emptyText-visible" style="width: 220px;">
     <input class="x-form-input" type="text" maxlength="64" value="" name="transferTo" onfocus="RC.Selection.clearSelection();" tabindex="1" style="text-align: left;">
     <div class="x-form-emptyText">Enter number</div>
  </div>
</div>

要验证Enter Number是否消失的方式：
assertVisible:  //div[contains(@id,'transferTo-field') and contains(@class,'x-form-emptyText-visible')] 判断是否返回false.

误区:

取getValue()  //div[contains(@id,'transferTo')]//input

或者getText()  //div[contains(@id,'transferTo')]//div[@class='x-form-emptyText'] 判断是否为空， 都是错误的