Detox: Công cụ kiểm thử E2E React Native siêu nhanh

Detox testing, Công cụ kiểm thử tự động Detox
Kieu Oanh

 Trong những năm gần đây, React Native đã trở thành một công nghệ rất phổ biến trong cuộc đua phát triển ứng dụng di động đa nền tảng nhưng việc lựa chọn một công cụ kiểm tra giao diện người dùng cho các ứng dụng React Native có thể khá khó khăn. Có hai công cụ kiểm tra giao diện người dùng tuyệt vời cho các ứng dụng React Native là Appium và Detox. Appium được sử dụng rộng rãi để kiểm tra giao diện người dùng nhưng Detox là một công cụ kiểm thử hộp xám, nhanh hơn và dễ học để kiểm tra giao diện người dùng của các ứng dụng React Native. Trong hướng dẫn này, chúng ta sẽ tìm hiểu về các thiết lập một số thử nghiệm Detox cho một ứng dụng React Native mới, đơn giản.

Detox: Kiểm tra giao diện di động End – to – End

Như bạn có thể biết, các vấn đề chính trong kiểm thử giao diện người dùng trên di động là độ chậm và tính không ổn định. Các công cụ như Appium hoàn toàn là hộp đen và sử dụng kiến trúc máy khách – máy chủ, điều này gây ra lỗi trong các bài kiểm tra giao diện người dùng. Detox được thiết kế để giải quyết các vấn đề về độ chậm và hoạt động không ổn định cho kiểm thử giao diện người dùng di động. Một số tính năng tuyệt vời của Detox là:

·       Detox giám sát các hoạt động không đồng bộ trong ứng dụng để giảm sự khó khăn khi tìm các phần tử không đồng bộ trong giao diện người dùng ứng dụng.
·       Detox là một công cụ kiểm tra hộp xám, nó có thể truy cập mã và dữ liệu từ các ứng dụng dành cho thiết bị di động. Đây là một công cụ không sử dụng kiến trúc máy chủ - máy khách để thực thi kiểm thử, vì vậy nó nhanh hơn Appium hoặc các công cụ kiểm thử di động của bên thứ ba khác.
·       Detox dễ dàng được kết nối với bất kỳ hệ thống CI nào và các dịch vụ kiểm tra đám mây phổ biến.
·       Detox có phản hồi nhanh về thử nghiệm E2E mà không cần kết nối với thiết bị thật.
·       Các nhà phát triển React Native rất thích Detox vì nó nhanh hơn, có thể gỡ lỗi và có thể được sử dụng với bất kỳ công cụ nào như Jest hoặc Mocha.

Detox hiện có hỗ trợ hạn chế cho thử nghiệm trên thiết bị iOS thực nhưng nếu ứng dụng của bạn không có giao diện phần cứng thì bạn có thể dễ dàng bỏ qua phần đó để thực hiện quá trình kiểm tra giao diện người dùng nhanh hơn và ít rung hơn.

Cài đặt Detox cho kiểm thử E2E

Quá trình thiết lập Detox cho ứng dụng React Native hiện có khá là đơn giản. Nếu bạn đang chạy ứng dụng React Native thì các yêu cầu cơ bản để chạy ứng dụng iOS và Android trong mô phỏng này phải được đáp ứng. Trong hướng dẫn này, tôi sẽ tập chung vào iOS nhưng thiết lập dành cho Android sẽ khá là đơn giản khi bạn bắt đầu sử dụng iOS. Điều kiện tiên quyết là bạn cần có macOS với Xcode được cài đặt trên đó. Bạn cũng cần cài đặt Node và Homebrew để tải xuống các gói cần thiết để chạy các ứng dụng React Native. Tóm lại, bạn sẽ cần những thứ sau:

·       macOS với Xcode
·       Homebrew
·       Node
·       React Native CLI và ứng dụng React Native

Trong hướng dẫn này, tôi sẽ tạo một ứng dụng React Native đơn giản với HelloDetox và bật hỗ trợ kiểm tra giao diện người dùng bằng Detox.

Tạo ứng dụng React Native

React Native có tài liệu tuyệt vời để bắt đầu với ứng dụng cơ bản. Tôi có thể dễ dàng tạo ra một ứng dụng mẫu bằng cách cài đặt một số phụ thuộc từ macOS. Chúng ta cần một gói node và watchman để bắt đầu với React Native. Bạn có thể dễ dàng cài đặt các gói đó với Homebrew.

$ brew install node
$ brew install watchman

Sau khi cài đặt xong node, bạn sẽ có thể truy cập các lệnh ‘npm’ từ terminal. Giờ đây, bạn có thể cài đặt React Native trên toàn cầu và tạo ứng dụng HelloDetox đầu tiên của mình.

$ npm install -g react-native-cli
$ react-native init HelloDetox

Tại thời điểm này, React Native sẽ tạo mã soạn sẵn để xây dựng cả ứng dụng Android và iOS. Bạn có thể chạy ứng dụng bên trong trình giả lập Android hoặc iOS nếu bạn mở bất kỳ trình mô phỏng nào.

