Cách viết bài kiểm tra đầu cuối bằng Cypress trong ứng dụng React

Phát triển giao diện người dùng liên quan đến việc xây dựng các ứng dụng hướng tới khách hàng có chức năng, hấp dẫn trực quan. Nhưng có một nhược điểm; những ứng dụng này phải đảm bảo rằng người dùng có trải nghiệm liền mạch.

Để xác thực toàn diện hoạt động của một ứng dụng, bắt buộc phải tiến hành cả thử nghiệm đơn vị và thử nghiệm tích hợp, nhằm xác nhận các chức năng của nó. Tuy nhiên, những loại thử nghiệm này có thể không bao gồm đầy đủ tất cả các khía cạnh của trải nghiệm người dùng thông thường. Để tái tạo chính xác hành trình của người dùng, cần phải thực hiện các thử nghiệm toàn diện mô phỏng chính xác các tương tác thực tế của họ với hệ thống. Bằng cách đó, người ta có thể tin tưởng vào hiệu suất của ứng dụng trong mọi giai đoạn của quy trình.

Bắt đầu thử nghiệm toàn diện bằng Cypress

Một trong những mục tiêu chính của thử nghiệm end-to-end trong các ứng dụng front-end là đảm bảo đạt được kết quả mong muốn, thay vì xem xét kỹ lưỡng các chi tiết cụ thể về cách thức hoạt động của logic nghiệp vụ cơ bản.

Hãy xem xét một hình thức đăng nhập như một trường hợp điển hình. Tốt nhất, người ta nên đánh giá xem màn hình đăng nhập có xuất hiện chính xác và thực hiện chức năng dự định hay không mà không quan tâm đến các thông số kỹ thuật phức tạp. Cuối cùng, mục tiêu nằm ở việc thừa nhận quan điểm của người dùng và kiểm tra trải nghiệm toàn diện của họ.

Cypress là một khung thử nghiệm tự động hóa tuyệt vời tương thích với một số khung JavaScript phổ biến nhất. Khả năng chạy thử nghiệm trực tiếp trong trình duyệt và bộ tính năng thử nghiệm toàn diện giúp việc thử nghiệm trở nên liền mạch và hiệu quả. Nó cũng hỗ trợ các phương pháp thử nghiệm khác nhau bao gồm:

⭐Bài kiểm tra đơn vị

⭐Thử nghiệm toàn diện

⭐Thử nghiệm tích hợp

Để phát triển các trường hợp thử nghiệm toàn diện bao gồm tất cả các khía cạnh chức năng của ứng dụng React, điều cần thiết là phải đánh giá hành vi của nó từ góc độ người dùng cuối bằng cách xem xét các câu chuyện sau:

Một cá nhân có thể nhận biết trường nhập văn bản kèm theo nút gửi.

Một cá nhân có thể nhập một câu hỏi hoặc cụm từ vào một khoảng trống được chỉ định cho mục đích này, được gọi là “trường nhập liệu”.

Khi nhấp vào nút “gửi”, dự kiến ​​màn hình hiển thị các mục được liệt kê sẽ xuất hiện ngay bên dưới trường nhập tương ứng.

Bằng cách theo dõi những câu chuyện của người dùng này, bạn có thể xây dựng một ứng dụng React đơn giản cho phép người dùng tìm kiếm sản phẩm. Ứng dụng sẽ tìm nạp dữ liệu sản phẩm từ API DummyJSON và hiển thị dữ liệu đó trên trang.

Mã nguồn của dự án này được lưu trữ trên tài khoản GitHub của nhà phát triển, có thể được truy cập bằng cách truy cập kho lưu trữ được liên kết.

Thiết lập dự án React

Để bắt đầu quá trình, bạn có thể thiết lập dự án React bằng Vite hoặc sử dụng lệnh “create-react-app” để thiết lập ứng dụng React cơ bản. Sau khi hoàn thành giai đoạn thiết lập, hãy tiến hành tải xuống thư viện Cypress dưới dạng tài nguyên phụ thuộc vào quá trình phát triển trong khuôn khổ dự án của bạn.

 npm install cypress --save-dev 

Thật vậy, điều cần thiết là phải sửa lại tệp pack.json bằng cách kết hợp tập lệnh nói trên vào trong giới hạn của nó.

 "test": "npx cypress open" 

Tạo một thành phần chức năng

Trong thư mục nguồn, thiết lập một thư mục con và gán cho nó nhãn “thành phần”. Trong khu vực được chia ngăn này, hãy bắt đầu quá trình tạo một tài liệu văn bản mới có tên là “products.jsx” và kết hợp mã được cung cấp trong nội dung của nó.

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

