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');
     });
   });

登录后复制