Java React 應用程式的端對端測試-java教程-PHP中文網

End-To-End Testing for Java React Applications

Java 和 React 應用程式的端到端 (E2E) 測試：完整指南

端到端（E2E）測試透過模擬後端（Java）和前端（React）的真實使用者工作流程來確保您的應用程式作為一個整體運行。本指南涵蓋了實施 E2E 測試的工具、設定和步驟。

1.選出正確的工具

對於 Java-React 堆疊中的 E2E 測試，請使用可以與後端和前端互動的工具：

前端測試工具:
- Cypress：用於前端測試的現代 E2E 測試工具。
- 劇作家或木偶師：無頭瀏覽器自動化。
- Selenium：適用於前端和後端的瀏覽器自動化。
後端測試工具:
- REST Assured：在 Java 中測試 REST API。
- JUnit：後端邏輯的 Java 測試框架。
整合工具：
- TestContainers：用於使用 Docker 容器進行測試。
- MockServer：在測試期間模擬 API。
- Allure：用於報告測試結果。

2.設定環境

後端（Java）：

確保 API 已測試：
- 使用 JUnit 進行單元和整合測試。
- 使用 REST Assured 進行 API 檢定。

範例（API 的 REST Assured 檢定）：

   import io.restassured.RestAssured;
   import org.junit.jupiter.api.Test;

   import static io.restassured.RestAssured.given;
   import static org.hamcrest.Matchers.equalTo;

   public class ApiTest {
       @Test
       public void testGetUser() {
           RestAssured.baseURI = "http://localhost:8080";
           given()
               .when()
               .get("/users/1")
               .then()
               .statusCode(200)
               .body("name", equalTo("John Doe"));
       }
   }

登入後複製

模擬外部相依性:
- 使用 MockServer 或 WireMock 來模擬外部 API。
容器化後端:
- 使用 Docker 為後端測試建立一致的環境。
- 範例 Dockerfile：
```
 FROM openjdk:11
 COPY target/myapp.jar /app/myapp.jar
 ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
```
登入後複製
登入後複製

前端（反應）：

安裝賽普拉斯：

   npm install cypress --save-dev

登入後複製

建立 Cypress 測驗:

範例：測試登入功能：

 describe('Login Page', () => {
   it('should log in successfully', () => {
     cy.visit('http://localhost:3000/login');
     cy.get('input[name="username"]').type('admin');
     cy.get('input[name="password"]').type('password123');
     cy.get('button[type="submit"]').click();
     cy.url().should('include', '/dashboard');
   });
 });

登入後複製

Cypress 中的類比 API:
- 使用 cy.intercept() 攔截後端 API 呼叫。

   cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });

登入後複製

3.寫 E2E 測驗

場景 1：使用者登入工作流程

後端檢定:

確保 /login API 傳回有效的令牌。
範例：

 given()
     .contentType("application/json")
     .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
     .when()
     .post("/login")
     .then()
     .statusCode(200)
     .body("token", notNullValue());

登入後複製

前端測試:
- 在登入頁面模擬使用者輸入並驗證重定向。

場景 2：建立並顯示項目

後端測試：
- 驗證 /createItem API 儲存資料並且 /items API 擷取資料。

   import io.restassured.RestAssured;
   import org.junit.jupiter.api.Test;

   import static io.restassured.RestAssured.given;
   import static org.hamcrest.Matchers.equalTo;

   public class ApiTest {
       @Test
       public void testGetUser() {
           RestAssured.baseURI = "http://localhost:8080";
           given()
               .when()
               .get("/users/1")
               .then()
               .statusCode(200)
               .body("name", equalTo("John Doe"));
       }
   }

登入後複製

前端測試：
- 驗證 UI 顯示已建立的項目。

 FROM openjdk:11
 COPY target/myapp.jar /app/myapp.jar
 ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]

登入後複製

4.將端到端測試與 CI/CD 整合

CI 中的後端檢定:
- 使用 JUnit 和測試資料庫：
```
   npm install cypress --save-dev
```
登入後複製
登入後複製

CI 中的前端測試:

運行賽普拉斯測試：

 describe('Login Page', () => {
   it('should log in successfully', () => {
     cy.visit('http://localhost:3000/login');
     cy.get('input[name="username"]').type('admin');
     cy.get('input[name="password"]').type('password123');
     cy.get('button[type="submit"]').click();
     cy.url().should('include', '/dashboard');
   });
 });

登入後複製

完全整合：
- 使用 Docker Compose 一起運行後端和前端：
```
   cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
```
登入後複製
登入後複製
CI 的 GitHub 操作:

 given()
     .contentType("application/json")
     .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
     .when()
     .post("/login")
     .then()
     .statusCode(200)
     .body("token", notNullValue());

登入後複製

5.報告

Allure for Java:

整合 Allure 以獲得詳細的測試報告：

   @Test
   public void testCreateAndRetrieveItem() {
       String itemJson = "{ \"name\": \"Test Item\" }";

       // Create Item
       given()
           .contentType("application/json")
           .body(itemJson)
           .post("/createItem")
           .then()
           .statusCode(201);

       // Retrieve Items
       given()
           .get("/items")
           .then()
           .statusCode(200)
           .body("[0].name", equalTo("Test Item"));
   }

登入後複製

賽普拉斯儀表板：

使用 Cypress 儀表板追蹤測試運行：

   describe('Item Management', () => {
     it('should display the newly created item', () => {
       cy.visit('http://localhost:3000/items');
       cy.get('button#create-item').click();
       cy.get('input[name="itemName"]').type('Test Item');
       cy.get('button#save-item').click();
       cy.contains('Test Item').should('exist');
     });
   });

登入後複製