我的编程空间,编程开发者的网络收藏夹
学习永远不晚

cypress测试本地web应用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

cypress测试本地web应用

cypress测试本地web应用

在之前的cypress介绍里曾提到过,cypress虽然也可以测试部署好的应用,但是它最大的能力还是发挥在测试本地应用上。
本章主要内容就是关于如何测试本地web应用的概述:

  • cypress与后台应用之间的关系。
  • 如何配置cypress使其适合我们的应用
  • 更好的绕过应用的身份验证机制

一、启动本地应用

在前面几章内容中,代码示例都是用的官方文档的网页进行测试的。那个环境相当于一个线上的生产环境,而且是cypress官方的,咱们除了正常访问
啥也做不了。启动本地应用就是启动你自己开发的web应用,比如我本地的测试平台的前端应用。

不过应该还会有小伙伴好奇,为什么就不能直接用线上已经部署好的,而非要用本地的?
这里,我概述一下官方的回答,以供参考:

  • 在日常的本地开发中,cypress是围绕着构建、优化的工具。
  • 数据存根。
  • 最重要的还是你要有控制这个应用的能力,比如,根据需要随时更改调整应用的一些配置之类。

不过,也不是说线上环境和本地环境,你必须二选一才行,也可以都写测试,这也是一个实用场景。比如,大多数的测试可以在本地环境跑,然后留一些
测试可以作为冒烟测试用,可以用到部署好的环境上去。

二、访问本地应用

之前演示用的代码用不上了,现在可以新建一个测试文件home_page_spec.js

describe('The Home Page', () => {
  it('successfully loads', () => {
    cy.visit('http://localhost:8010') // 这里换成你自己本地的url
  })
})

访问成功。

三、配置Cypress

在Cypress项目中,其实有个配置文件cypress.json,就在项目根目录下,内容默认为空{}
在这里可以根据需要来添加cypress的各种配置,比如说 测试文件的位置、默认超时时间、环境变量、用哪个报告等等,这里暂时不展开了。

不过现在,可以在这里加一个baseUrl的配置,因为后续访问的路径都是以这个url为基础的。这样就可以给cys.visit()cys .request()这种命令
自动添加baseUrl前缀了。

{
  "baseUrl": "http://localhost:8010"
}

现在访问一个相对路径试下:

describe('The Home Page', () => {
  it('successfully loads', () => {
    cy.visit('/')
  })
})

访问成功。

到这里,就可以开始写你本地应用的测试了,至于怎么写,就还是取决不同的项目需求了。

四、Seeding data

这里我理解为初始化数据,比如要测试一个页面的登录,可能就得向数据库里插入一个用户数据,方便使用。在之前用selenium的时候,
通常就在setup 和 teardown里来安排初始化测试数据的准备和清理。

在cypress中,也会有一些支持做这些额外拓展的事情的方法,通常是这3种:

cy.exec(),可以执行系统命令。

cy.task(),可以通过pluginsFile来在node中运行代码。

cy.request(),可以发送http请求。

比如下面这段代码,演示的就是在测试执行之前,要做一系列事情来完成数据的初始化:

describe('The Home Page', () => {
  beforeEach(() => {
    // reset and seed the database prior to every test
    cy.exec('npm run db:reset && npm run db:seed')
    // seed a post in the DB that we control from our tests
    cy.request('POST', '/test/seed/post', {
      title: 'First Post',
      authorId: 1,
      body: '...',
    })
    // seed a user in the DB that we can control from our tests
    cy.request('POST', '/test/seed/user', { name: 'Jane' })
      .its('body')
      .as('currentUser')
  })
  it('successfully loads', () => {
    // this.currentUser will now point to the response
    // body of the cy.request() that we could use
    // to log in or work with in some way
    cy.visit('/')
  })
})

这种用法其实本质上来说没什么错的,但实际上每个测试都要与服务器或者浏览器交互的,这难免会拖慢测试的效率。对于这个问题,cypress
提供了些更快更好的解决方案。

1. Stubbing the server

这里就是我理解的mock了,断开与后端服务的依赖。既然我需要跟服务器交互才可以拿到需要的返回数据,如果能绕开交互,直接需要用啥数据就有啥数据,连后端应用都
不需要启了,岂不美哉?关于stub内容很多,后续使用到再继续分解。

2. 解决登录问题

在以往编写测试的过程中,登录一直是一个比较大的问题。你只有登录了,才可以进行后续的测试活动。那么如果我们把登录抽离出去,然后每个测试执行之前都进行一次登录操作,
理论上来讲,也是可行的。

describe('The Login Page', () => {
  beforeEach(() => {
    // reset and seed the database prior to every test
    cy.exec('npm run db:reset && npm run db:seed')
    // seed a user in the DB that we can control from our tests
    // assuming it generates a random password for us
    cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
      .its('body')
      .as('currentUser')
  })
  it('sets auth cookie when logging in via form submission', function () {
    // destructuring assignment of the this.currentUser object
    const { username, password } = this.currentUser
    cy.visit('/login')
    cy.get('input[name=username]').type(username)
    // {enter} causes the form to submit
    cy.get('input[name=password]').type(`${password}{enter}`)
    // we should be redirected to /dashboard
    cy.url().should('include', '/dashboard')
    // our auth cookie should be present
    cy.getCookie('your-session-cookie').should('exist')
    // UI should reflect this user being logged in
    cy.get('h1').should('contain', 'jane.lane')
  })
})

