热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Cypress系列(1)Window下安装Cypress并打开

如果想从头学起Cypress,可以看下面的系列文章哦https:www.cnblogs.compoloyycategory1768839.html系统要求Cypres

如果想从头学起Cypress,可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

系统要求

Cypress 是一个被安装在你电脑上的桌面应用,你的操作系统需要满足如下条件才能正常安装

  • Mac OS 10.9+(仅提供64位二进制文件)
  • Linux Ubuntu 12.04+, Fedora 21, Debian 8的64位二进制文件
  • Windows 7+

 

下载

Cypress 当前支持如下版本的下载:

  1. Windows 64
  2. Windows 32,从3.3.0版本开始支持
  3. Linux 64
  4. macOS 64

 

直接下载安装

可以直接访问下面的地址下载

https://download.cypress.io/

该网站会根据你的操作系统,自动下载最合适的版本;下载完后,解压文件,双击就可以使用 Cypress 了!

 

选择版本下载

访问:https://download.cypress.io/desktop.json,获取可下载的版本列表

直接下载的问题

Cypress 无法运行 DashBoard 服务,直接下载仅用作快速尝试 Cypress;所以,不推荐此方式!虽然很快捷!

 

推荐安装方式一:npm

安装 Node.js

http://nodejs.cn/download/,下载msi后直接安装就可以使用了

验证 Node.js 和 npm

备注:npm已经集成在新版的Node.js中了

生成 package.json 文件

  1. 首先进入你要安装的Cypress的目录,然后运行 npm init 命令
  2. 一路回车就可以了,最后输入yes
  3. 然后会在你的 Cypress 文件夹下生成  package.json  文件
  4. 这个文件也可以自己创建,通常存在于项目的根目录下,它定义了这个项目所需要的各种模块、配置信息(如:名称、版本、依赖、脚本等)

安装 Cypress

执行以下命令即可

npm install cypress --save-dev

推荐npm安装方式的原因

  • npm(Node Package Manager),是基于Node.js的包管理工具,npm 使 Javascript 代码的分享和重用更加容易
  • 可以和其它任何依赖项一样控制 Cypress 的版本
  • npm 简化了再持续集成中运行 Cypress 的过程

 

推荐安装方式二:yarn

安装 yarn

https://classic.yarnpkg.com/zh-Hans/docs/install,下载安装即可

 

验证 yarn 安装情况

进入要安装 Cypress 的文件夹,输入下面命令安装 Cypress

yarn add cypress --dev

 

打开 Cypress

安装好 Cypress 后,可以通过以下方式之一打开 Cypress

方式一

进入 Cypress安装目录\node_modules\bin 目录,输入

cypress open

方式二

进入Cypress安装目录,输入

yarn run cypress open

 

方式三

管理员模式打开 cmd 窗口

npx cypress open

 

Cypress 运行成功并打开的界面,如下

 

Cypress 设置

Cypress 允许配置  package.json 文件的 scripts 字段,来定义打开方式

首先,进入 Cypress安装目录 ,打开 package.json 

在  scripts 下,添加 "cypress:open":"cypress open"  

后面就可以在命令行通过下面命令打开Cypress了

yarn cypress:open

 



推荐阅读
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • NPM 脚本 'start' 退出,未显示 create-react-app 服务器正在监听请求
    遇到 NPM 脚本 'start' 退出且未显示 create-react-app 服务器正在监听请求的问题,请求帮助。 ... [详细]
  • 如何在启用ECMAScript 6特性的情况下高效运行Node.js应用?本文将详细介绍如何在Node.js环境中启用并充分利用ES6的新特性,包括模块化、箭头函数、模板字符串等,以提升代码的可读性和开发效率。同时,文章还会探讨性能优化策略,确保应用在启用ES6特性后仍能保持高效运行。 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 在现代前端开发中,组件化已成为不可或缺的技术,尤其在 React 和 Vue 生态中。然而,组件的管理和测试一直是开发者面临的挑战。本文将介绍如何使用 Storybook 来简化这一过程,提高开发效率。 ... [详细]
  • Angular 4 生产模式编译 ng build --prod --aot 报错解决方案
    在项目中使用 Angular CLI 版本 1.3.2,并通过 cnpm 安装依赖包时,使用 ng build --prod --aot 编译可能会遇到错误。本文将详细介绍该问题的解决方法。 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom"echarts";4、如果用到map(地图),还 ... [详细]
  • 本文详细介绍了在 React Native 开发过程中遇到的 'Could not connect to development server' 错误及其解决方法。该问题不仅影响开发效率,而且难以通过网络资源找到确切的解决方案。本文将提供详细的步骤,帮助开发者快速解决这一常见问题。 ... [详细]
  • 在 Ubuntu 中遇到 Samba 服务器故障时,尝试卸载并重新安装 Samba 发现配置文件未重新生成。本文介绍了解决该问题的方法。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • Vue CLI 初始化 Webpack 项目时,main.js 文件是如何被调用的? ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 在 Vue.js 中实现网络请求的方法与最佳实践包括使用 `vue-resource` 插件。首先,通过命令 `npm install vue-resource --save` 安装该插件,确保添加 `--save` 参数以将依赖项记录到 `package.json` 文件中。此外,推荐使用 `axios` 作为替代方案,因为它提供了更强大的功能和更好的性能。在项目中引入并配置 `axios`,可以实现更高效、灵活的网络请求管理。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
author-avatar
伊倓
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有