pythonselenium系列(七)使用ChromeConsole验证XPATH和CSS

一前言

成都创新互联作为成都网站建设公司,专注重庆网站建设公司、网站设计,有关成都企业网站建设方案、改版、费用等问题,行业涉及软装设计等多个领域,已为上千家企业服务,得到了客户的尊重与认可。

在先前的系列介绍中,我们知道Selenium Web UI脚本开发需要先定位元素,除了基本的id,name,class  name,tag name等,可以直接从网页源码中查看,但像xpath、css,它们已经不再是可以定位的一串字符,而且表达式,所以,不可避免的需求就是如何验证用于元素定位的xpath、css表达式是否正确呢?总不能每次调整就靠执行脚本来验证吧,那样将会大大降低开发效率。

 

当然,如果细心的你阅读过python selenium系列(二)元素定位方式,可能会好奇了,可以借助浏览器或插件copy xpath css啊,也免去验证了。确实,利用此方法有些时候非常便利,但有时工具返回的结果就不尽人意了,冗长、繁琐、不利维护。此时,就要发挥咱们人类的能动性重写了,因而就需要对编写的表达式进行验证。

 

二 Chrome验证流程和方法

1.      使用chrome浏览器打开待测试的网页,按F12键就可以看到开发工具了,如图:

 python selenium系列(七)使用Chrome Console验证XPATH和CSS

如图中红框标识的位置,可以控制开发工具的位置,上图是设置单独窗口的状态。


2.      在开发工具的下面点击console,可以看到命令提示光标 >,等待接收命令,如图:

 python selenium系列(七)使用Chrome Console验证XPATH和CSS

3.      验证css,命令: $$(“”),双引号内写css表达式,如图:

     python selenium系列(七)使用Chrome Console验证XPATH和CSS

如图,我们用简洁的css定位到了“平山的博客”,并且验证了表达式写法的正确性。现在我们使用工具直接获得该元素的表达式,比较下哪个更人性化,,工具傻瓜式获得的表达式如下:

body > div.Content-box > div > div.header-bg > div > div.header-top > div.right > a

结果不言而喻了吧。


接下来,使用CTRL+L键清空命令窗口,进行xpath的验证吧。


4.      验证xpath,命令:$x(“”),双引号内写xpath表达式,如图:

 python selenium系列(七)使用Chrome Console验证XPATH和CSS


如图,我们用简洁的xpath定位到了“平山的博客”,并且验证了表达式写法的正确性。直接使用工具获得元素的xpath路径是这样的:

/html/body/div[2]/div/div[1]/div/div[1]/div[2]/a

 

 由此可知,我们可以直接利用chrome自带的开发工具进行xpath、css的验证,简单、方便。

 

三 其他资源

    关于python学习、分享、交流,笔者开通了微信公众号【小蟒社区】,感兴趣的朋友可以关注下,欢迎加入,建立属于我们自己的小圈子,一起学python。


网站题目:pythonselenium系列(七)使用ChromeConsole验证XPATH和CSS
URL链接:http://pwwzsj.com/article/pegdjp.html