如何在 React 應用程序中使用 Cypress 編寫端到端測試

前端開發涉及構建具有視覺吸引力、功能性的面向客戶的應用程序。但有一個問題；這些應用程序必須確保用戶擁有無縫的體驗。

為了全面驗證應用程序的運行，必須進行單元測試和集成測試，以確認其功能。然而，這些類型的測試可能無法完全涵蓋典型用戶體驗的所有方面。為了準確地重新創建用戶的旅程，有必要進行端到端測試，忠實地模仿他們與系統的實際交互。通過這樣做，人們可以對應用程序在其過程的每個階段的性能充滿信心。

使用 Cypress 開始進行端到端測試

前端應用程序中端到端測試的主要目標之一是確保實現預期結果，而不是仔細檢查底層業務邏輯如何運行的細節。

以登錄表單為例。最理想的是，人們應該評估登錄屏幕是否正確顯示並執行其預期功能，而不考慮複雜的技術規格。最終，目標在於站在用戶的角度並檢查他們的綜合體驗。

Cypress 是一個很棒的自動化測試框架，與一些最流行的 JavaScript 框架兼容。它直接在瀏覽器中運行測試的能力及其全面的測試功能套件使測試無縫且高效。它還支持各種測試方法，包括:

⭐單元測試

⭐端到端測試

⭐集成測試

要開發涵蓋 React 應用程序功能所有方面的綜合測試用例，必須考慮以下敘述，從最終用戶的角度評估其行為:

個人能夠感知到帶有提交按鈕的文本輸入字段。

個人可以在為此目的指定的空白區域（稱為“輸入字段”）中輸入問題或短語。

單擊“提交”按鈕後，預計列出的項目將直接出現在相應輸入字段的下方。

通過遵循這些用戶故事，您可以構建一個簡單的 React 應用程序，讓用戶搜索產品。該應用程序將從 DummyJSON API 獲取產品數據並將其呈現在頁面上。

該項目的源代碼託管在開發人員的 GitHub 帳戶上，可以通過訪問關聯的存儲庫來訪問該帳戶。

設置一個 React 項目

要啟動該過程，您可以使用 Vite 創建一個 React 項目，或者使用“create-react-app”命令來設置一個基本的 React 應用程序。設置階段完成後，繼續下載 Cypress 庫作為項目框架內的開發依賴資源。

 npm install cypress --save-dev 

事實上，有必要通過將上述腳本合併到其範圍內來修改 package.json 文件。

 "test": "npx cypress open" 

創建一個功能組件

在源目錄中，建立一個子文件夾並為其分配標籤“components”。在這個劃分的區域中，啟動創建一個名為“products.jsx”的新文本文檔的過程，並將提供的代碼合併到其內容中。

 import React, { useState, useEffect } from 'react';
import "./style.component.css"

