本系列教程使用的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 HTMLSession
from sys import argv
DEBUG = True
USAGE = '''
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 = argv
if url[:4] != 'http':
url = 'http://' + url
session = 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 class="img-responsive" src="/uploads/course/image/7/mission_impossible_cut.jpg"/></div><a class="btn-more hover-effect" href="/courses/7">更多</a></div>
{'class': ('thumbnail-img',)}
<div class="thumbnail-img"><div class="overflow-hidden"><img class="img-responsive" src="/uploads/course/image/6/120606ineam4nspdc6qdaw.jpg"/></div><a class="btn-more hover-effect" href="/courses/6">更多</a></div>
{'class': ('thumbnail-img',)}
<div class="thumbnail-img"><div class="overflow-hidden"><img class="img-responsive" src="/uploads/course/image/3/12.jpg"/></div><a class="btn-more hover-effect" href="/courses/3">更多</a></div>
{'class': ('thumbnail-img',)}
<div class="thumbnail-img"><div class="overflow-hidden"><img class="img-responsive" src="/uploads/course/image/2/13.jpg"/></div><a class="btn-more hover-effect" href="/courses/2">更多</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 class="img-responsive" src="/uploads/course/image/7/mission_impossible_cut.jpg"/></div><a class="btn-more hover-effect" href="/courses/7">更多</a></div>
{'class': ('thumbnail-img',)}
<div class="thumbnail-img"><div class="overflow-hidden"><img class="img-responsive" src="/uploads/course/image/6/120606ineam4nspdc6qdaw.jpg"/></div><a class="btn-more hover-effect" href="/courses/6">更多</a></div>
{'class': ('thumbnail-img',)}
<div class="thumbnail-img"><div class="overflow-hidden"><img class="img-responsive" src="/uploads/course/image/3/12.jpg"/></div><a class="btn-more hover-effect" href="/courses/3">更多</a></div>
{'class': ('thumbnail-img',)}
<div class="thumbnail-img"><div class="overflow-hidden"><img class="img-responsive" src="/uploads/course/image/2/13.jpg"/></div><a class="btn-more hover-effect" href="/courses/2">更多</a></div>
{'class': ('thumbnail-img',)}
動手時間
- 抄一遍代碼，看自己能不能運行起來
- 給這段代碼每一行都加上注釋，理解代碼做了些什么