vue.js Django+vue自动化测试平台（7）-- 使用Selenium+vue实现WebUI自动化及结果展示

Selenium

Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE（7, 8, 9, 10, 11），Mozilla Firefox，Safari，Google Chrome，Opera，Edge等。这个工具的主要功能包括：测试与浏览器的兼容性——测试应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用户需求。支持自动录制动作和自动生成.Net、Java、Perl等不同语言的测试脚本。

结果预览：

实现使用到框架

django+ selenium + vue

服务端代码

django models配置

class UI_case(models.Model):

address = models.TextField("启动的页面地址", null=False, default="")

value = models.JSONField("执行值", null=False, default=dict)

# value = [{"name": "每个元素的名称", "xpath": "xpath地址", "iframe":"0不是iframe,1是iframe", "event": "事件类型", "value": "输入值" ,"wait_time":" 等待时间"}]

update_time = models.DateTimeField("更新时间", auto_now=True)

create_time = models.DateTimeField("创建时间", auto_now_add=True)

user = models.ForeignKey(Userinfo, on_delete=models.CASCADE)

def __str__(self):

return self.value

class UI_case_result(models.Model):

result = models.TextField("执行结果", null=False, default="")

result_type = models.IntegerField("结果类型", null=False, default=1) # 1.执行结果， 2.截图

create_time = models.DateTimeField("创建时间", auto_now_add=True)

ui = models.ForeignKey(UI_case, on_delete=models.CASCADE)

def __str__(self):

return self.result

服务端逻辑代码

import json

from datetime import datetime

from django.http import JsonResponse

from lapi_app.models.testcase_model.testcase_tree import Menu

from lapi_app.models.ui_model.ui_case import UI_case

# 获取UI自动化的列表信息

def ui_ifo(request):

global ui_dict, ui_result, update_time, create_time, ui_id, user_name, address

try:

data = json.loads(request.body)

menu_id = data["id"]

menu = Menu.objects.filter(id=menu_id)

for i in menu:

case = UI_case.objects.filter(id=i.ui_id)

ui_id = i.ui_id

for j in case:

address = j.address

user_name = j.user.account

update_time, create_time = datetime.strftime(j.create_time, "%Y-%m-%d %H:%M:%S"), datetime.strftime(

j.update_time, "%Y-%m-%d %H:%M:%S")

if j.value:

ui_result = j.value

else:

ui_result = []

return JsonResponse({

"code": 200,

"message": "获取用例信息成功",

"address": address,

"ui_id": ui_id,

"content": ui_result,

"update_time": update_time,

"create_time": create_time,

"username": user_name

})

except Exception as e:

return JsonResponse({

"code": 100,

"message": str(e)

})

# 编辑UI自动化的列表信息

def edit_ui_info(request):

try:

data = json.loads(request.body)

id = data["id"]

value = data["value"]

UI_case.objects.filter(id=id).update(value=value, address=data["address"], update_time=datetime.now().strftime("%Y-%m-%d %H:%M:%S"))

return JsonResponse({

"code": 200,

"message": "编辑成功"

})

except Exception as e:

return JsonResponse({

"code": 100,

"message": str(e)

})

# 执行UI自动化

def run_ui(request):

data = json.loads(request.body)

id = data["id"]

try:

if id == "" or data["address"] == "":

return JsonResponse({"code": 100, "message": "必要参数不可为空"})

case = UI_case.objects.filter(id=id)

res = UI_case_result.objects.filter(ui_id=id)

root = r'xxx/img/'

for j in res:

if j.result_type == 2:

os.remove(os.path.join(root, j.result))

res.delete()

# chrome_address = "C:/Program Files/Google/Chrome/Application/chrome.exe"

# 定义驱动

driver = webdriver.Chrome()

# 全屏显示

driver.maximize_window()

# 使用驱动 ,打开网页

driver.get(data["address"])

for i in case:

if i.value == "":

return JsonResponse({"code": 100, "message": "自动化配置不可为空"})

UI_case_result.objects.create(result="[info]->正在遍历操作步骤", ui_id=id)

for j in i.value:

if j["iframe"] == 1 and j["iframe_value"] != "":