export default function Products(prop) {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);
   const { searchInput } = prop;


  return (
    <div className="product-catalogue">
      {error ? (
        <p>Product not found</p>
      ) : (
        <div className="product-list">
          {products.slice(0, 6).map((product) => (
            <div className="product" key={product.id}>
              <h2>Title: {product.title}</h2>
              <p>Price: ${product.price}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

在給定的場景中，必須在功能組件中實現“useEffect”掛鉤。該掛鉤將負責執行異步操作，檢索產品數據以響應用戶的搜索查詢。

  useEffect(() => {
    const fetchProducts = async () => {
      if (searchInput) {
        const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
        try {
          const response = await fetch(apiUrl);
          if (!response.ok) {
            throw new Error('Error fetching products');
          }
          const json = await response.json();
          setProducts(json.products);
          setError(null);
         } catch (error) {
          setError(error.message);
        }
      }
    };
    fetchProducts();
  }, [searchInput]); 

更新 App.jsx 文件

通過合併下面提供的代碼片段來更新 App.js 文件:javascriptimport React from’react’;import { BrowserRouter as Router, Route, Switch } from’react-router-dom’;import LoginPage from’./LoginPage/登錄頁面’;//在此處導入您的登錄頁面組件import HomePage from ‘./HomePage/HomePage’;//在此處導入您的主頁組件import ServiceListPage from ‘./ServiceListPage/ServiceListPage’;//在此導入您的服務列表頁面組件import CreateAccountForm from ‘./CreateAccountForm/CreateAccountForm’;//在此處導入您的創建帳戶表單組件 import { useHistory } from ‘react-router-dom’;function App() {const History=useHistory();return (

 import React, { useState,useRef } from 'react'
import './App.css'
import Products from './components/Products'

function App() {
  const [searchInput, setSearchInput] = useState('')
  const searchInputRef = useRef('');

  const handleSubmit = (e) => {
    setSearchInput(searchInputRef.current.value);
  }

  return (
    <div>
      <h1>Cypress Testing Library tutorial</h1>
        <label htmlFor="input">Input</label>
      
        <input
          id="text"
          type="text"
          ref={searchInputRef}/>

        <button id="btn" type="button" onClick={handleSubmit}>Submit</button>
      <Products data-testid="products-component" searchInput={searchInput}/>
     </div>
  )
}

export default App 

繼續啟動開發服務器。

 npm run dev 

事實上，您現在應該能夠輕鬆地從模擬 JSON API 檢索特定信息。

設置測試環境

請首先使用終端命令執行測試腳本:

 npm run test 

請執行指定的操作，這將啟動 Cypress 測試框架。請單擊下面的“E2E 測試”按鈕繼續。

請單擊“繼續”以合併賽普拉斯配置文件。

完成此過程後，人們應該會看到他們的項目中出現了一個新穎的 Cypress 測試文件夾。此外，Cypress 的客戶端自動附加 cypress.config.js 文檔。用戶有權修改此記錄，以定制與測試環境、行為和配置有關的一系列細微差別。

使用 Cypress 編寫端到端測試

為了執行初始測試，有必要選擇將主持考試的網絡瀏覽器。從賽普拉斯界面中提供的選項範圍中，請選擇符合您偏好的版本。

賽普拉斯將啟動所選網絡瀏覽器的簡化迭代，建立一個精心策劃的測試環境以用於評估目的。

要生成新的測試文件，請從可用選項中選擇“創建新規範”選項。

請導航到您首選的代碼編輯器，訪問“cypress/e2e/App.spec.cy.js”文件，並通過合併提供的代碼對其內容進行必要的修改。

 describe('App Tests', () => {
  beforeEach(() => {
    cy.visit('http://127.0.0.1:5173/');
   });

  it('Renders input field and submit button', () => {
     cy.get('#text').should('exist').should('be.visible');
    cy.get('#btn').should('exist').should('be.visible').contains('Submit');
  });

  it('Enters a search query', () => {
    const searchQuery = 'laptops';
    cy.get('#text').type(searchQuery);
  });
}); 

當前的測試框架通過確保系統在各種場景中按預期運行，同時結合每個單獨的故事情節中概述的輸入標準，來驗證上述用戶敘述的多個方面。

Web應用程序的用戶界面應包括輸入字段和提交按鈕，由瀏覽器在網頁上顯示。

用戶可以通過提供的文本框或語音命令功能輸入搜索查詢，使他們能夠輕鬆高效地找到所需的信息。

Cypress 與 Jest 和 Supertest 等其他流行的 JavaScript 測試框架類似，它利用聲明性方法和特定語言來構建測試場景。

要執行測試，請導航回賽普拉斯監督的簡化瀏覽器環境，然後選擇您想要執行的特定測試腳本。

Cypress 旨在執行測試並在測試場界面的左側面板中顯示結果，為用戶提供監控測試進度的便捷方法。

模擬應用程序流程

為了驗證此特定場景中的完整用戶體驗，確認應用程序能夠接受用戶輸入、檢索必要信息並最終在瀏覽器界面中顯示所述信息至關重要。

為了確保透明度，可以建立一個單獨的測試文件，其中包含端到端目錄中的替代測試套件。此外，還存在另一種選擇，其中檢查特定場景的多個測試用例被合併在單個測試文件中。

請使用提供的代碼片段在“e2e”目錄中生成新的“Products.spec.cy.js”文件。

 describe('Products Tests', () => {
    it(' fetches and displays the data', () => {
      const searchQuery = 'laptops';
      cy.visit('http://127.0.0.1:5173');
   
      cy.get('#text').type(searchQuery);
      cy.get('#btn').contains('Submit').click();
  
      cy.get('.product').should('have.length.greaterThan', 0);
  
      cy.get('.product').first().should('contain', 'Title');
       cy.get('.product').first().should('contain', 'Price: $');
    });

  }); 

目前的測試集合驗證了，當用戶輸入特定查詢時，應用程序會檢索並在 Web 瀏覽器界面中顯示相關信息。

該工具通過提交搜索查詢並檢查結果頁面是否包含商品標題和價格等相關信息來模擬在電子商務網站上搜索產品的過程。這使得能夠從用戶的角度全面評估用戶的瀏覽體驗。

模擬錯誤和響應

您能夠在賽普拉斯測試用例中重新創建一系列錯誤情況和相應的反應，從而在測試潛在問題時提供更大的靈活性。

請在“e2e”目錄中創建一個名為“Error.spec.cy.js”的新JavaScript文件，並包含以下代碼片段:

 describe('Error Handling Tests', () => {
    it('Displays error message for incorrect search query', () => {
  
      cy.intercept('GET',/https:\/\/dummyjson\.com\/products\/category\/.*/, {
        statusCode: 404,//Not Found
        body: 'Product not found'
      }).as('fetchProducts');

      cy.visit('http://127.0.0.1:5173');

      const incorrectSearchQuery = 'rocket';
      cy.get('#text').type(incorrectSearchQuery);
      cy.get('#btn').click();

      cy.wait('@fetchProducts');

      cy.contains('Product not found').should('be.visible');
    });
  }); 

該測試套件的當前實現重點是確保每當用戶輸入無效搜索查詢時都會生成可識別的錯誤消息，以便及時通知他們問題並促進採取適當的糾正措施。

為了使測試用例被認為是成功的，它利用 Cypress 的攔截功能通過模擬錯誤的網絡連接來模擬網絡錯誤。隨後，當在指定的輸入字段中輸入無效的搜索查詢並啟動數據檢索過程時，測試會驗證網頁上是否顯著顯示可見的錯誤消息“未找到產品”。

目前的結果表明錯誤管理系統正在按照其預期設計運行。

在測試驅動開發中使用 Cypress

測試是軟件開發的一個重要方面，需要高度重視以確保產品的質量和可靠性。雖然測試可能會消耗大量時間和資源，但利用 Cypress 等工具可以通過簡化測試流程並促進測試用例的高效執行來提供成就感。

賽普拉斯提供了一系列令人印象深刻的工具，用於促進應用程序內的測試驅動開發，涵蓋廣泛的測試功能以及對不同測試方法的支持。為了充分了解賽普拉斯提供的所有功能，請深入研究其權威文檔，您將發現許多其他測試的可能性。