Preface官方文档：https://docs.cypress.io目前只支持英文。优点是官方介绍视频很多，英语不好的人也容易上手；优缺点：只要学好js，语法应该不会很大问题是获取dom类似于jq，适合前端同学；缺点：内置的GUI工具集成了谷歌内核，所以只能在谷歌浏览器上测试，但由于新版Edge内核使用的是Chromium内核，这个缺点无伤大雅；为什么要用cypress，请看：https://segmentfault.com/a/11...看1、2、3点即可；入门废话不多说。看完以上几点，你就该决定要不要入坑了。我很清楚；网上大部分安装都说用npmicypress-d。痛点是内置的谷歌内核太大。每个项目安装起来太麻烦，也不好管理。这里我们使用npmi-gcypress进行全局安装，这样既节省了磁盘空间也节省了启动时间。由于已经全局安装了cypress的环境变量，所以会在npm的环境变量中进行配置，而npm的环境变量自然是在系统变量中。在cmd中输入cypressopen，全局打开。直接拖入项目，项目中会生成cypress文件夹和cypress.json。在cypress.json中，我们可以配置测试环境：{"viewportWidth":1440,"viewportHeight":900,"chromeWebSecurity":false,"fixturesFolder":"cypress/fixtures","integrationFolder":"cypress/integration","pluginsFile":"cypress/plugins","screenshotsFolder":"cypress/screenshots","videosFolder":"cypress/videos","supportFile":"cypress/support","requestTimeout":10000,"defaultCommandTimeout":10000,"baseUrl":"http://192.168.1.6:9000"}在赛普拉斯文件中：有四个文件夹，fixtures（存放测试文件）、integration（测试用例）、plugins（插件）、support（扩展）；常规测试用例高级常规写法可以参考集成文件下的examples文件describe('test',()=>{it('test',()=>{cy.visit('https://news.ycombinator.com/login?goto=news')cy.get('input[name="acct"]').eq(0).type('test')cy.get('input[name="pw"]').eq(0).type('123456')cy.get('input[value="login"]').click()cy.contains('Badlogin')})})改进测试用例通过模块导入{login}from'./login'import{issue}from'./issue'describe('test',function(){it('loginIn',login)it('issue',issue)})inlogin.jsconstlogin=()=>{cy.visit('https://news.ycombinator.com/login?goto=news')cy.get('input[name="acct"]').eq(0).type('test')cy.get('input[名称="pw"]').eq(0).type('123456')cy.get('input[value="login"]').click()cy.contains('Badlogin')}export{login}模拟输入框（指点击重新渲染输入框）：先点击然后使用force:true忽略错误，在typecy.get(':nth-child(1)>.td>.t-input__text.edit-pointer').click({force:true});cy.get('.el-input__inner').eq(4).type('测试内容',{force:true});cypress无法操作上传文件弹窗，我们可以使用：在fixtures中放入需要上传的文件，例如：2345.jpg在support文件夹下的commands.js中写入扩展名Cypress.Commands.add('upload_file',(fileName,fileType='',selector)=>{returncy.get(selector).then(subject=>{cy.fixture(fileName,'base64').then(Cypress.Blob.base64StringToBlob).then(blob=>{constel=subject[0];consttestFile=newFile([blob],fileName,{type:fileType});constdataTransfer=newDataTransfer();dataTransfer.items.add(testFile);el.files=dataTransfer.files;});});});然后在用例中调用：constfileName='2345.jpg';//上传文件名constfileType='video/jpg';//mime类型constfileInput='input[type=file]';//上传文件输入框cy.upload_file(fileName,fileType,fileInput);cy.wait(2000);以便您可以愉快地提交！以后有什么痛点，我会继续分享给大家。！欢迎访问我的个人网站：http://www.slorl.com