Hãy chạy ứng dụng bên trong trình mô phỏng iOS bằng lệnh sau:

$ cd HelloDetox
$ react-native run-ios

Ngoài ra, bạn có thể khởi chạy Metro Bundler trong nền và chạy ứng dụng từ Xcode. Bây giờ chúng ta có thể chỉnh sửa tệp app.js để hiển thị nội dung trên màn hình. Trong hướng dẫn này, hãy tạo một vài nút bằng cách thêm mã này. Khi bạn tạo lại ứng dụng bằng CMD + R, bạn sẽ thấy ứng dụng trong trình mô phỏng. Ứng dụng này có một văn bản chào mừng với một vài nút liên kết đến màn hình khác. Bây giờ tôi có một ứng dụng React Native cơ bản đã sẵn sàng để kiểm thử giao diện người dùng.

Định cấu hình Detox

Các công cụ như Appium cho phép các nhà phát triển thử nghiệm tạo các kho lưu trữ riêng biệt cho code kiểm thử mà không phải lúc nào nó cũng phù hợp với những đường truyền CI/CD. Để kích hoạt hỗ trợ cho Detox, chúng ta phải cài đặt thư viện appleimutils và các công cụ cho Detox bằng các lệnh sau.

$ brew tap wix/brew
$ brew install applesimutils
$ npm install -g detox-cli

Detox đi kèm với các công cụ CLI tuyệt vời, nó có thể được sử dụng để thiết lập và thực hiện các bài kiểm tra giao diện người dùng từ dòng lệnh hoặc từ máy chủ CI.

Dự án React Native có tệp package.json nên tôi có thể thêm thư viện Detox vào dự án của mình bằng lệnh sau.

npm install detox --save-dev

Lệnh này sẽ mất một lúc để thêm Detox vào ứng dụng HelloDetox. Sau khi Detox được thêm vào tệp package.json, chúng ta cần định cấu hình ứng dụng HelloDetox của mình để sử dụng khung kiểm thử giao diện người dùng Detox.

"detox": {
  "configurations": {
    "ios.sim.debug": {
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/HelloDetox.app",
      "build": "xcodebuild -project ios/HelloDetox.xcodeproj -scheme HelloDetox -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
      "type": "ios.simulator",
      "name": "iPhone Xʀ"
    }
  }
}
Các tùy chọn trên dành riêng cho các bản dựng iOS, nó
thường được tạo trong các thư mục ios/build. Tham số ‘build’ là một lệnh được
chạy khi thực hiện “detox build” từ dòng lệnh. Đây là lệnh xcodebuild từ công cụ
dành cho các nhà phát triển của Apple, một số dự án iOS sử dụng không gian làm
việc nên có thể cần điều chỉnh lệnh cho phù hợp. Cuối cùng, bạn phải chỉ định
mô phỏng nào cần thiết để thực hiện kiểm thử.

Đó là cấu hình ban đầu để bật kiểm tra giao diện người dùng Detox trong các ứng dụng React Native.

Thêm kiểm thử Detox cho các ứng dụng React Native

Detox có thể được sử dụng với bất kỳ trình chạy kiểm thử nào trong JavaScript. Có Jest và Mocha chính thức được hỗ trợ bởi Detox nhưng Detox lại không kết hợp chặt chẽ với chúng. Vì Jest là trình chạy thử nghiệm được đề xuất cho React Native nên tôi sẽ sử dụng Jest để thiết lập các thử nghiệm Detox trong ứng dụng React Native của mình. Detox có một dòng lệnh để tạo code đoạn đầu. Chạy lệnh sau từ thư mục gốc của dự án.

$ detox init -r jest

Lệnh này sẽ ra một thư mục “e2e” với code thử nghiệm mẫu


Tại thời điểm này, bạn có thể sửa đổi các bài kiểm tra theo yêu cầu của ứng dụng. Hãy nhớ rằng, để kích hoạt kiểm tra ứng dụng React Native, bạn cần thêm ID kiểm tra cho từng phần tử giao diện người dùng trong ứng dụng của mình. Bạn có thể tham khảo tệp app.js, nơi tôi nhận được ID kiểm thử cho các phần tử giao diện người dùng mà tôi cần tương tác.

Viết kiểm thử Detox đầu tiên cho kiểm thử giao diện người dùng

Bây giờ chúng ta đã có tất cả code để thực hiện bài kiểm tra Detox đầu tiên, hãy đổi tên tệp e2e/firstTest.spec.jest với một tên khác, ví dụ: helloDetox.spec.jest và viết bài kiểm tra đầu tiên để xác thực rằng nếu nhấp vào nút hoạt động và điều hướng đến đúng màn hình.

Tài liệu chính thức của Detox có một hướng dẫn về việc chuẩn bị bài kiểm tra Detox tại đây. Tóm lại, chúng ta phải ghi nhớ những điều sau đây:

