【转】【WebDriver】不可编辑域和日历控件域的输入 javascript

http://blog.csdn.net/fudax/article/details/8089404

今天用到日历控件，用第一个javascript执行后页面上的日期控件后，在html中可以看到生效日期的input中有value值了，但是页面的生效日期仍然显示空白，这时我在该页面，点提交后，页面会提示生效日期不能为空，也是就是实际上点提交时，还是判断了生效日期的value值是空的。

document.getElementById('EffectDate').removeAttribute('readOnly');document.getElementById('EffectDate').setAttribute('value','2014-04-26');

而试了网上的另一个javascript用法，用下面javascript解决了这个日期控件的输入：
document.getElementById('EffectDate').value='2014-04-27';
为咋上面的javascript不可以呢？

 

String js="var dateTime=document.getElementsByName('"+name+"')[0];dateTime.removeAttribute('readOnly');dateTime.setAttribute('value','"+date+"');";

---这句中的[0]，指document.getElementsByName返回的 是数组，表是找第一个Name，而ID是唯一性的。

 

 1   /**
 2    * 通过javascript，根据日期控件的ID，设置日期值
 3    * @param id
 4    * @param date
 5    */ 
 6   public  void dateTime(String id,String date){
 7 //         String jsStr="var dateTime=document.getElementById('"+id+"');"
 8 //                 + "dateTime.removeAttribute('readOnly');"
 9 //                 + "dateTime.setAttribute('value','"+date+"');";
10 //         JavascriptExecutor js = (JavascriptExecutor) driver;
11 //         js.executeScript(jsStr);
12        
13 //      String js="document.getElementById('"
14 //                  +id+"').removeAttribute('readOnly');document.getElementById('"
15 //                  +id+"').setAttribute('value','"
16 //                  +date+"');";
17       
18        String js = "document.getElementById('" + id + "').value='" + date + "'"; 
19       ((JavascriptExecutor) driver).executeScript(js);
20       System.out.println(js);
21       
22   }

 

 

 

 

 ------------------------------------------

  网页上往往会有些输入域是readonly的，但是它的值又可以通过其他控件进行赋值，比如日历控件。这种可编辑域的输入通过selenium.type或者WebDriver.sendKeys都无法做到，但是我们可以考虑通过DOM赋值，下面仅以WebDriver为例，简单讲解一下如何做到。请注意，相关的被引用的对象和方法的声明请参见http://blog.csdn.net/fudax/article/details/7879910和http://blog.csdn.net/fudax/article/details/7879915这两个完整的工具类，整个工程的代码参见https://github.com/fudax/star-framework。

      这里先讲一下document的几个getElement的方法：

1、  document.getElementById，由于ID是页面元素的唯一性标示属性，所以这种方法返回的元素是单个的。

2、  document.getElementsByName，与ID不同，Name不是唯一标示属性，所以返回的是一个对象数组，可以从字面上看出是getElements而不是getElement；

3、  document.getElementsByTagName，与getElementsByName原理相同。

      了解了这三种方法，我们就可以通过执行JS去修改控件属性值了，可编辑域要输入的内容一般都是value属性，当然innertext也是可以的。具体方法如下：

[java] view plaincopyprint?

1. /** 
2.  * readonly text box or richtext box input. 
3.  *  
4.  * @param by the attribute of the element, default support is TagName/Name/Id 
5.  * @param byValue the attribute value of the element 
6.  * @param text the text you want to input to element 
7.  * @param index the index of the elements shared the same attribute value 
8.  * @throws RuntimeException 
9.  * @throws IllegalArgumentException 
10.  */  
11. protected void sendKeysByDOM(String by, String byValue, String text, int index) {  
12.     String js = null;  
13.     boolean isSucceed = false;  
14.       
15.     if (by.equalsIgnoreCase("tagname")) {  
16.         js = "document.getElementsByTagName('" + byValue + "')[" + index + "].value='" + text + "'";  
17.     } else if (by.equalsIgnoreCase("name")) {  
18.         js = "document.getElementsByName('" + byValue + "')[" + index + "].value='" + text + "'";  
19.     } else if (by.equalsIgnoreCase("id")) {  
20.         js = "document.getElementById('" + byValue + "').value='" + text + "'";  
21.     } else {  
22.         throw new IllegalArgumentException("only can find element by TagName/Name/Id");  
23.     }  
24.   
25.     try {  
26.         driver.executeScript(js);  
27.         isSucceed = true;  
28.         pass("input text [ " + text + " ] to element [ " + by + " ]...");  
29.     } catch (WebDriverException e) {  
30.         LOG.error(e);  
31.     } catch (Exception e) {  
32.         throw new RuntimeException(e.getMessage());  
33.     }  
34.     operationCheck(isSucceed);  
35. }  

      可以看得出这个测试方法有4个参数，使用起来不是很方便，我们可以继续重载出更简单实用的方法：

[java] view plaincopyprint?

1. /** 
2.  * readonly text box or richtext box input, finding elements by element id. 
3.  *  
4.  * @param elementId the id of the element 
5.  * @param text the text you want to input to element 
6.  * @throws RuntimeException 
7.  * @throws IllegalArgumentException 
8.  */  
9. protected void sendKeysById(String elementId, String text) {  
10.     sendKeysByDOM("Id", elementId, text, 0);  
11. }  
12.   
13. /** 
14.  * readonly text box or richtext box input, finding elements by element name. 
15.  *  
16.  * @param elementName the name of the element 
17.  * @param text the text you want to input to element 
18.  * @param elementIndex the index of the elements shared the same name, begins with 0 
19.  * @throws RuntimeException 
20.  * @throws IllegalArgumentException 
21.  */  
22. protected void sendKeysByName(String elementName, String text, int elementIndex) {  
23.     sendKeysByDOM("Name", elementName, text, elementIndex);  
24. }  
25.   
26. /** 
27.  * readonly text box or richtext box input, finding elements by element tag name. 
28.  *  
29.  * @param elementTagName the tag name of the element 
30.  * @param text the text you want to input to element 
31.  * @param elementIndex the index of the elements shared the same tag name, begins with 0 
32.  * @throws RuntimeException 
33.  * @throws IllegalArgumentException 
34.  */  
35. protected void sendKeysByTagName(String elementTagName, String text, int elementIndex) {  
36.     sendKeysByDOM("TagName", elementTagName, text, elementIndex);  
37. }  

[java] view plaincopyprint?