从0开始学习自动化测试框架cypress(四)登录

最新推荐文章于 2023-11-23 11:45:38 发布

svygh123

最新推荐文章于 2023-11-23 11:45:38 发布

阅读量1.2k

点赞数

分类专栏： js eclipse html 文章标签：自动化测试软件测试自动化测试测试工具

本文链接：https://blog.csdn.net/svygh123/article/details/113733919

版权

js 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

eclipse

15 篇文章 0 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

本文介绍一下模拟系统登录功能

1. 从json读取数据校验登陆

读取json的话,cypress提供了函数

cy.fixture(filePath, encoding, options)

其中filePath是json文件名称,必填,后2项选填,路径默认在fixtures文件夹内

我们在fixtures新建一个user.json文件,内容如下

[
  {
    "username":"admin",
    "password":"admin123"
  },
  {
    "username":"test",
    "password":"test123"
  }
]

注意: 这里必须要用双引号,单引号是会报错的,可以自改试验

接着在integration文件夹内建立我们测试用例login.js, 内容如下

var username='admin'
var password='admin123'

describe('登录相关测试用例', () => {
  it('登录: 与json文件用户数据校验', () => {    
    cy.fixture('user').then(response => {
      for (var i=0; i<response.length; i++)
      {
        var user = response[i]
        if (username == user.username && password == user.password)
        {
          cy.log('login success')
          break;
        } else {
          cy.log('login fail')
        }
      }
    })
  })
})

运行结果如下

这样就模拟从json文件读取用户做登录校验成功了,接着看第二种方法

2. 请求后台校验登陆

首先后台要写个servlet的接口供登陆访问,代码如下

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("/login")
public class LoginServlet extends HttpServlet {

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    
    Map<String, Object> result = new HashMap<String, Object>();
    
    int code = 200;
    String msg = "登录成功";
    if ("admin".equals(username) && "admin123".equals(password)) {
      
    } else {
      code = 400;
      msg = "登录失败: 用户名或密码错误";
    }
    result.put("code", code);
    result.put("msg", msg);
    
    System.out.println("OK");
    
    PrintWriter writer = response.getWriter();
    writer.write(new Gson().toJson(result));
  }
}

注意: 用到了gson的jar包, 也可以写node做服务器,为了节约代码,就写了service方法

然后我们写前端cypress的登录代码,如下

var username='admin'
var password='admin123'

describe('登录相关测试用例', () => {
  it('登录: 发送http请求后台校验', () => {
      var param = {
      "username": username,
      "password": password
    }
    cy.request({
      'url': 'http://localhost:8080/nocode/login',
      'method': 'post',
      'form': true,
      'body': param
    })
    .then(response => {
      expect(response).property('status').to.equal(200)
      var resultData = JSON.parse(response.body)
      expect(resultData.code).to.equal(200)
    })
  })
})

由于后台返回的是gson转换后的json字符串,因此需要转换为json对象

运行结果如下

这样访问后台校验登陆就完成了,密码错误的话是会报错的,可以自改试验

3. 访问页面输入用户名和密码提交后台校验登陆

这里我们需要新建一个登陆的html页面: login.html , 内容如下

<!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>
</body>

接着我们模拟访问登录页,然后输入用户名和密码进行提交,方法是这样的

var username='admin'
var password='admin123'

describe('登录相关测试用例', () => {
  it('登陆: 模拟网页输入请求后台校验', () => {
    cy.visit('http://localhost:8080/nocode/login.html')
    cy.get('input[name=username]').type(username)
    cy.get('input[name=password]').type(password)
    cy.get('form').submit()
  })
})

运行之后结果是这样

每一步执行过程都显示的非常清楚, 这样模拟网页输入登陆也完成了, 如果想登录成功跳转页面, 在后台转发到成功页面就可以了.

(本篇就到这)

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

svygh123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
从0开始学习自动化测试框架cypress(四)登录

本文介绍一下模拟系统登录功能1. 从json读取数据校验登陆读取json的话,cypress提供了函数cy.fixture(filePath, encoding, options)其中filePath是json文件名称,必填,后2项选填,路径默认在fixtures文件夹内我们在fixtures新建一个user.json文件,内容如下[ { "username":"admin", "password":"admin123" }, { ..
复制链接

扫一扫