1. 前言
更多內容關注公眾號：自動化測試 To shre
Cypress Studio提供了一種在測試運行程序中生成測試的可視化方法，通過記錄與被測應用程序的交互。支持.click（）、.type（）、.check（）、.uncheck（）和.select（）Cypress命令，這些命令將在與Cypress Studio內部的DOM交互時生成測試代碼。
2. 使用Cypress Studio
Cypress Studio是一個實驗性功能，可以通過向配置文件添加experimentalStudio屬性來啟用(塞浦路斯.json默認情況下）。
{ "experimentalStudio": true } 我們以百度搜索，以演示Cypress測試方法、模式和工作流的真實使用。它將用於演示下面Cypress Studio的功能。
3.擴展測試
您可以擴展任何先前存在的測試，也可以使用以下測試支架在您的默認情況下integrationFolder（cypress/integration在默認情況下）創建一個新測試來開始。
describe('第一個錄制腳本從禪道登錄開始', function () { beforeEach(() => { cy.visit('http://localhost:8080/zentao/user-login.html') }) it("登錄輸入框功能", function () { }) }) 1. 運行規范
我們將使用Cypress Studio執行“新事務”用戶旅程。首先，啟動測試運行程序並運行在上一步中創建的規范。
測試完成運行后，將鼠標懸停在命令日志中的測試上方，以顯示“將命令添加到測試”按鈕。單擊“添加要測試的命令”將啟動Cypress Studio。
2. 啟動Cypress Studio
現在，我們可以開始更新測試以在用戶之間創建新事務。
3.應用程式互動
要記錄操作，請開始與應用程序進行交互。在這里，我們將單擊賬號密碼輸入框，結果將看到單擊記錄在命令日志中。
要放棄交互，請單擊“取消”按鈕退出Cypress Studio。如果對與應用程序的交互感到滿意，請單擊“保存命令”，測試代碼將保存到spec文件中。
4. 生成的測試代碼
查看我們的測試代碼，我們可以看到單擊“ 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 ==== */ }) }) 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();
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家的支持。