selenium python脚本调用java script 报Message: u'$ is not defined' ; Stacktrace 的解决历程

首先，html如下：js.html

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 4 <title>js</title>
 5 <script type="text/javascript" async=""
 6 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 7 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
 8 rel="stylesheet" />
 9 <script type="text/javascript">
10 $(document).ready(function(){
11 $('#tooltip').tooltip({"placement": "right"});
12 });
13 </script>
14 </head>
15 <body>
16 <h3>js</h3>
17 <div class="row-fluid">
18 <div class="span6 well">
19 <a id="tooltip" href="#" data-toggle="tooltip" title=" selenium-webdriver(python)">hover to see
20 tooltip</a>
21 <a class="btn">Button</a>
22 </div>
23 </div>
24 </body>
25 <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
26 </html>

-----------来自虫师的 selenium2 实战----------

python脚本如下：

use_javascript.py

 1 #coding=utf-8
 2 from selenium import webdriver
 3 import time,os
 4 driver = webdriver.Firefox()
 5 file_path = 'file:///' + os.path.abspath('js.html')
 6 driver.get(file_path)
 7 #######通过 JS 隐藏选中的元素##########第一种方法：
 8 #隐藏文字信息
 9 driver.execute_script('$("#tooltip").fadeOut();')
10 time.sleep(5)
11 #隐藏按钮：
12 button = driver.find_element_by_class_name('btn')
13 driver.execute_script('$(arguments[0]).fadeOut()',button)
14 time.sleep(5)
15 driver.quit()

运行后报错：Message: u'$ is not defined' ; Stacktrace

一开始想了想，应该是jq那边可能有问题，不太懂，好吧，百度之，参考

http://www.cnblogs.com/xiaobaichuangtianxia/p/3785829.html

修改代码，如下：

#encoding:utf-8
from selenium import webdriver
import os,time

driver = webdriver.Firefox()
file_path = 'file:///' + os.path.abspath("js.html")
driver.get(file_path)

if 'HTTP_PROXY' in os.environ: del os.environ['HTTP_PROXY']

#use java script to hide elements
text = driver.find_element_by_id("tooltip")
print  (text.is_displayed())
time.sleep(5)
myjs = 'document.all.user.style.display = "none";
driver.execute_script(myjs)

print "Hide element"
print (text.is_displayed())

#hide the button by using js on elements
button = driver.find_element_by_xpath("//a[@class = 'btn']")
myjs1 =  'document.all.user.style.display = "none";
driver.execute_script(myjs1)
time.sleep(5)

后面运行，报错“ Message: u'document.all.user.style.display is undefined' ”，方法未定义？！

我想这个应该是通过定位元素，然后使用js方法隐藏元素的，既然这个方法不行，那我就分别修改了两个元素的定位方法，如下：

1 myjs = 'document.getElementById("tooltip").style.display = "none";'

2 myjs1 = 'document.getElementsByClassName("Button").style.display = "none";'

重新运行脚本后，发现第1个元素成功被隐藏了，第二个报错 getElementsByClassName 未定义，百度了下，发现getElementsByClassName不是js的原生方法，要给他封装到js中去，所以只能去改html了（以后要是不能改html的话，我觉得那是一件很痛苦的事），加了段方法定义：

script type="text/javascript">
function getClass(tagname, className) { //tagname指元素，className指class的值
         //判断浏览器是否支持getElementsByClassName，如果支持就直接的用
            if (document.getElementsByClassName) {   
                return getElementsByClassName(className);
            }
            else {    //当浏览器不支持getElementsByClassName的时候用下面的方法
                var tagname = document.getElementsByTagName_r(tagname);  //获取指定元素
                var tagnameAll = [];     //这个数组用于存储所有符合条件的元素
                for (var i = 0; i < tagname.length; i++) {     //遍历获得的元素
                    if (tagname[i].className == className) {     //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll
                        tagnameAll[tagnameAll.length] = tagname[i];
                    }
                }
                return tagnameAll;
            }
        }
    </script>

加完后，运行调用getClass时，又报getClass未定义！这个搞了我很久，我找了各种关于getElementsByClassName的文档，和js方法定义，插入html，最终运行时，还是会报调用的方法未定义！后面查找中看到这个：http://blog.csdn.net/cutbug/article/details/1834577

看了下，对比我定义js方法的语法，发现我的语法有问题！赶紧把

function getClass(tagname, className) {} 改为 getClass function(tagname, className)

运行！成功了！

顶！这个语法问题，真的是让我这个菜鸟搞破了脑袋，基础不好，不懂js就是辛苦！前前后后，起码花了一天弄这个，成功了是好！但还是看到很多自己的不足，得继续努力！

最终html添加代码如下：

<script type="text/javascript">
    getClass = function(tagname, className) { //tagname指元素，className指class的值
                var tagname = document.getElementsByTagName(tagname);  //获取指定元素
                var tagnameAll = [];     //这个数组用于存储所有符合条件的元素
                for (var i = 0; i < tagname.length; i++) {     //遍历获得的元素
                    if (tagname[i].className == className) {     //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll
                        tagnameAll[tagnameAll.length] = tagname[i];
                    }
                }
                return tagnameAll;
            
        }
        

</script>

python脚本最终如下：

 1 #encoding:utf-8
 2 from selenium import webdriver
 3 import os,time
 4 
 5 driver = webdriver.Firefox()
 6 file_path = 'file:///' + os.path.abspath("js.html")
 7 driver.get(file_path)
 8 
 9 if 'HTTP_PROXY' in os.environ: del os.environ['HTTP_PROXY']
10 
11 #use java script to hide elements
12 text = driver.find_element_by_id("tooltip")
13 print  (text.is_displayed())
14 time.sleep(5);
15 myjs = 'document.getElementById("tooltip").style.display = "none";'
16 driver.execute_script(myjs)
17 
18 print "Hide element"
19 print (text.is_displayed())
20 
21 #hide the button by using js on elements
22 button = driver.find_element_by_xpath("//a[@class = 'btn']")
23 myjs1 = 'getClass("a","btn")[0].style.display = "none";'
24 driver.execute_script(myjs1)
25 time.sleep(5)
26 
27 driver.quit()

posted on 2014-11-26 20:29 sola_tester 阅读(1488) 评论(0) 编辑收藏举报