端到端（E2E）測(cè)試可驗(yàn)證從頭到尾的應(yīng)用流量。連續(xù)集成（CI）不是手動(dòng)測(cè)試，而是自動(dòng)化此過(guò)程。編寫代碼，保存并讓工具確保其不會(huì)破壞現(xiàn)有功能。賽普拉斯是一個(gè)強(qiáng)大的E2E測(cè)試框架，可簡(jiǎn)化此過(guò)程，特別是對(duì)于像React這樣的現(xiàn)代JavaScript庫(kù)。

設(shè)置測(cè)試應(yīng)用程序

本教程使用示例待辦器應(yīng)用程序?？寺〈鎯?chǔ)庫(kù)以進(jìn)行以下操作：

 git克隆[電子郵件保護(hù)]：sinsomicrote/cypress-react-tutorial.git

導(dǎo)航到目錄并安裝依賴項(xiàng)：

 CD柏樹(shù)反應(yīng)教程
紗線安裝

安裝柏樹(shù)：

紗線添加柏樹(shù) -  dev

開(kāi)放柏樹(shù)：

 node_modules/.bin/Cypress打開(kāi)

要更輕松地訪問(wèn)，請(qǐng)將此腳本添加到package.json ：

 “腳本”：{
  “柏樹(shù)”：“柏樹(shù)打開(kāi)”
}

現(xiàn)在，運(yùn)行yarn cypress以打開(kāi)柏樹(shù)。使用yarn start查看應(yīng)用程序。

讓我們?cè)?code>cypress/integration/init.spec.js中創(chuàng)建一個(gè)基本測(cè)試：

描述（'Cypress'，（）=> {
  它（'正在工作'，（）=> {
    期望（true）.to.equal（true）;
  }）;
}）;

這證實(shí)柏樹(shù)正在起作用?，F(xiàn)在，讓我們測(cè)試訪問(wèn)該應(yīng)用程序：

它（'訪問(wèn)app'，（）=> {
  cy.visit（'http：// localhost：3000'）;
}）;

為避免重復(fù)URL，請(qǐng)?jiān)?code>cypress.json中設(shè)置一個(gè)基本URL。

 {
  “ baseurl”：“ http：// localhost：3000”
}

現(xiàn)在可以簡(jiǎn)化測(cè)試以：

它（'訪問(wèn)app'，（）=> {
  cy.visit（'/'）;
}）;

測(cè)試表單控件和輸入

創(chuàng)建cypress/integration/form.spec.js來(lái)測(cè)試用戶交互。

描述（'form'，（）=> {
  each（（）=> {
    cy.visit（'/'）;
  }）;

  它（'focus the Input'，（）=> {
    cy.focused（）。應(yīng)該（'ham ham class'，'form-control'）;
  }）;

  它（'接受輸入'，（）=> {
    const Input =“關(guān)于柏樹(shù)”；
    cy.get（'。形式控制'）
      .Type（輸入）
      。
  }）;

  it（'顯示todos'，（）=> {
    cy.get（'li'）。應(yīng)該（'have.length'，2）;
  }）;

  它（'添加一個(gè)新的todo'，（）=> {
    const Input =“關(guān)于柏樹(shù)”；
    cy.get（'。形式控制'）
      .Type（輸入）
      .type（'{enter}'）
      .get（'li'）
      。
  }）;

  它（'刪除todo'，（）=> {
    cy.get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。點(diǎn)擊（）
      .get（'li'）
      。
  }）;

  它（'刪除所有todos'，（）=> {
    cy.get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。點(diǎn)擊（）
      .get（'li'）
      。第一的（）
      .find（'。btn-danger'）
      。點(diǎn)擊（）
      .get（'。否任務(wù)'）
      。
  }）;
}）;

這些測(cè)試涵蓋了輸入焦點(diǎn)，輸入接受，初始todo計(jì)數(shù)，添加了新的todo，刪除單個(gè)待辦事項(xiàng)，并刪除了所有Todos。

測(cè)試網(wǎng)絡(luò)請(qǐng)求

測(cè)試網(wǎng)絡(luò)請(qǐng)求確保數(shù)據(jù)獲取正常工作。例如，使用JSON占位符API：

描述（'請(qǐng)求'，（）=> {
  它（'顯示API的隨機(jī)用戶，（）=> {
    cy.request（'https://jsonplaceholder.typicode.com/users'）
      。
        期望（響應(yīng)status）.e.eq（200）;
        期望（響應(yīng)body）.have.length（10）;
        期望（響應(yīng)）.have.property（'標(biāo)題'）;
        期望（響應(yīng)）。
      }）;
  }）;
}）;

這將驗(yàn)證API響應(yīng)狀態(tài)，數(shù)據(jù)長(zhǎng)度和響應(yīng)屬性。

從命令行運(yùn)行測(cè)試

從終端運(yùn)行柏樹(shù)測(cè)試：

 NPX柏樹(shù)運(yùn)行

進(jìn)行特定的測(cè)試：

 npx柏樹(shù)運(yùn)行 - 規(guī)格“柏樹(shù)/integration/form.spec.js”

這提供了測(cè)試結(jié)果的命令行摘要。有關(guān)更高級(jí)的命令行選項(xiàng)，請(qǐng)參閱柏樹(shù)文檔。

結(jié)論

賽普拉斯簡(jiǎn)化了E2E測(cè)試，使其對(duì)開(kāi)發(fā)人員易于訪問(wèn)和有益。該教程展示了中間測(cè)試技術(shù)的基礎(chǔ)，鼓勵(lì)您進(jìn)一步探索其功能。請(qǐng)記住要查閱柏樹(shù)文檔以獲取更高級(jí)的功能和最佳實(shí)踐。

以上是使用柏樹(shù)為React應(yīng)用程序編寫測(cè)試的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！