Trong kịch bản nhất định, điều cần thiết là phải triển khai hook useEffect trong thành phần chức năng. Hook này sẽ chịu trách nhiệm thực hiện một thao tác không đồng bộ để lấy dữ liệu sản phẩm theo truy vấn tìm kiếm của người dùng.

  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]); 

Cập nhật tệp App.jsx

Cập nhật tệp App.js bằng cách kết hợp đoạn mã được cung cấp bên dưới:javascriptimport React from’react’;import { BrowserRouter as Router, Route, Switch } from’react-router-dom’;import loginPage from’./LoginPage/Trang đăng nhập’;//nhập thành phần trang đăng nhập của bạn vào đâynhập Trang chủ từ ‘./HomePage/HomePage’;//nhập thành phần trang chủ của bạn vào đây nhập ServiceListPage từ ‘./ServiceListPage/ServiceListPage’;//nhập thành phần trang danh sách dịch vụ của bạn vào đây nhập CreateAccountForm từ ‘./CreateAccountForm/CreateAccountForm’;//nhập thành phần biểu mẫu tạo tài khoản của bạn tại đâyimport { useHistory } từ’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 

Hãy tiếp tục và khởi động máy chủ phát triển.

 npm run dev 

Thật vậy, giờ đây bạn có khả năng truy xuất thông tin cụ thể từ API JSON mô phỏng một cách dễ dàng.

Thiết lập môi trường thử nghiệm

Vui lòng thực thi tập lệnh kiểm tra bằng lệnh đầu cuối trong trường hợp đầu tiên:

 npm run test 

Vui lòng thực hiện hành động được chỉ định để khởi chạy khung thử nghiệm Cypress. Vui lòng tiếp tục bằng cách nhấp vào nút “Thử nghiệm E2E” nằm bên dưới.

Vui lòng tiếp tục bằng cách nhấp vào “Tiếp tục” để kết hợp các tệp cấu hình Cypress.

Sau khi hoàn tất quy trình này, người ta phải quan sát sự xuất hiện của một thư mục kiểm tra Cypress mới trong dự án của họ. Hơn nữa, ứng dụng khách của Cypress sẽ tự động thêm tài liệu cypress.config.js. Người dùng có đặc quyền sửa đổi bản ghi này để điều chỉnh một loạt các sắc thái liên quan đến môi trường thử nghiệm, cách ứng xử và cấu hình.

Viết bài kiểm tra đầu cuối bằng Cypress

Để thực hiện bài kiểm tra ban đầu của bạn, bạn cần phải chọn trình duyệt web sẽ tổ chức bài kiểm tra. Từ hàng loạt tùy chọn được cung cấp trong giao diện Cypress, vui lòng chọn phiên bản phù hợp với sở thích của bạn.

Cypress sẽ bắt đầu quá trình lặp lại hợp lý của trình duyệt web đã chọn, thiết lập môi trường thử nghiệm được phối hợp cho mục đích đánh giá.

Để tạo tệp thử nghiệm mới, vui lòng chọn tùy chọn “Tạo thông số kỹ thuật mới” từ các lựa chọn có sẵn.

Vui lòng điều hướng đến trình chỉnh sửa mã ưa thích của bạn, truy cập tệp “cypress/e2e/App.spec.cy.js” và thực hiện các sửa đổi cần thiết đối với nội dung của nó bằng cách kết hợp mã được cung cấp.

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

Khung thử nghiệm hiện tại xác thực nhiều khía cạnh của các tường thuật của người dùng nói trên bằng cách đảm bảo rằng hệ thống hoạt động như dự định trong các tình huống khác nhau đồng thời kết hợp các tiêu chí đầu vào được nêu trong từng cốt truyện riêng lẻ.

Giao diện người dùng của ứng dụng web phải bao gồm trường nhập và nút gửi, được trình duyệt hiển thị trên trang web.

Người dùng có khả năng nhập yêu cầu tìm kiếm thông qua hộp văn bản hoặc chức năng ra lệnh bằng giọng nói được cung cấp, cho phép họ xác định thông tin mong muốn một cách dễ dàng và hiệu quả.

Cypress tương tự như các khung thử nghiệm JavaScript phổ biến khác như Jest và Supertest ở chỗ nó sử dụng cách tiếp cận khai báo và ngôn ngữ cụ thể để tạo các kịch bản thử nghiệm.

Để thực hiện kiểm tra, hãy điều hướng trở lại môi trường trình duyệt được sắp xếp hợp lý do Cypress giám sát và chọn tập lệnh kiểm tra cụ thể mà bạn muốn thực hiện.

