本系列教程使用的python版本是3.6.3。

背景

這一節我們實現一個簡單的ui測試工具。

該工具的作用是訪問某個頁面，然后根據css選擇器去定位頁面上的元素，最后判斷頁面上元素的個數與我們的預期是否相符。

舉一個具體的例子，比如我們去訪問www.itest.info這個頁面，我們需要判斷頁面上class = thumbnail-img的元素存在，并且有4個。因為每一個元素代表一門課程，所以這個斷言的意思是重定向科技主頁上應該有4門主要課程。

視頻講解在這里。

工具設計

我們設計一個命令行工具，給工具傳3個參數。

被訪問頁面的url 頁面上元素的css選擇器 預期的元素數量，頁面上可以存在n個元素，如果傳入0，則表示元素不存在，做反向斷言

所以工具大概是這樣用的: python script_name.py url css_selector length

代碼實現

簡單起見，我們會用到requests-html庫。安裝文檔在這里。

from requests_html import HTMLSessionfrom sys import argvDEBUG = TrueUSAGE = ’’’USAGE:python html_assertion.py www.itest.info .thumbnail-img 4’’’if len(argv) != 4: print(USAGE) exit(1)script_name, url, css_selector, length = argvif url[:4] != ’http’: url = ’http://’ + urlsession = HTMLSession()r = session.get(url)elements = r.html.find(css_selector)def debug(): if DEBUG: print(’*’ * 100) print(f'css選擇器: {css_selector}, 共找到{len(elements)}個元素n') for element in elements: print(element.html) print(element.attrs) print()if len(elements) != int(length): print(f'失敗! 預期{length}個元素，實際存在{len(elements)}個元素n') debug() exit(1)else: print(f'成功!n') debug()

精講

用例失敗之后使用exit(1)表示異常退出，這樣在使用jenkins運行的時候，用例失敗jenkins的job結果也會相應失敗requests-html庫的基本使用參考這里

運行示例

# 失敗情況python html_assertion.py www.itest.info .thumbnail-img 1失敗! 預期1個元素，實際存在4個元素****************************************************************************************************css選擇器: .thumbnail-img, 共找到4個元素<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/7/mission_impossible_cut.jpg'/></div><a href='http://m.4tl426be.cn/courses/7' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/6/120606ineam4nspdc6qdaw.jpg'/></div><a href='http://m.4tl426be.cn/courses/6' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/3/12.jpg'/></div><a href='http://m.4tl426be.cn/courses/3' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/2/13.jpg'/></div><a href='http://m.4tl426be.cn/courses/2' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}# 成功情況python html_assertion.py www.itest.info .thumbnail-img 4成功!****************************************************************************************************css選擇器: .thumbnail-img, 共找到4個元素<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/7/mission_impossible_cut.jpg'/></div><a href='http://m.4tl426be.cn/courses/7' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/6/120606ineam4nspdc6qdaw.jpg'/></div><a href='http://m.4tl426be.cn/courses/6' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/3/12.jpg'/></div><a href='http://m.4tl426be.cn/courses/3' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}<div class='thumbnail-img'><div class='overflow-hidden'><img src='http://m.4tl426be.cn/uploads/course/image/2/13.jpg'/></div><a href='http://m.4tl426be.cn/courses/2' rel='external nofollow' rel='external nofollow' >更多</a></div>{’class’: (’thumbnail-img’,)}

動手時間

抄一遍代碼，看自己能不能運行起來 給這段代碼每一行都加上注釋，理解代碼做了些什么

擴展閱讀

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

源碼地址

github地址

以上就是python實現測試工具(二)——簡單的ui測試工具的詳細內容，更多關于python ui測試的資料請關注好吧啦網其它相關文章！