我正在使用 VueJS 和 Cypress 來測驗應用程式 e2e。我有一個模式，用戶填寫表格并單擊“發送”按鈕。當用戶單擊該按鈕時，我們禁用表單欄位和按鈕，因此用戶將無法填寫/單擊它們。之后，我們執行 POST 請求來上傳資料，完成后，我們再次啟用（并關閉模式）。這樣做的方法：
updateUIComponents: function(status) {
this.field.disabled = status;
...
this.sendButtondisabled = status;
},
我想測驗這些組件是否真的被禁用，使用賽普拉斯。但問題是我似乎無法弄清楚如何“凍結”發布請求并檢查它是否被禁用。我當前的代碼如下所示：
it('Test', () => {
cy.intercept('GET','**/api/get-data', {
statusCode: 200,
fixture: 'test_input_one_record.json'
});
cy.intercept('POST','**/api/update-data', {
statusCode: 200,
fixture: 'test_input_no_data.json'
}).as('updateData');
cy.visit("http://localhost:8080");
cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click(); // Open modal
cy.get('div[role="dialog"]').find('button').eq(1).click(); // Click on update button
cy.get('@updateData').then((interception) => { // Check form data parameters
assert.isNotNull(interception);
const values = parseDataRequest(interception.request);
assert.isTrue(values.data_number === "2222");
});
});
我怎樣才能讓cy.get('div[role="dialog"]').find('button').eq(1).click()“等待”？我可以檢查它是否被禁用的方式：
cy.get('#edit-document-data-number').find('input').should('be.disabled');
uj5u.com熱心網友回復：
如果重新啟用僅在 POST 回應后發生，請在攔截中添加延遲以留出足夠的時間cy.get('#edit-document-data-number').find('input').should('be.disabled')通過。
cy.intercept('POST','**/api/update-data', {
statusCode: 200,
delay: 2000, // delay here, maybe shorter will work
fixture: 'test_input_no_data.json'
}).as('updateData')
cy.visit("http://localhost:8080")
cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click();
cy.get('div[role="dialog"]').find('button').eq(1).click();
cy.get('#edit-document-data-number input') // select in one command
.should('be.disabled') // for retry of assertion
cy.wait('@updateData')
cy.get('#edit-document-data-number input')
.should('not.be.disabled')
cy.get('@updateData').then((interception) => {
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/434627.html
標籤：javascript Vue.js 柏 cy.intercept
上一篇：為什么Vue看不到資料變化？