賽普拉斯路由功能未檢測到網絡請求

Question

我正在嘗試等待我的應用程序提出的請求，但賽普拉斯沒有在cy.wait上檢測到它

    cy.server();
    cy.getAuthenticatedUrl();
    cy.route('POST', '/showroom/validate').as('uploadShowroom');

    cy.get('[data-testid=Next]').click();

    cy.uploadFile('[id=uploadArea]', 'testfile-valid.xlsx', 'application/vnd.ms-excel');

    cy.wait('@uploadShowroom');

    cy.contains('FILE UPLOAD DONE');

如果我在測試期間檢查我的控制台，我可以看到請求已經發送到我的服務器

我的客戶端和服務器都在本地運行但在不同的端口。

錯誤如下： CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'uploadShowroom'. No request ever occurred.錯誤CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'uploadShowroom'. No request ever occurred. CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'uploadShowroom'. No request ever occurred.

Answer 1

我認為這是因為你的表單是使用本機表單提交，但賽普拉斯的cy.route()只響應XHR調用（目前）。

問題＃170有一個很大的討論。

Gleb Bahmutov在這個評論中有一個有趣的想法，這個存儲庫中的代碼。 基本上，他在飛行中通過XHR提交“嘲笑”原生提交。

我嘗試了一種更接近您的場景的變體。 按照存儲庫READ.ME設置測試，但首先更新package.json的賽普拉斯版本。 將要上載的文件添加到/cypress/fixtures 。

然后嘗試以下規范。

第三個測試是使用cy.url()而不是cy.route()的替代方案。

uploadFile命令（或類似的變體）

Cypress.Commands.add('uploadFile', (fileName, selector) =>
  cy.get(selector).then(subject => {
    return cy
      .fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        const el = subject[0];
        const testFile = new File([blob], fileName, {
          type: 'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet',
        });
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(testFile);
        el.files = dataTransfer.files;
        return subject;
      });
  })
);

使用XHR“模擬”本機提交的功能（位於Spec頂部）

const mockNativeSubmitWithXhr = (form$) => {
  let win
  cy.window().then(w => {
    win = w
  })
  form$.on('submit', e => {
    e.preventDefault()
    const form = new FormData(e.target)
    const XHR = new win.XMLHttpRequest()
    XHR.onload = response => {
      win.document.write(XHR.responseText)
      win.history.pushState({}, '', XHR.url)
    }
    XHR.open(e.target.method, e.target.action)
    XHR.send(form)
    return true
  })
}

規格

describe('waiting for form-data post', () => {

  beforeEach(() => {
    cy.task('deleteFile', '../../uploads/Sample_data.xlsx')
    cy.visit('localhost:3000')
    cy.get('input[name="userid"]').type('foo@bar.com')
  })

  it('upload with native form submit (fails because of native event)', () => {
    cy.server()
    cy.route('POST', '/upload').as('upload');

    cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
    cy.get('input[type="submit"]').click()

    cy.wait('@upload');
    cy.readFile('uploads/Sample_data.xlsx') // check saved file
  })

  it('upload with form submit mocked to XHR send (succeeds)', () => {
    cy.server()
    cy.route('POST', '/upload').as('upload');

    cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
    cy.get('form').then(form => mockNativeSubmitWithXhr(form))
    cy.get('input[type="submit"]').click()

    cy.wait('@upload');
    cy.readFile('uploads/Sample_data.xlsx')
  })

  it('upload with native form submit (testing url has changed)', () => {
    cy.uploadFile('Sample_data.xlsx', '[id=fileToUpload]')
    cy.get('input[type="submit"]').click()

    cy.url().should('eq', 'http://localhost:3000/upload')
    cy.readFile('uploads/Sample_data.xlsx')
  })
})

在測試之間刪除上傳文件的任務（修改'/cypress/plugins/index.js'）

const fs = require('fs')

module.exports = (on, config) => {
  on('task', {
    deleteFile: (path) => {
      if (fs.existsSync(path)) {
        fs.unlinkSync(path)
      }
      return null
    }
  })
}

Answer 2

我跑了類似的東西。 訣竅不是針對字符串檢查路由，而是針對正則表達式。 試試這個以匹配你的POST路線：

cy.route('POST', /showroom\/validate/).as('uploadShowroom');
// [...]
cy.wait('@uploadShowroom');

如果你可以看到路徑在cypress命令日志中匹配（路由旁邊的黃色徽章），它應該做什么，你想要什么。

Answer 3

嘗試覆蓋等待的默認超時：

cy.wait（'@ uploadShowroom'，{timeout：10000）;