·       Chuẩn bị tệp JavaScript riêng cho các tình huống thử nghiệm đã chọn
·       Đảm bảo bạn đã thêm ID kiểm tra để kích hoạt kiểm tra của ứng dụng React Native
·       Xác định phần tử giao diện người dùng duy nhất trên màn hình và khẳng định phần tử đó có tồn tại trên màn hình
·       Reset ứng dụng giữa các tình huống nếu cần

Bạn có thể đọc hướng dẫn chuẩn bị đầy đủ tại đây. Trong trường hợp này, tôi phải thêm code sau để xác thực các yêu cầu của mình.

describe('HelloDetoxTest', () => {
  beforeEach(async () => {
     await device.reloadReactNative();
   });
  it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
  it('should show hello Rect after tap', async () => {
    await element(by.id('hello_react')).tap();
    await expect(element(by.text('React!!!'))).toBeVisible();
   });
  it('should show Detox screen after tap', async () => {
    await element(by.id('detox_button')).tap();
    await expect(element(by.text('Detox!!!'))).toBeVisible();
   });
});

Thử nghiệm này xác nhận việc chạm vào nút “Hello React” sẽ điều hướng đến màn hình “React !!!” và chạm vào “Hello Detox” sẽ điều hướng tới màn hình “Detox !!!”.

Ở giai đoạn này, tôi đã bắt đầu và sử dụng Detox đầu tiên. Để thực hiện các bài kiểm tra Detox, trước tiên chúng ta phải xây dựng một ứng dụng bằng lệnh.

$ detox build

Thao tác này sẽ thực thi lệnh xcodebuild mà tôi đã định cầu hình trong phần ‘build’ của cấu hình detox. Lệnh này có thể mất vài phút nếu bạn xây dụng ứng dụng trong lần đầu tiên. Khi ứng dụng được tạo thành công, chúng ta đã sẵn sàng thực hiện các kiểm thử của mình bằng cách sử dụng lệnh sau.

$ detox test

Lệnh này sẽ thực hiện tất cả các bài kiểm tra bên trong thư mục e2e của mình và nếu tất cả các bài kiểm tra đều pass, bạn sẽ thấy kết quả kiểm tra được định dạng độc đáo.


Xin chúc mừng!. Bạn đã thực hiện bài kiểm tra giao diện đầu tiên của mình bằng Detox.

Ưu và nhược điểm của Detox cho kiểm tra giao diện người dùng

Ưu điểm

·       Detox có khả năng gỡ lỗi cao hơn bất kỳ công cụ kiểm thử tự động hóa kiểm tra giao diện người dùng bên thứ ba nào khác.
·       Detox có thể được tích hợp dễ dàng trong bất kỳ ứng dụng React Native nào. Chi phí và nỗ lực ban đầu ít hơn nhiều so với bất kỳ công cụ nào khác.
·       Detox nhanh hơn Appium hoặc bất kỳ công cụ bên thứ ba nào khác vì nó đồng bộ hóa với ứng dụng.
·       Detox rất dễ học và có tài liệu API tuyệt vời để viết và mở rộng bộ thử nghiệm.
·       Cộng đồng đang phát triển nhanh chóng.

Nhược điểm

·       Hỗ trợ Android không tốt, nhưng nó đang được cải thiện.
·       Không có thử nghiệm thực tế cho iOS.
·       Chế độ xem web và ứng dụng kết hợp không được hỗ trợ.
·       Thiếu một số phương pháp hữu ích như lấy văn bản khỏi phần tử hoặc tìm tọa độ.
·       Khả năng báo cáo kiểm thử và ảnh chụp màn hình không tốt.

Bạn có thể thấy rằng Detox có ưu và nhược điểm nhưng nếu nó phù hợp với yêu cầu dự án của bạn thì Detox là một sự lựa chọn nhanh hơn và đáng tin cậy cho kiểm thử tự động giao diện người dùng.

Điều gì tiếp theo

Bây giờ tôi đã có và chạy kiểm thử Detox đầu tiên. Bước tiếp theo sẽ là thêm một vài kiểm thử giao diện người dùng khác của ứng dụng. Kiểm tra giao diện người dùng bao gồm kiểm tra từ đầu tới cuối có thể đem lại rất nhiều sự tự tin cho ứng dụng. Các kỹ thuật được sử dụng trong bài này có thể được sử dụng cho bất kỳ ứng dụng React Native nào khác. Detox có thể tăng tốc độ kiểm thử và sự tự tin cần thiết để triển khai bất kỳ ứng dụng React Native nào.

Tổng kết

Để cải thiện độ tin cậy và tốc độ kiểm thử, bạn cần phải giải quyết tình trạng rung và chậm trong kiểm thử giao diện người dùng. Các công cụ như Detox có thể đáp ứng tốc độ và độ tin cậy của các bài kiểm tra giao diện người dùng để thực hiện kiểm tra từ đầu tới cuối của các ứng dụng React Native.