如何在vue中使用cypressVue提供了vue-cli快速创建Vue项目。对于vuecreatehello-world，在安装项的选择中选择：E2Etesting->cypress。如何运行测试1.启动npmruntest:e2e2.打开cyprss管理窗口3.点击Runallspecsoratestfile运行这里以项目管理模块为例，运行仅需??14s5用例，这还是很快的。如何写测试用例从前端开发的角度写UI自动化用例，总体感觉还是很方便的！首先，为所有要操作的元素设置统一的属性。创建...编辑删除...不建议占用HTML提供的id,name,class...属性。它们一般都有特定的用途，比如class是用来指代css样式的。那么cy-data=xxxx就可以避免冲突，更加统一规范。接下来编写cypress自动化代码describe('ProjectManagement',()=>{it('AddProject',()=>{cy.visit('/#/project')cy.get('[cy-data=create-project]',{timeout:3000}).click()cy.wait(1000)cy.get('[cy-data=project-name]',{timeout:3000}).type('项目名称')cy.get('[cy-data=project-desc]',{timeout:3000}).type('项目备注')cy.get('[cy-data=save-button]',{timeout:3000}).click()//保存项目});//...})如何解决测试数据的问题我们在写自动化测试用例的时候，界面和UI都会面临测试数据的问题.比如我要测试登录，我要先创建一个用户数据，如果我要测试搜索，我要先创建一批可搜索数据。为此，我们不得不借助自动化中的setUp/treaDownfixture，编写大量的pre-action或post-action来完成这些准备工作。从测试的角度来说，前端训练无疑会把我们的测试用例复杂化，然后，很容易因为测试数据导致自动化用例的失败。那么，前端开发是如何解决的呢？在此之前，我们需要了解开发过程：在项目开发过程中。为了更顺利的完成开发工作，前端不能等到后端开发好界面后，再手写前端功能。因此，与后端定义接口后，通过mocks模拟接口数据，进行mock开发。那么在面向mock开发的过程中，难免前后端需要调整接口参数，比如前端需要增加一个字段，或者后端说数据结构需要调整。可以通过以下链接直接访问mock接口：https://yapi.baidu.com/mock/4...如何在vue项目中配??置不同的环境？需要学习vue开发...遇到的元素定位问题然而，给每个元素添加定位方法，有时候并不是我们想象的那么简单。如果你使用过前端UI（比如element-ui）库，你会发现并不是所有的页面元素都是通过HTML纯手写的。例如，下面的弹出窗口。element-UI就是这样实现的。点击打开消息框弹窗完全由element-UI渲染，我们无处为OK、Cancel等按钮添加定位特定的属性。这时候做前端开发就没有优势了。一定要老老实实在前端页面定位元素，写复杂的css定位。但是，即使我自定义定位，有时元素也不是唯一的。比如上面的列表，通过自定义定位得到的是一组元素。但是，如果只是一组元素，就没有必要单独说了。如上图所示，列表中有4个元素，通过定位得到8个元素，隐藏前4个。这与使用的element-UI库有关，因为数据是YAPI随机生成的，第五个显示元素无法编程操作。cypress提供的力非常有用，它会强制对隐藏元素进行操作。cy.get('[cy-data=edit-project]',{timeout:3000}).first().click({force:true})作为前端如何查看cypress前端开发视角发展，客观来说，在使用cypress的过程中并没有遇到太大的阻力。让我总结一下。因为用的是yapi，所以不需要考虑测试数据的准备。不需要写依赖步骤，主要是因为目前的业务功能没有太长的操作流程。大多数情况下，你可以自定义元素属性，不需要在定位上花太多时间，也不需要写太长的定位。测试运行速度尚可，运行28个用例大约需要80秒。测试视角作为自动化测试，如果我用cypress。为了验证数据的正确性，我不能要求开发使用yapi假数据，所以还是要自己准备数据。根据业务情况，必要的事前/事后行动是不可避免的。虽然，说服开发人员统一自定义元素有点困难，但对我来说并非不可能！Cypress在UI自动化上确实比selenium快，但是和selenium相比，它不支持更多的浏览器，不支持Grid远程调用，甚至不能根据自己的熟练程度选择语言。所以cypress的优势也不是铺天盖地，具体还是看需求。cypress是最好的工具IscypressthebesttoolforallUIautomation?在面向前端的开发框架Vue/React中，cypress确实很好的集成了，让我们的使用更加方便。Selenium在我接触的后端djangoweb框架中很好的集成了，也可以达到类似的效果。之前看过一本书《Test-Driven Development with Python》，这本书很好的结合了基于Selenium的UI测试和Django开发。因此，结论是结合自己的开发框架选择合适的E2E测试工具。测试呢？一直以来，我们自然而然地认为，UI自动化测试应该是通过测试来完成的，高层次的目标就是能够做UI自动化测试！但是从我上面的实践中，我们会发现开发UI自动化的优势是很明显的。那么测试呢？能不能老老实实回去测试一下功能？当然不是。并非每个开发人员都知道如何编写UI自动化测试。虽然，这对他们来说并不是特别困难。我们完全成为这方面的“教练”，教开发者如何编写UI自动化测试，如何设计更全面的测试用例。不是每个团队的开发都有时间写UI自动化测试，或者他们可能不愿意写，那我们为什么不加入他们呢？以我前面介绍的方式，深度参与项目自动化测试的编写。而不是现在这样，项目开发和自动化测试完全分开，分开进行。原作者：虫师
