End to End (E2E) testing cho mobile:
End to End testing là một kỷ thuật được sử dụng để kiểm tra ứng dụng chạy có đúng theo yêu cầu hay không.Thường thì khi hoàn thành một giao diện và chức năng cho giao diện đó thì ta app dụng E2E testing để kiểm tra xem chức năng đó có chạy đúng yêu cầu không.
Ví dụ: như trang login chúng ta sẽ kiểm tra xem
- Trang login có hiển thị ra trên màn hình điện thoại hay không?
- Các components trên trang login có xuất hiện theo đúng yêu cầu hay không?
- Khi nhập vào sai username, password thì trang login có hiển thị ra thông báo password or username sai hay không?
- Khi nhập đúng username và password thì trang login có forward tới trang khác đúng theo yêu cầu hay không?
Phương pháp này sẽ được áp dụng từ lúc bắt đầu ứng dụng cho đến khi thoát ứng dụng. Vì thế sẽ có rất nhiều test case nên công việc của QA (Quality Assurance) sẽ tăng rất nhanh nếu sử dụng sức người.
Ví dụ một trường hơp như sau. Nếu bộ phận dev code theo tiến độ một tuần cho ra 2 features hoặc sữa lỗi bugs. Thì mỗi tuần QA sẽ có thêm hai bộ test case cho feature mới hoặc test bug đã sữa. Có nghĩa là 1 tuần có 2 tests, sau 7 tuần thì sẽ gấp 7 lần như vậy. Với mức độ test case phát sinh ra như thế, để đảm bảo chất lượng thì công ty phải thuê thêm QA, như thế thì sẽ phát sinh ra chi phí. Hoặc ngược lại thì bắt buộc sẽ phải bỏ bớt các test case ra. Điều này thật sự là một bài toán rất khó cho các công ty phát triển phần mềm.
Kiểm thử tự động sẽ là phương pháp tuyệt vời để giải bài toán trong ví dụ trên.
Giải pháp là ta sẽ dùng các ứng dụng hoặc framework để chạy test sản phẩm của ta một cách tự động. Giống như một con robot sử dụng app của ta theo kịch bản đã được định sẳn.
Có nhiều phần mềm, framework để Kiểm thử tự động react native trên tất cả các platform, web, iOS, Android…
Riêng trong bài viết này tôi sẽ hướng dẫn bạn cách cài đặt và sử dụng Detox. Nó là một framework miễn phí do Wix phát triển. Framework này là giải pháp do họ tự phát triển sau những khó khăn khi sử dụng các phần mềm, framework React Native automation test khác. Bạn có thể tham khảo chia sẽ của họ tại đây.
Sử dụng Detox framework trên iOS
Để sử dụng được framework trên iOS, bạn cần phải có những điều kiện sau:
- Máy MAC với hệ điều hành tối thiểu macOS El Capitan 10.11
- Xcode 8.3 trở lên và có cài Xcode command line tools (mặc đinh khi cài Xcode sẽ có. Để kiểm tra xem có Xcode command line tools bạn vào terminal gõ lệnh “gcc –v” nếu có popup hiện lên tức là không có cài đặt)
- App React Native mà bạn muốn test
Các bước cài đặt các gói thư viện (dependencies)
Bước 1:
- Cài đặt Homebrew bản mới nhất. http://brew.sh/. Homebrew quản lý các package trên macOS
- Có thể kiểm tra bạn đã cài hay chưa bằng câu lệnh “brew –h” để liệt kê danh sách các câu lệnh
- App React Native mà bạn muốn test
Bước 2:
- Cài Node.js. Lưu ý Detox chỉ chạy trên Node phiên bản 7.6.0 trở lên
- brew update && brew install node
- Kiểm tra version bằng lệnh: node -v
Bước 3:
- appleSimUtils là tool mà Detox dùng để kết nối với simulator
- brew tap wix/brew
- brew install --HEAD applesimutils
- Gõ lệnh applesimutils Nếu hiển thị trang giúp đỡ nghĩa là cài đặt thành công
Bước 4:
- Cài Detox command line tool (detox-cli)
- npm install -g detox-cli
- Lệnh detox –h để kiểm tra đặt thành công
Tải project demo
Để demo tôi đã tạo ra project react native có sẵn. bạn có thể download theo link:
Để chạy app bạn cần gõ
Npm install - Để download các thư viện cần sử dụng về.
Npm run ios – Để chạy app trên simulator ios
Khi nhập đúng “M001” thì có thể vào screen bên trong. Nếu nhập sai thì app sẽ thông báo lỗi
Thêm Detox vào project
- Npm install detox –save-dev
- Npm install mocha –save-dev
- Thêm đoạn config code của detox vào file package.json
ở keyword “binaryPath”: example.app sẽ thay đổi thành .app. ở ví dụ này la AwesomeReact.app
Ở keyword “build”: là câu lệnh để build app. Thay example thành tên project. AwesomeReact
Tạo Test files
Dùng lệnh detox init để tạo test file. Các file được lưu trong thư mục e2e và được config sẵn các mặc định nên chúng ta chỉ việc viết test case trong file firstTest.spec.js là đủ dùng. Bạn có thể đọc tài liệu để biết thêm tại đây.
Viết test cho trang login
Kịch bản test của chúng ta rất đơn giản sẽ là:
- kiểm tra xem logo của trang login có được load lên hay không
- Trang login có hiển thông báo “wrong UserID” nếu nhập vào M002 (login fail)
- Trang login có hiển thi trang home nếu nhập vào M001 (login success)
Hầu hết các test case bắt đầu bằng việc tìm các thành phần UI trên trang cần phải test và thực hiện các thao tác nhấn vào, vuốt tới vuốt lui, nhập giá trị, so sánh giá trị... React Native cung cấp cho ta một thuộc tính (prop) đó là testID để xác định các thành phần cần test. Điều này có nghĩa là ta phải thêm thuộc tính testID=’abc’ vào code của component muốn test.
Sau cùng mở file firstTest.spec.js và viết test case
Build và test project với detox test tự động react native
