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

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

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)

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

从0开始学习自动化测试框架cypress(二)DOM
Cypress Can Be Simple: 这节来学习它简约而不简单的写法吧, 看了之后有种还可以这样的感觉学习内容: 如何查询DOM 命令主题和命令链断言写法来看一个栗子 describe( ...
从0开始学习自动化测试框架cypress(一)
安装cypress 前提是已经安装nodejs mkdir cypress cd cypress npm install cypress --save-dev --registry=https://r ...
从0开始学习自动化测试框架cypress(五)总结
一.下载环境: cypress.zip解压运行examples或npm install cypress 二.简单使用 1.常用文件夹 fixtures: 保存json文件 integration: 保 ...
从0开始学习自动化测试框架cypress(五)案例
本文将实现以下案例功能使用到以下6个文件 login.jsp : 登录页面 index.jsp : 首页(成功登录后跳转到的页面) add_user.jsp : 新增用户页面 LoginServle ...
从0开始学习自动化测试框架cypress(三)特性
下面再来一个简单的例子实现效果是访问百度,输入java经典教程,搜索 describe('DOM访问操作实例', () => {it('百度搜索java经典教程', () => {cy. ...
自动化测试框架[Cypress元素操作详解]
前提已经熟练掌握了Cypress的基本知识,请参考自动化测试框架[Cypress概述]和自动化测试框架[各自动化测试框架比较] 已经熟练掌握Cypress环境配置,请参考自动化测试框架[Cypres ...
手把手教你搭建java接口自动化测试框架（四）：断言、生成测试报告
手把手教你搭建java接口自动化测试框架(四):断言.生成测试报告上一集说到post和Get请求,请求后得到的响应(即接口返回值)是我们想要的吗比如网站上get接口文档说明 : "dat ...
python+requests+unittest+HTMLTestRunner构建接口自动化测试框架（四）测试用例执行
python+requests+unittest+HTMLTestRunner构建接口自动化测试框架(一)了解基础框架,读取配置文件 python+requests+unittest+HTMLTest ...
前端自动化测试框架cypress
前端自动化测试框架cypress 自动化测试为了保障软件质量,并减少重复性的测试工作,自动化测试已经被广泛运用. 自动化测试是一种测试方法,是指使用特定的软件,去控制测试流程,并比较实际结果与预期结 ...

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

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

最新文章

热门文章