Node.js躬行记(28)——Cypress自动化测试实践

这篇具有很好参考价值的文章主要介绍了Node.js躬行记(28)——Cypress自动化测试实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  最近在研究如何提升项目质量,提炼了许多个用于自测的测试用例,但是每次修改后,都手工测试,成本太高,于是就想到了自动化测试。

  在一年前已将 Cypress 集成到管理后台的项目中,不过没有投入到实践中。今天在实践时发现,版本已经到了 12.X,当时集成的版本是 8.X。

一、准备

  在重新安装后,将之前的目录直接删除,运行命令后。

npx cypress open

1)目录

  又会在根目录自动生成新文件,测试用例都会写在 e2e 目录中。

|-- downloads
|-- e2e
|----- example.spec.js
|-- fixtures
|-- support

  将 cypress open 命令添加到 scripts 中,就能通过 npm run cypress 命令执行E2E测试了。

{
  "scripts": {
    "cypress": "cypress open"
  }
}

2)启动

  在刚启动时,会先让你选择一款浏览器,我选择了 Chrome。

  Node.js躬行记(28)——Cypress自动化测试实践

  然后就会自动打开浏览器,右边的控制台我自己打开的,用于查看通信和打印信息。

  Node.js躬行记(28)——Cypress自动化测试实践

  中间有许多自动生成的 demo spec,初学者可以作为参考。

  在点击某一个 spec 文件后,就会进入测试页面,左侧是可以回溯的测试过程和结果,中间是在执行的界面。

  若测试不通过,会有醒目的红色错误提示。

  Node.js躬行记(28)——Cypress自动化测试实践

二、实践

  本次实践的测试对象是一个管理后台,管理后台是需要登录的,肯定不能在每一个测试用例都要重复登录的操作。

  况且,我们的后台会限制登录次数,若登录太多,就会禁用账号。

1)登录

  思前想后,决定直接存储登录后的鉴权信息,我们在登录后,会将此信息存储到 localStorage 中。

  此时需要考虑一个问题,那就我团队中每个人的登录账号是不同的,如何存储这些信息。

  阅读官方文档后,发现可以将配置信息放在 fixtures 目录中,创建 config.json 文件,内容如下。

{
  "name": "xxx@xxx.me",
  "pwd": "yyy2023",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
  "authorities": "*"
}

  config.json 文件会被版本忽略,所以文件即使被修改,也不会提交到版本库中。

  然后将存储的功能封装成一条命令,这样在各个测试用例中调用会比较简洁。

Cypress.Commands.add('saveToken', () => {
  cy.fixture('config.json').then((config) => {
    const { token, authorities } = config;
    localStorage.setItem('token', token);
    localStorage.setItem('authorities', authorities);
  });
});

  在 beforeEach() 方法中只需执行 cy.saveToken() 就能保持登录态。

describe('短链服务', () => {
  beforeEach(() => {
    cy.saveToken(); // 保持登录态
    cy.visit('/operate/shortChain');// 跳转页面
  });
 });

2)测试

  在解决登录态后,就开始正式的测试。

  Cypress 的断言集成了 Chai,并且扩展了 SinonjQuery,也就是说,可以在框架内使用它们提供的功能。

  下图是需要测试的短链服务界面,接下来会测试新建、更新、查询、分页和删除。

  Node.js躬行记(28)——Cypress自动化测试实践

  点击新建,会有一个弹框,在弹框中有一个表单。

  Node.js躬行记(28)——Cypress自动化测试实践

  cy.get() 用于查找元素,其参数可以是一个 CSS 选择器字符串,官方文档有专门一栏介绍查询方法。

  cy.type() 用于填写文本框,官方还提供了点击、双击、上传文件等功能。scrollBehavior: false 是为了禁止移动滚动条。

  页面截图需要上传,测试用的图像保存在 fixtures 目录中,cy.fixture() 可以读取此目录中的文件。

  cy.selectFile() 用于上传文件,demo 加了个 @ 符号,不加就无法获取到文件。

  it('存储', () => {
    // 定位到新建按钮
    cy.get('.ant-btn').first().click();
    cy.wait(500);
    // 在填写表单控件时禁用滚动
    cy.get('.ant-modal #url').type(`http://www.xxx.com/test${random()}.html`, 
        { scrollBehavior: false });
    cy.get('.ant-modal #remark').type('测试', { scrollBehavior: false });
    // 上传图像,图像存储在 fixtures 目录内
    cy.fixture('demo.png', { encoding: null }).as('demo');
    cy.get('input[type=file]').selectFile('@demo', { force: true });
    cy.wait(1000);
    // 存储
    cy.get('.ant-modal .ant-btn-primary').click();
    cy.get('.ant-modal').should('not.exist'); // 断言存储流程是否正常
    cy.scrollTo(0, 0);
    cy.wait(2000);
  });

  cy.wait() 就是等待,因为自动操作速度很快,有时候需要停顿下,用肉眼观察下结果。

  cy.should() 用于创建断言,这与之前的 expect() 断言稍有不同,其参数就是断言结果,关键字可以参考 Chai 的断言方法。

  Cypress 提供了众多的 API,还有很大的挖掘空间,并且提供了丰富的 demo,学习起来也比较方便。

 文章来源地址https://www.toymoban.com/news/detail-436286.html

 

