https://fwhyy.com/tags/testcafe/Recent content in Testcafe on 冯威的博客Hugozh-CNMon, 08 Jul 2019 07:00:15 +0800https://fwhyy.com/2019/07/jenkins-and-testcafe/Mon, 08 Jul 2019 07:00:15 +0800https://fwhyy.com/2019/07/jenkins-and-testcafe/<p>上一篇《<a href="http://fwhyy.com/2019/07/some-thoughts-on-product-quality/">对产品质量的一点思考</a>》中说到自动化测试的重要性，本文简单介绍下怎样在实际项目中实现端到端测试的自动化，在这里我们使用的端到端测试工具是TestCafe。</p> <h2 id="环境">环境</h2> <p>Jenkisn：2.183 TestCafe：1.3.0</p> <h2 id="为什么采用testcafe做自动化测试">为什么采用TestCafe做自动化测试</h2> <ul> <li>前端Vue或是netCore要添加单元测试相对较复杂，需要一定的时间来沉淀，不能解燃眉之急</li> <li>经常会因为代码重构、代码合并等原因造成原本正常的功能出现问题，而这些问题在手动测试时不容易覆盖到</li> <li>TestCafe足够简单，只要使用过jQuery，基本可以几分钟上手</li> </ul> <h2 id="要实现的目标">要实现的目标</h2> <p>目前前端代码通过GitLab来进行管理，采用Merge Request的开发模式，开发人员的代码被合并到master后，Jenkins会自动构建到测试环境，希望自动化测试能做到下面两点：</p> <ul> <li>能在前端项目构建完成后自动执行TestCafe脚本进行测试</li> <li>能提供测试的完整结果</li> </ul> <h2 id="步骤">步骤</h2> <p>1、在Jenkins中新创建一个新的项目</p> <p><img src="https://img.fwhyy.com/2022/202201280613334.webp" alt="" loading="lazy" decoding="async"> </p> <p>Git中配置的测试的代码地址<code>https://github.com/oec2003/testcafe-ci-demo.git</code>是我fork的官网的一个例子,原项目地址为：<code>https://github.com/DevExpress-Examples/testcafe-ci-demo.git</code></p> <p>2、增加构建步骤，选择执行Windows批处理命令</p> <p><img src="https://img.fwhyy.com/2022/202201280614319.webp" alt="" loading="lazy" decoding="async"> </p> <p><img src="https://img.fwhyy.com/2022/202201280614096.webp" alt="" loading="lazy" decoding="async"> </p> <pre tabindex="0"><code>D:\Jenkins\Testcafe\node_modules\.bin\testcafe path:C:\Users\oec2003\AppData\Local\Google\Chrome\Application\chrome.exe tests/**/* -r xunit:res.xml </code></pre><p>上面执行的命令分为三个部分：</p> <ul> <li>testcafe的执行程序</li> <li>测试的浏览器的路径，此处为chrome的路径，这里有一个小坑，直接执行命令时是可以使用chrome或ie来选择测试浏览器的，但配置在Jenkins中如果直接写chrome或ie会报异常，所以写了chrome执行程序的全路径</li> <li>将结果输出到xunit的xml文件中</li> </ul> <p>要想使用xunit，需要先使用下面命令进行安装</p> <pre tabindex="0"><code>npm install testcafe testcafe-reporter-xunit </code></pre><p>3、添加构建后操作，选择Publish JUnit test result report</p> <p><img src="https://img.fwhyy.com/2022/202201280614661.webp" alt="" loading="lazy" decoding="async"> <img src="https://img.fwhyy.com/2022/202201280614568.webp" alt="" loading="lazy" decoding="async"> </p> <p>4、修改Jenkins中现有的前端项目的配置，增加构建后操作步骤，选择构建起他工程</p> <p><img src="https://img.fwhyy.com/2022/202201280615176.webp" alt="" loading="lazy" decoding="async"> </p> <p>选择第一步创建的测试项目即可。</p> <p>5、实际测试结果如下，所有测试用例的通过情况以列表形式展现，点击可以看详细信息</p> <p><img src="https://img.fwhyy.com/2022/202201280615015.webp" alt="" loading="lazy" decoding="async"> </p> <h2 id="总结">总结</h2> <ul> <li>Testcafe非常简单，有一定开发经验的程序员，可以在很短的时间内达到熟练的程度</li> <li>Testcafe虽然简单，但怎样去设置场景覆盖，让所有业务没有遗漏，这才是比较困难的，是我们需要着重思考的</li> <li>前端代码如果做了修改，特别是UI层面做了调整，测试代码需要同步修改</li> <li>只要能够持续下去，先从容易出错的模块开始，积少成多，软件质量的最后一道防线一定能守住</li> </ul>