1. 前言
Cypress Studio提供了通过测试执行程序生成测试的可视化方法，记录与测试对象APP应用程序的交互。 支持. click ()、 type )、 check、 uncheck )、 select )和Cypress命令。 这些命令在与Cypress Studio内部的DOM进行交互时生成测试代码。
2. 使用Cypress Studio
Cypress Studio是一个实验性功能，可以通过在配置文件中添加experimentalStudio属性来启用。 在塞浦路斯. json的默认情况下)。
{
‘ experimental studio ‘ :真
使用登录案例演示如何实际使用Cypress测试、模式和工作流。 它用于演示以下Cypress Studio的功能：
3.扩展测试
可以扩展现有测试，也可以使用以下测试支架默认使用集成文件夹(cypress/integration为默认)创建新测试并开始。
describe (‘第一个记录脚本从禅道登录开始(，function ) )。
贝尔福耶卡() )={
cy.visit (http://本地主机：8080/Zen Tao /用户登录. html ) )
() )
it (“登录输入框功能”，功能) )。
() )
{1}
1. 运行规范
使用cypress studio进行“新建事务”的用户旅行。 首先，启动测试运行程序，然后运行上一步骤中创建的规范。
测试完成运行后，将鼠标悬停在命令日志中的测试上方，以显示“将命令添加到测试”按钮。单击“添加要测试的命令”将启动Cypress Studio。
。
2. 启动Cypress Studio
。
现在，您可以更新测试以在用户之间创建新的事务处理。
要记录
3.应用程式互动
操作，请开始与APP对话。 在此，单击帐户的密码输入框。 然后，您会看到命令日志中记录了点击。
要放弃对话，请单击“取消”按钮退出Cypress Studio。 如果您对与APP的交互感到满意，请单击“存储命令”。 测试代码保存在spec文件中。
4. 生成的测试代码
查看这里的测试代码，可以看到点击“Save Commands”后测试将更新，使用的是Cypress Studio记录的操作。
describe (‘第一个记录脚本从禅道登录开始(，function ) )。
it (“登录输入框功能”，功能) )。
cy.visit (http://本地主机：8080/Zen Tao /用户登录. html ) )
/*===generatedwithcypressstudio==* /
cy .获取(#帐户) .类型) )管理员)；
获得(‘ .酷-8) ) .点击)；
cy.get(:nth-child )2) td .form-control ).type )长石@ 2020 )；
获取(‘ .表单操作’ ) .点击)；
cy.get(‘#submit ‘ ).click (
);
/* ==== End Cypress Studio ==== */
})
})
5. 添加新测试
您可以通过在我们定义的块上单击“添加新测试”，将新测试添加到任何现有describe或块中。context“describe
保存后，该文件将在cypress中再次运行。
最后，查看我们的测试代码，我们可以看到单击“ Save Commands”（保存命令）后更新了测试，并使用了我们在Cypress Studio中记录的操作。
describe(‘第一个录制脚本从禅道登录开始’, function () {
it(“登录输入框功能”, function () {
cy.visit(‘http://localhost:8080/zentao/user-login.html’)
/* ==== Generated with Cypress Studio ==== */
cy.get(‘#account’).type(‘admin’);
cy.get(‘.col-8’).click();
cy.get(‘:nth-child(2) > td > .form-control’).type(‘longshi@2020’);
cy.get(‘.form-actions’).click();
cy.get(‘#submit’).click();
/* ==== End Cypress Studio ==== */
})
/* === Test Created with Cypress Studio === */
it(‘TestDemo’, function() {
/* ==== Generated with Cypress Studio ==== */
cy.visit(‘http://localhost：8080/zentao/user-login.html’);
cy.get(‘#account’).type(‘admin’);
cy.get(‘#login’).click();
cy.get(‘:nth-child(2) > td > .form-control’).type(‘longshi@2020’);
cy.get(‘#submit’).click();
cy.get(‘[data-id=”product”] > a’).click();
/* ==== End Cypress Studio ==== */
});
})
4. 插件Cypress Recorder
通过Cypress Recorder也可以实现录制脚本百度网盘下载：https://pan.baidu.com/s/1YHtA8RYdmX7Y8oe3EqTPqw提取码：8888
1. Cypress Recorder安装
将下载的zip解压本地，加入到chrome浏览器扩展程序中
2.启动Cypress Recorder
3.点击 Start Recording
Copy to Clipboard
cy.visit(‘https://www.baidu.com/’);
cy.get(‘#lg’).click();
cy.get(‘#kw’).click();
cy.get(‘#kw’).type(‘博客园’);
cy.get(‘#su’).click();
cy.get(‘#form’).submit();
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家的支持。