python selenium系列（七）使用Chrome Console驗證XPATH和CSS

一 前言

在先前的系列介紹中，咱們知道Selenium Web UI腳本開發須要先定位元素，除了基本的id，name，class  name，tag name等，能夠直接從網頁源碼中查看，但像xpath、css，它們已經再也不是能夠定位的一串字符，並且表達式，因此，不可避免的需求就是如何驗證用於元素定位的xpath、css表達式是否正確呢？總不能每次調整就靠執行腳原本驗證吧，那樣將會大大下降開發效率。

 

固然，若是細心的你閱讀過python selenium系列（二）元素定位方式，可能會好奇了，能夠藉助瀏覽器或插件copy xpath css啊，也免去驗證了。確實，利用此方法有些時候很是便利，但有時工具返回的結果就不盡人意了，冗長、繁瑣、不利維護。此時，就要發揮我們人類的能動性重寫了，於是就須要對編寫的表達式進行驗證。

 

二 Chrome驗證流程和方法

1.       使用chrome瀏覽器打開待測試的網頁，按F12鍵就能夠看到開發工具了，如圖：

 

如圖中紅框標識的位置，能夠控制開發工具的位置，上圖是設置單獨窗口的狀態。

2.       在開發工具的下面點擊console，能夠看到命令提示光標 >,等待接收命令，如圖：

 

3.       驗證css，命令： $$(「」)，雙引號內寫css表達式，如圖：

     

如圖，咱們用簡潔的css定位到了「平山的博客」，而且驗證了表達式寫法的正確性。如今咱們使用工具直接得到該元素的表達式，比較下哪一個更人性化，，工具傻瓜式得到的表達式以下：

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

結果不言而喻了吧。

接下來，使用CTRL+L鍵清空命令窗口，進行xpath的驗證吧。

4.       驗證xpath，命令：$x(「」)，雙引號內寫xpath表達式，如圖：

 

如圖，咱們用簡潔的xpath定位到了「平山的博客」，而且驗證了表達式寫法的正確性。直接使用工具得到元素的xpath路徑是這樣的：

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

 

 由此可知，咱們能夠直接利用chrome自帶的開發工具進行xpath、css的驗證，簡單、方便。

 

三 其餘資源

    關於python學習、分享、交流，筆者開通了微信公衆號【小蟒社區】，感興趣的朋友能夠關注下，歡迎加入，創建屬於咱們本身的小圈子，一塊兒學python。