只不过这样整个测试下来就变得非常的慢。所以,cypress呼吁不要在每次测试前使用UI登录。

当然了,你正儿八经写的测试代码里肯定是测试UI的,但是如果这个测试涉及到其他前置的一些数据状态的依赖,那么要避免通过UI去设置。
这里官方还举了个购物车的例子加以说明。

假设要测试购物车的功能。要进行测试的话,得把产品添加到购物车中。那么产品从哪里来? 我是否要使用UI登录到管理后台,然后创建所有的产品,包括它们的描述、类别和图片?
如果这样做了,那是不是所有的产品我都要访问一遍并且加到购物车里呢?

答案显然是否定的,至于怎样做最合适,还得到后续的学习中再分享。

继续回到上面UI登录的问题,因为cypress与selenium不同,在cypress中,可以通过使用cy.request()来跳过使用UI的需要,cy.request()可以自动获取和设置cookie,完成登录态的设置。那么上述的用UI执行登录的代码就可以优化成:

describe('The Dashboard Page', () => {
  beforeEach(() => {
    // reset and seed the database prior to every test
    cy.exec('npm run db:reset && npm run db:seed')
    // seed a user in the DB that we can control from our tests
    // assuming it generates a random password for us
    cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
      .its('body')
      .as('currentUser')
  })
  it('logs in programmatically without using the UI', function () {
    // destructuring assignment of the this.currentUser object
    const { username, password } = this.currentUser
    // programmatically log us in without needing the UI
    cy.request('POST', '/login', {
      username,
      password,
    })
    // now that we're logged in, we can visit
    // any kind of restricted route!
    cy.visit('/dashboard')
    // our auth cookie should be present
    cy.getCookie('your-session-cookie').should('exist')
    // UI should reflect this user being logged in
    cy.get('h1').should('contain', 'jane.lane')
  })
})

在官方看来,这个相比于selenium是一个大优点,其实我觉得也不尽然。这个优化思想是对的,不过在之前使用selenium的时候,虽然它内置的方法不支持这么做,但是可以借助
requests库来迂回解决直接像后端发送请求的问题。

以上就是cypress测试本地web应用的详细内容,更多关于cypress测试web的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

cypress测试本地web应用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

cypress如何测试本地web应用

这篇文章主要介绍“cypress如何测试本地web应用”,在日常操作中,相信很多人在cypress如何测试本地web应用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”cypress如何测试本地web应用”的疑
2023-06-30

如何使用Cypress测试React原生应用

开始使用Cypress。这样我们就可以在Cypress中测试React Native Apps。此外,我们还可以设置Viewport并将其更改为不同的设备分辨率,以便测试移动Web应用程序。

cypress测试工具如何使用

本篇内容主要讲解“cypress测试工具如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“cypress测试工具如何使用”吧!一、什么是cypressCypress称自己是下一代的web前端
2023-06-30

一文详解e2e测试之cypress的使用

这篇文章主要介绍了e2e测试之cypress的使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-05-17

如何使用Cypress执行组件测试

本文介绍了如何在 Cypress 的帮助下设置 React 组件和测试 React 组件。

如何使用Cypress执行视觉回归测试

软件测试是软件开发生命周期(SDLC)过程中的关键阶段。早期测试可以节省软件开发商大量成本和精力,而低质量的软件会对用户参与产生负面影响,从而降低客户保留率。因此,构建无缺陷的软件以增加销售额并使软件产品更受欢迎是至关重要的。

Web应用渗透测试框架Arachni

Web应用渗透测试框架Arachni
2023-06-04

Web应用渗透测试完全指南

本文将从三个方面提供指导:首先,帮助你学习 Web 应用渗透测试技术,并了解相关工具;其次,告诉你如何在 Web 应用中寻找和测试漏洞;最后,指导你如何通过 Web 应用渗透测试技术提升 Web 应用的安全性。
Web应用渗透2024-12-02

使用Cypress需要避免的5个E2E测试错误

在测试应用程序时,端到端(E2E)测试提供了最可靠和最有效的方法。

测试Android webview 加载本地html

最近开发一个需要未联网功能的App, 不熟悉使用Java原生开发界面,于是想使用本地H5做界面,本文测试了使用本地html加载远程数据。直接上代码: MainActivity.java package com.alex.webviewloc
测试Android webview 加载本地html
2023-12-23

Web应用扫描测试工具Vega有什么用

这篇文章给大家分享的是有关Web应用扫描测试工具Vega有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Web应用扫描测试工具VegaVega是Kali Linux提供的图形化的Web应用扫描和测试平台工具
2023-06-04

使用 GNOME Web 的 Canary 版本测试前沿功能

如果你想测试高度不稳定的 GNOME Web 浏览器的前沿功能,Canary 版本就是为了这个。

Web 应用程序测试的十大优秀实践

通过这些测试 Web 应用程序的 10 大最佳实践,让您的 Web 应用程序达到最佳状态。阅读本指南以了解如何确保您的应用程序运行良好!

如何使用Golang函数进行Web应用程序测试

在 go 中进行函数测试的步骤包括:创建测试文件并导入相关包。定义测试函数,包括要测试的不同输入/预期组合。调用函数并验证结果是否符合预期。运行测试以验证函数的正确性。如何在 Go 中使用函数进行 Web 应用程序测试函数测试是验证 We
如何使用Golang函数进行Web应用程序测试
2024-05-03

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录