到了这里,关于Node.js躬行记(28)——Cypress自动化测试实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端自动化测试工具 Cypress 试用调研记录

    目录 前言 环境准备 1.工具:vs code;环境:node.js。 2.安装 cypress 3.安装插件: 4.配置: 5.启动命令: helloworld: 第一个用例 元素定位方式 使用 request 请求进行登录 提取登录方法为公共方法 命令行执行所有用例 解决 chrome 下的跨域问题: 生成 Junit-allure 报表 生成 mocha awsome

    2024年02月16日
    浏览(40)
  • Cypress之Web UI 自动化测试入门

     🔥 交流讨论: 欢迎加入我们一起学习! 🔥 资源分享 : 耗时200+小时精选的「软件测试」资料包 🔥  教程推荐: 火遍全网的《软件测试》教程   📢 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 1、在Windows 7以上的环境中,可以直接下载压缩包后,解压使用。  

    2024年03月20日
    浏览(50)
  • 基于Node.js 和 FFmpeg构建自动化脚本用来转码视频

    这个脚本将监控一个特定的目录,自动转码新添加的视频文件,并将转码后的视频保存到指定目录。 准备环境 安装 Node.js : 访问 Node.js 官网,下载并安装适合你操作系统的 Node.js 版本。 安装 FFmpeg(不清楚的可以看我的上篇博客里有详细的安装步骤) : 对于 Windows 用户,可以从

    2024年03月27日
    浏览(46)
  • 比selenium体验更好的ui自动化测试工具: cypress介绍

    话说 Cypress is a next generation front end testing tool built for the modern web. And Cypress can test anything that runs in a browser.Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests. 吹的挺好哈,那咱也来尝试玩玩,试试,哈哈! 1、在Windows 7以上的环境中,可

    2024年01月16日
    浏览(45)
  • 几个Web自动化测试框架的比较:Cypress、Selenium和Playwright

    介绍: Web自动化测试框架对于确保Web应用程序的质量和可靠性至关重要。它们帮助开发人员和测试人员自动执行重复性任务,跨多个浏览器和平台执行测试,并在开发早期发现问题。 本文探讨来3种流行的Web自动化测试框架——Cypress、Selenium和Playwright,总结了它们的优点和缺

    2024年02月11日
    浏览(40)
  • 用Python创建轻量级Excel到Markdown转换工具:简便、高效、自动化【第28篇—python:Excel到Markdown】

    在工作中,我们常常需要将 Excel 表格转换为 Markdown 格式,以便在文档、博客或其他支持 Markdown 的平台上分享。然而,一些 Markdown 编辑器对从 Excel 复制粘贴的内容支持并不理想,导致转换后的格式混乱。另外,如果需要频繁处理相同类型的文件,手动转换显得繁琐。因此,

    2024年01月17日
    浏览(59)
  • 安卓自动化 | autox.js

    介绍: 不需要Root权限 的 JavaScript 自动化软件 官方文档: http://doc.autoxjs.com/ 安装Releases · kkevsekk1/AutoX (github.com)到手机上 安装vscode插件 插件介绍中有中文的使用说明, 如何连接电脑 Step 1 按 Ctrl+Shift+P 或点击\\\"查看\\\"-\\\"命令面板\\\"可调出命令面板,输入 Autox.js 可以看到几个命令,移动

    2024年02月21日
    浏览(39)
  • JavaScript+Selenium自动化测试_selenium和js能一起做自动化测试

    var webdriver = require(‘selenium-webdriver’), By = webdriver.By, until = webdriver.until; var driver = new webdriver.Builder() .forBrowser(‘chrome’) .build(); driver.get(‘https://www.baidu.com’); driver.findElement(By.id(‘kw’)).sendKeys(‘webdriver’); driver.findElement(By.id(‘su’)).click(); driver.wait(until.titleIs(‘webdriver_百度

    2024年04月25日
    浏览(43)
  • js脚本自动化之葫芦娃

    贵州特产平台(扶贫助农平台)有很多,但都大同小异,就连模样都像一个娘生的,所以戏称为葫芦娃平台 #小程序://航旅黔购/1nkYlNRVzm0Gg9x #小程序://贵旅优品/7zz6mtnSVgDfyqa #小程序://新联惠购/ibFdsuhWqIbczEd #小程序://贵盐黔品/u2TgExCUdkavrFe #小程序://空港乐购/ANkOOdqEeo71kah #小程序

    2024年02月12日
    浏览(47)
  • 自动化测试——selenium之JS定位

    在自动化测试中,我们常用的元素定位方式有id,name,class_name,xpath,css_selector,link_text 还有不常用的tag_name,partial_link_text 其实还有js定位方法及jquery定位方法 一、js定位方法(注意书写格式及以分号结尾): 1.根据id定位 document.getElementById(\\\"id值\\\").操作方式; 2.根据ClassName定

    2023年04月27日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包