前端测试步骤

最新推荐文章于 2024-08-16 22:14:49 发布

weixin_30663391

最新推荐文章于 2024-08-16 22:14:49 发布

阅读量1.2k

点赞数

文章标签：前端后端 json ViewUI

原文链接：http://www.cnblogs.com/jlj9520/articles/4996889.html

版权

基于Python模拟后端的前端测试过程

测试环境：

操作系统：Linux ubantu
编辑器：Emacs
浏览器：Mozilla Firefox 5.0
前端语言：HTML JS
后端语言：python3

测试目的：

　　本次测试主要是针对于项目中的前端测试，在开发项目中，如果项目分为前后端来开发，拿前端写好页面，转好对应的模板以后，需要去验证是否写的正确，或者说前端传数据是否正确，这样可以提高编写者的学习质量同时还可以降低集成测试的工作成本。

测试要求：
１．测试前端HTML页面改为模板以后是否出错；
２．测试加入JS以后，是否有语法错误；
３．测试通过ajax传输数据时是否是后端需要的值，前端输出；
４．后端输出前端传来的值，测试是否正确。

测试原理：

借用Python代码模拟一个后端，用该模拟后端来测试模板是否修改正确，并且输入与输出的值是否是开发人员需要的，针对与ajax的回执，采用json传输数据，前端传来的值后端print()查看。本次实验通过对一个登录页面的测试来完成报告。

测试步骤：

１．编写好前端代码并完成模板的修改：

<div class="container">
            <dl><h2> 用户登录</h2><hr>
            <dt>账号：<input id="user_name" name="user_name" type="text" placeholder="输入账号"/> <a href="/register_user_temp">注册账户</a></dt>
            <dt>密码：<input id="user_password" name="user_password" type="password" placeholder="输入密码"/> <a href="/find_password_temp">找回密码</a></dt>
            {% raw xsrf_form_html() %}
            <dt><input type="button" value="登录" οnclick="user_login()" ><button type="reset" οnclick="btn_reset()">取消</button></dt>
        </dl>
        </div>

２．编写模拟的后端代码并完成模板的加载：
主文件pagetestmain.py：
import os.path
import uuid
import tornado.ioloop
import tornado.web
from tornado.options import define, options

#-----------------不同功能的测试放到pagetest目录的不同文件中，并在此引入
from pagetest import pagestest

define("port", default=9003, help="run on the given port", type=int)

class Application(tornado.web.Application):

    def __init__(self):
        handlers = [
            (r"/user_login_temp", pagestest.Userloginrpl),
        ] # 在此列表中追加新的路由cal
        settings = dict(
            cookie_secret=str(uuid.uuid4()),
            template_path=os.path.join(os.path.dirname(__file__), "templates"),
            static_path=os.path.join(os.path.dirname(__file__), "static"),
            # xsrf_cookies=True,
            login_url="/",
            debug=True
        )
        tornado.web.Application.__init__(self, handlers, **settings)

if __name__ == "__main__":
    app = Application()
    app.listen(options.port)
    tornado.ioloop.IOLoop.current().start()

测试类的文件pagetest.py：

import json
import tornado.web
from models import books
from models import record
from models import account
from models import read_books
from models import manage_books

class Userloginrpl(tornado.web.RequestHandler):

    def get(self):
        self.render("User_login.html")　　＃完成加载模板

注：上述的两个文件中，主文件是添加路由所用，把所用的路由全部提出来，这样可以让测试文件只写测试的代码即可，还可以减少代码量，同时也便于维护。

３．终端运行模拟后端，运行命令如下：
　　　Python3 pagetestmain.py
４．打开浏览器，地址栏输入http://localhost:9003/user_login_temp：


５．加入js代码测试用户输入的内容是否正确，user_login.js代码如下：

function user_login(){
    var _xsrf = $("input[name='_xsrf']").val();
    var user_name = $("#user_name").val();
    var username = check(1, user_name);
    if(username.split('#')[0]=='F'){
        alert(username.split('#')[1]);
    }
    else{
        var user_password = $("#user_password").val();
        var userpass = check(2, user_password);
        if(userpass.split('#')[0]=='F'){
            alert(userpass.split('#')[1]);
        }
        else{
            alert(“输入正确！”);
　　　　　　｝
    }
}
测试截图如下：

上面的截图没有通过ajax，也没有通过后端的测试，下面继续阐述。
６．加入ajax到user_login()中，以及后端的返回值进行测试：
　　　　var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }
            else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var json_login = eval("("+ xmlhttp.responseText +")");
                    if(json_login.returnedjson.infostatus == 'T'){
           alert(json_login.returnedjson.infomsg);
                    }
                    else{
                        alert(json_login.returnedjson.infomsg);
                        $("#user_name").val("");
                        $("#user_password").val("");
                        $("#user_name").focus();
                    }
                }
            }
            var user_mess ="user_name=" + encodeURIComponent(user_name) + "&user_password=" + encodeURIComponent(user_password) + "&_xsrf=" + _xsrf;
            xmlhttp.open("post", "/check_login_action", true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
            xmlhttp.send(user_mess);

后端pagetest.py加入测试类代码，其中借用json格式回执：
class Checkloginrpl(tornado.web.RequestHandler):

    def post(self):
        user_name = self.get_argument("user_name")
        print(user_name)
        user_password = self.get_argument("user_password")
        print(user_password)
        obj = {
            "returnedjson": {"infostatus": "T", "infomsg": "登录成功"}}
        a = json.dumps(obj)
        self.write(a)
７．刷新页面，测试截图如下：

注：弹出了后端的json数据信息，模拟后端返回的信息是类似的。
８．后端输出看是否拿到数据正确：
输入数据：

终端输出数据：

这样后端拿到值以后就可以判断是否用户输入的和数据库一样，一样则登录成功，不一样则登录失败。