Cypress được thiết kế để thực hiện các bài kiểm tra và trình bày kết quả của chúng trong bảng giao diện bên trái của khu vực kiểm tra, cung cấp cho người dùng một phương tiện thuận tiện để theo dõi tiến trình kiểm tra.

Mô phỏng quy trình ứng dụng

Để xác thực trải nghiệm người dùng hoàn chỉnh trong trường hợp cụ thể này, điều quan trọng là phải xác nhận rằng ứng dụng có khả năng chấp nhận dữ liệu nhập của người dùng, truy xuất thông tin cần thiết và cuối cùng hiển thị thông tin nói trên trong giao diện trình duyệt.

Để đảm bảo tính minh bạch, có thể thiết lập một tệp thử nghiệm riêng bao gồm một bộ thử nghiệm thay thế trong thư mục đầu cuối. Ngoài ra, còn có một tùy chọn khác trong đó nhiều trường hợp kiểm thử kiểm tra một kịch bản cụ thể được hợp nhất trong một tệp kiểm thử duy nhất.

Vui lòng tạo tệp Products.spec.cy.js mới trong thư mục e2e bằng cách sử dụng đoạn mã được cung cấp.

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

  }); 

Tập hợp các thử nghiệm hiện tại xác nhận rằng, khi người dùng nhập một truy vấn cụ thể, ứng dụng sẽ truy xuất và hiển thị thông tin thích hợp trong giao diện trình duyệt web.

Công cụ mô phỏng quá trình tìm kiếm sản phẩm trên trang web thương mại điện tử bằng cách gửi truy vấn tìm kiếm và kiểm tra xem trang kết quả có chứa thông tin liên quan như tiêu đề mặt hàng và giá cả hay không. Điều này cho phép đánh giá toàn bộ trải nghiệm duyệt web của người dùng theo quan điểm của họ.

Mô phỏng lỗi và phản hồi

Bạn có khả năng tạo lại một loạt các tình huống lỗi và phản ứng tương ứng trong các trường hợp kiểm thử Cypress của mình, giúp bạn linh hoạt hơn khi kiểm tra các vấn đề tiềm ẩn.

Vui lòng tạo một tệp JavaScript mới có tên “Error.spec.cy.js” trong thư mục “e2e” và kết hợp đoạn mã sau:

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

Việc triển khai bộ thử nghiệm này hiện tại tập trung vào việc đảm bảo rằng thông báo lỗi rõ ràng được tạo ra bất cứ khi nào người dùng nhập truy vấn tìm kiếm không hợp lệ, nhằm thông báo kịp thời cho họ về vấn đề và tạo điều kiện cho hành động khắc phục thích hợp.

Để trường hợp thử nghiệm được coi là thành công, nó tận dụng chức năng chặn của Cypress để bắt chước các lỗi mạng bằng cách mô phỏng kết nối mạng bị lỗi. Sau đó, khi một truy vấn tìm kiếm không hợp lệ được nhập vào trường đầu vào được chỉ định và quá trình truy xuất dữ liệu được bắt đầu, quá trình kiểm tra sẽ xác minh rằng thông báo lỗi hiển thị “Không tìm thấy sản phẩm” xuất hiện nổi bật trên trang web.

Kết quả hiện tại cho thấy hệ thống quản lý lỗi đang hoạt động phù hợp với thiết kế dự định của nó.

Sử dụng Cypress trong quá trình phát triển dựa trên thử nghiệm

Kiểm thử là một khía cạnh thiết yếu của phát triển phần mềm đòi hỏi sự chú ý đáng kể để đảm bảo chất lượng và độ tin cậy của sản phẩm. Mặc dù thử nghiệm có thể tiêu tốn thời gian và nguồn lực đáng kể, nhưng việc sử dụng các công cụ như Cypress có thể mang lại cảm giác thỏa mãn bằng cách hợp lý hóa quy trình thử nghiệm và tạo điều kiện thực hiện hiệu quả các trường hợp thử nghiệm.

Cypress cung cấp một loạt công cụ ấn tượng để tạo điều kiện thuận lợi cho việc phát triển dựa trên thử nghiệm trong các ứng dụng, bao gồm cả nhiều chức năng thử nghiệm cũng như hỗ trợ các phương pháp thử nghiệm đa dạng. Để đánh giá đầy đủ tất cả những gì Cypress cung cấp, hãy nghiên cứu kỹ tài liệu có thẩm quyền của nó, nơi bạn sẽ khám phá ra nhiều khả năng thử nghiệm bổ sung.