UI_case_result.objects.create(result="[info]->正在遍历iframe", ui_id=id)

try:

driver.switch_to.frame(j["iframe_value"])

UI_case_result.objects.create(result="[info]->存在这个iframe：" + j["iframe_value"], ui_id=id)

driver.switch_to.frame(j["iframe_value"])

UI_case_result.objects.create(result="[info]->正在进入iframe：" + j["iframe_value"], ui_id=id)

time.sleep(int(j["wait_time"]))

UI_case_result.objects.create(result="[info]->设置隐性等待时间：" + str(j["wait_time"]) + "s成功",

ui_id=id)

except Exception as e:

UI_case_result.objects.create(result="[error]->没有这个iframe元素，地址为>>" + j["iframe_value"],

ui_id=id)

UI_case_result.objects.create(result="[error]->异常原因" + str(e) + '，元素命为：' + j["xpath"], ui_id=id)

if j["xpath"] is not None:

UI_case_result.objects.create(result="[info]->正在遍历页面元素", ui_id=id)

img = save_img(driver)

try:

xpath = driver.find_element(By.XPATH, j["xpath"])

if j["event"] == 1:

xpath.click()

UI_case_result.objects.create(result="[info]->点击成功>>" + j["name"] + "，xpath地址：" + '：' + j["xpath"],

ui_id=id)

UI_case_result.objects.create(result=img, ui_id=id, result_type=2)

time.sleep(int(j["wait_time"]))

UI_case_result.objects.create(result="[info]->设置隐性等待时间：" + str(j["wait_time"]) + "s成功",

ui_id=id)

elif j["event"] == 2:

xpath.send_keys(j["value"])

UI_case_result.objects.create(result="[info]->输入值成功: " + str(j["value"]), ui_id=id)

time.sleep(int(j["wait_time"]))

UI_case_result.objects.create(result=img, ui_id=id, result_type=2)

UI_case_result.objects.create(result="[info]->设置隐性等待时间：" + str(j["wait_time"]) + "s成功", ui_id=id)

except Exception as e:

UI_case_result.objects.create(result="[error]->没有这个元素名为>>" + str(j["name"]) + '：' + j["xpath"],

ui_id=id)

UI_case_result.objects.create(result="[error]->异常原因" + str(e) + '，元素命为：' + str(j["name"]), ui_id=id)

time.sleep(5)

# 关闭浏览器

driver.quit()

UI_case_result.objects.create(result="[info]->已关闭浏览器", ui_id=id)

UI_case_result.objects.create(result="结束", ui_id=id)

return JsonResponse({

"code": 200,

"message": "执行结束"

})

except Exception as e:

UI_case_result.objects.create(result="[error]->异常原因" + str(e), ui_id=id)

UI_case_result.objects.create(result="结束", ui_id=id)

return JsonResponse({

"code": 100,

"message": str(e)

})

# 执行过程中对步骤进行截图保存

def save_img(driver):

now = calendar.timegm(time.gmtime()) # 截图保存的文件名格式

pic_path = str(now) + ''.join(random.sample(string.ascii_letters+string.digits, 4)) + '_screen.png' # 截图保存的路径

# print(pic_path)

driver.save_screenshot("xxx/img/" + pic_path) # 调用Driver的截图保存功能

return pic_path

# 获取执行结果

def get_run_ui_result(request):

try:

data = json.loads(request.body)

if data["time"] == "":

res = UI_case_result.objects.filter(ui_id=data["id"])

else:

res = UI_case_result.objects.filter(ui_id=data["id"], create_time__gt=data["time"])

result = []

for i in res:

i_dict = {

"id": i.id,

"result": i.result,

"timestamp": datetime.strftime(i.create_time, "%Y-%m-%d %H:%M:%S"),

"type": i.result_type

}

result.append(i_dict)

return JsonResponse({

"code": 200,

"content": result

})

except Exception as e:

return JsonResponse({

"code": 100,

"message": str(e)

})

前端逻辑代码

总结

闲暇时候写的这套代码只能执行简单的点击，输入，更高深的技术真正摸索中！！！ 个人主页仍有精彩的内容，欢迎私信交流！！！！

精彩内容