淘先锋技术网

首页 1 2 3 4 5 6 7

从0开始学习自动化测试框架cypress(五)案例

本文将实现以下案例功能

图片

使用到以下6个文件

login.jsp : 登录页面

index.jsp : 首页(成功登录后跳转到的页面)

add_user.jsp : 新增用户页面

LoginServlet.java : 登陆校验

AddUserServlet.java : 新增用户

UserListServlet.java: 用户列表查询

demo.js: 测试用例

 

------------------------实际代码如下

login.jsp : 登录页面


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
</head>
<body>
  <form action="login" method="post">
    <input type="text" name="username">
    <input type="text" name="password" id="password">
    <input type="submit">
  </form>
  <%
    Object msg = request.getAttribute("msg");
    if (msg != null && !"".equals(String.valueOf(msg))) {
      %>
    <label>
      <%=msg%>
    </label>
      <%
    }
  %>
</body>
</html>

登录表单有用户名和密码,如果错误会显示错误信息到页面,界面预览如下

图片

图片

 

index.jsp : 首页(成功登录后跳转到的页面)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理系统首页</title>
</head>
<body>
  <a href="add_user.jsp" target="_blank" rel="external nofollow" >新增用户</a>
</body>
</html>

登录成功后才能进首页

图片

 

add_user.jsp : 新增用户页面

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增用户</title>
</head>
<body>
  <form action="addUser" method="post">
    <label>用户名:</label><input type="text" name="username"><br>
    <label>密码:</label><input type="text" name="password"><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

新增用户表单,有用户名和密码2个字段要填写

图片

 

LoginServlet.java : 登陆校验

package io.nocode.platform.real.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 登陆功能
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  
  public static Set<Map<String, String>> userList = new HashSet<Map<String,String>>();
  
  static {
    Map<String, String> user = new HashMap<String, String>();
    user.put("username", "admin");
    user.put("password", "admin123");
    userList.add(user);
  }

  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    
    boolean collect = false;
    
    if (username == null || "".equals(username.trim()) || password == null || "".equals(password.trim())) {
      
    } else {
      for (Map<String, String> user : userList) {
        if (username.equals(user.get("username")) && password.equals(user.get("password"))) {
          collect = true;
        }
      }
    }
    
    if (collect) {
      request.getRequestDispatcher("index.jsp").forward(request, response);
    } else {
      request.setAttribute("msg", "用户名或密码错误");
      request.getRequestDispatcher("login.jsp").forward(request, response);
    }
  }
}

其中LoginServlet的userList存储用户信息

 

AddUserServlet.java : 新增用户

package io.nocode.platform.real.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 新增用户功能
 */
@WebServlet("/addUser")
public class AddUserServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    
    Map<String, String> user = new HashMap<String, String>();
    user.put("username", username);
    user.put("password", password);
    LoginServlet.userList.add(user);
    
    request.getRequestDispatcher("index.jsp").forward(request, response);
  }
}

UserListServlet.java: 用户列表查询

package io.nocode.platform.real.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * 用户列表
 */
@WebServlet("/userList")
public class UserListServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    Map<String, Object> result = new HashMap<String, Object>();
    
    int code = 200;
    String msg = "OK";
    
    result.put("code", code);
    result.put("msg", msg);
    result.put("data", LoginServlet.userList);
    
    PrintWriter writer = response.getWriter();
    writer.write(new Gson().toJson(result));
  }
}

 

demo.js: 测试用例

var username='admin'
var password='admin123'
var username1 = 'test'
var password1 = 'test123'

describe('真实测试用例', () => {
  it('登陆', () => {
    // 访问登录页
    cy.visit('http://localhost:8080/nocode/login.jsp')
    // 输入用户名和密码
    cy.get('input[name=username]').type(username)
    cy.get('input[name=password]').type(password)
    // 执行登录操作
    cy.get('form').submit()

    // 登录成功后,首页有a标签可以调整到新增用户界面
    cy.get('a').click()
    
    // 新增用户界面 : 输入用户名和密码    
    cy.get('input[name=username]').type(username1)
    cy.get('input[name=password]').type(password1)
    // 提交新增
    cy.get('form').submit()    
  })
  
  it('用户列表', () => {
    cy.request({
      'url': 'http://localhost:8080/nocode/userList'
    })
    .then(response => {
      expect(response).property('status').to.equal(200)
      var resultData = JSON.parse(response.body)
      expect(resultData.code).to.equal(200)
      cy.log(response.body)
    })
  })
})

 

运行测试用例结果都成功了

图片

点击查看登录用例详情

图片

 

点击查看那用户列表详情

图片

(本篇就到这)

获取最新资讯,欢迎关注公众号: 软件开发与技术设计(SoftwareDesigner)