Kiểm tra các tính năng gốc trong ứng dụng Flutter bằng Patrol và Codemagic

"Vô ích! Tôi không thể chạy thử nghiệm toàn diện bằng các thử nghiệm tích hợp của Flutter", một trong những khách hàng của chúng tôi đã thốt lên khoảng 9 tháng trước. Tôi đã hỏi vấn đề là gì và họ giải thích rằng họ đang sử dụng Google Authentication để đăng nhập và sử dụng gói google_sign_in nhưng không thể sử dụng các thử nghiệm tích hợp của Flutter để tương tác với màn hình đăng nhập. Tôi vẫn chưa hiểu rõ vấn đề là gì và sau đó nó nhấp vào: plugin này sử dụng các thành phần giao diện người dùng gốc mà các thử nghiệm tích hợp không hoạt động.

Tôi khá thất vọng vì không thể đưa ra giải pháp vào thời điểm đó và phải để nó ở đó. Tuy nhiên, chuyển nhanh đến ngày hôm nay và một giải pháp mới tuyệt vời đã được giới thiệu với tên gọi "Tuần tra" bởi LeanCode . Tôi sẽ kể cho bạn nghe tất cả về điều đó, nhưng trước khi đi sâu vào phần này, hãy tóm tắt lại lý do tại sao việc chạy thử nghiệm lại quan trọng, những công cụ nào bạn có sẵn cho đến thời điểm hiện tại và sau đó nói về cách bắt đầu với Patrol.

Tại sao vẫn phải thử nghiệm ứng dụng Flutter?

Một trong những lý do chính khiến nhóm phát triển sử dụng các dịch vụ Tích hợp liên tục (CI) như Mật mã là nhận được phản hồi ngay lập tức về mã mà họ đang cam kết với kho lưu trữ của mình. Các thử nghiệm có thể được chạy tự động như một phần trong quy trình của bạn để đảm bảo mức độ cả về chất lượng và độ ổn định vì các lỗi hoặc sự cố có thể được phát hiện sớm và khắc phục ngay lập tức. Chúng tôi luôn khuyến khích khách hàng thực hiện kiểm thử khi thiết lập quy trình làm việc của mình nhưng không hiếm khi nghe câu “Chúng tôi không có thời gian để viết kiểm thử”. Hy vọng rằng bạn không ở trong tình trạng đó và hãy sử dụng thử nghiệm như một phần của chu trình phát triển ứng dụng của mình để cung cấp các ứng dụng có chất lượng tuyệt vời và không có lỗi!

Các cách tự động chính để kiểm tra ứng dụng Flutter là gì?

Có bốn phương pháp kiểm tra chính có thể được tự động hóa như một phần trong quy trình CI của bạn. Thử nghiệm bản thân nó là một chủ đề, vì vậy tôi sẽ nói ngắn gọn nhưng việc sử dụng kết hợp các phương pháp thử nghiệm này sẽ giúp bạn cải thiện chất lượng ứng dụng của mình và phát hiện vấn đề sớm hơn.

Đầu tiên, có "Kiểm tra đơn vị" thường được sử dụng để kiểm tra các chức năng và phương pháp của bạn một cách riêng biệt nhằm đảm bảo chúng hoạt động như mong đợi. Kiểm thử đơn vị cũng có thể được viết để đảm bảo logic nghiệp vụ của bạn hoạt động trong các tình huống khác nhau mà không có bất kỳ kết quả không mong muốn nào.

Tiếp theo, chúng tôi có "Thử nghiệm tiện ích" Flutter cho phép bạn kiểm tra các thành phần giao diện người dùng của mình và đảm bảo chúng hiển thị chính xác và hoạt động như bạn mong đợi.

Sau đó là "Thử nghiệm tích hợp" là nơi bạn kiểm tra xem các đơn vị và thành phần trong ứng dụng của bạn có hoạt động cùng nhau như mong đợi hay không.

Cuối cùng, có phần "Thử nghiệm giao diện người dùng từ đầu đến cuối" trong đó bạn kiểm tra ứng dụng như thể nó đang được người dùng thực sự sử dụng. Trong quy trình làm việc CI, việc này thường được tự động hóa bằng cách sử dụng trình mô phỏng hoặc trình mô phỏng để kiểm tra các lộ trình khác nhau thông qua ứng dụng của bạn nhằm đảm bảo không có bất kỳ vấn đề nào sau khi bạn thực hiện thay đổi đối với mã của mình.

Đây là lúc khách hàng mà tôi đang nói đến lúc đầu gặp khó khăn vì họ không thể chạy thử nghiệm giao diện người dùng đầu cuối vì không thể đăng nhập vào ứng dụng. Vào thời điểm đó, họ đã thử nghiệm phiên bản 'dev' bỏ qua phần đăng nhập.

Tuy nhiên, điều đó không còn cần thiết nữa khi "Tuần tra" đã có sẵn!

Vào, rẽ trái, Tuần tra!

Vậy trước hết, Tuần tra là gì? Chà, tôi nghĩ các tài liệu nói điều đó hay nhất:

Patrol là một khung thử nghiệm giao diện người dùng nguồn mở và mới dành cho Flutter được phát triển bởi LeanCode. Nó được xây dựng dựa trên công cụ kiểm tra hiện có của Flutter để cho phép bạn làm những việc mà trước đây không thể thực hiện được. Patrol cho phép bạn truy cập các tính năng gốc của nền tảng mà ứng dụng Flutter đang chạy.

Phần quan trọng nhất ở đây là nó cho phép bạn truy cập các tính năng gốc của nền tảng mà ứng dụng Flutter của bạn đang chạy.

Điều này có nghĩa là bây giờ bạn có thể thực hiện những việc như:

1. Tương tác với hộp thoại Yêu cầu cấp phép để loại bỏ hoặc chấp nhận yêu cầu.
2. Tương tác với WebViews.
3. Thu nhỏ và tối đa hóa ứng dụng của bạn.
4. Tương tác với các luồng xác thực như xác thực của Google hoặc Apple.
5. Tương tác với các tính năng gốc khác như mở khay Thông báo, nhấn nút Home, bật hoặc tắt kết nối Wi-Fi hoặc chuyển thiết bị sang chế độ tối, v.v.

Được rồi, điều này nghe có vẻ tuyệt vời, nhưng điều thú vị là gì?

Vâng, không có một! Và hơn thế nữa, nó không chỉ miễn phí mà còn mã nguồn mở !

Hơn nữa, Patrol cũng giới thiệu 'công cụ tìm tùy chỉnh' cung cấp cho bạn cú pháp ngắn gọn hơn để viết bài kiểm tra của mình. Bạn có thể đọc thêm về họ đây .

Cài đặt và thiết lập tuần tra

Để bắt đầu với Patrol, bạn sẽ cần cài đặt CLI, thêm phần phụ thuộc Patrol vào pubspec.yaml và thiết lập một số cấu hình trong các dự án iOS và Android của bạn.

LeanCode đã tạo ra một số tài liệu tuyệt vời đây sẽ đưa bạn qua quy trình cho từng nền tảng mà bạn có thể tìm thấy ở đây. Hướng dẫn từng bước của họ sẽ hướng dẫn bạn cách thiết lập cho cả iOS và Android .

Nếu bạn gặp bất kỳ vấn đề nào, nơi tốt nhất để nhận trợ giúp là ở máy chủ Patrol Community Discord mà bạn có thể tham gia đây .

Nếu bạn tìm thấy bất kỳ lỗi nào, thì bạn có thể nêu vấn đề đây .

Cài đặt và thiết lập tuần tra

Để bắt đầu với Patrol, bạn sẽ cần cài đặt CLI, thêm phần phụ thuộc Patrol vào pubspec.yaml và thiết lập một số cấu hình trong các dự án iOS và Android của bạn.

LeanCode đã tạo ra một số tài liệu tuyệt vời đây sẽ đưa bạn qua quy trình cho từng nền tảng mà bạn có thể tìm thấy ở đây. Hướng dẫn từng bước của họ sẽ hướng dẫn bạn cách thiết lập cho cả iOS và Android .

Nếu bạn gặp bất kỳ vấn đề nào, nơi tốt nhất để nhận trợ giúp là ở máy chủ Patrol Community Discord mà bạn có thể tham gia đây .

Nếu bạn tìm thấy bất kỳ lỗi nào, thì bạn có thể nêu vấn đề đây .

Viết bài kiểm tra tính năng gốc bằng Patrol

Bây giờ bạn đã thiết lập xong, hãy bắt đầu thử nghiệm một số tính năng gốc. Để tự mình thử, tôi đã thiết lập một ứng dụng Flutter đơn giản với một nút nâng cao mà khi nhấp vào sẽ mở ra hộp thoại cảnh báo gốc .

Nhấp vào "OK" hoặc "Hủy" chỉ cần loại bỏ hộp thoại.

Một lần nữa, tôi khuyên bạn nên sử dụng tài liệu riêng của Patrol mà bạn có thể tìm thấy đây để thêm tệp thử nghiệm đầu tiên của bạn.

Vì vậy, trong thử nghiệm của mình, tôi muốn nhấp vào nút nâng cao có dòng chữ "Nhấp vào tôi!". Đây là một tiện ích Flutter tiêu chuẩn để có thể khai thác nó bằng công cụ tìm kiếm Tuần tra sau:

 await $('Click me!').tap();

Sau đó, hộp thoại gốc sẽ được hiển thị để bây giờ chúng ta có thể bắt đầu tương tác với thành phần giao diện người dùng gốc. Vì vậy, hãy thêm công cụ tìm gốc sẽ cho phép chúng tôi nhấn vào nút "OK":

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK'));

Điều đó thật dễ dàng! Tôi cũng muốn thử nút "Hủy", vì vậy hãy nhấn vào nút "Nhấp vào tôi!" một lần nữa rồi nhấn vào nút "Hủy" của hộp thoại gốc bằng cách thêm một vài dòng như sau:

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel'));

Tệp thử nghiệm đã hoàn thành của bạn sẽ trông như thế này:

 import 'package:cmpatrol/main.dart'; import 'package:patrol/patrol.dart'; void main() { patrolTest( 'Native tests', nativeAutomation: true, ($) async { await $.pumpWidgetAndSettle(const MyApp()); await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'NO')); }, ); }

Bây giờ bạn có thể chạy thử nghiệm đó trên trình mô phỏng hoặc thiết bị thực bằng cách sử dụng lệnh để khởi chạy thử nghiệm. Tệp kiểm tra tích hợp của tôi có tên là "button_test" nên tôi đã bắt đầu kiểm tra từ Terminal như sau:

 patrol test -t integration_test/button_test.dart

Bạn sẽ xem thử nghiệm của mình đạt hay không trực tiếp trong Terminal. Nếu kiểm tra thất bại, bạn sẽ nhận được liên kết đến báo cáo kiểm tra đầy đủ. Ngoài ra, nếu bạn đang chạy thử nghiệm trên Android như tôi đã làm thì bạn có thể truy cập báo cáo bằng cách nhấp vào index.html trong thư mục sau:

 ./build/app/reports/androidTest/connected 

Bạn có thể thử nghiệm thêm với các tính năng gốc khác như mở khay thông báo, tắt wifi, bật chế độ tối, thu nhỏ và phóng to ứng dụng:

 // minimize app await $.native.pressHome(); await $.native.openNotifications(); await $.native.disableWifi(); await $.native.enableDarkMode(); // maximize app await $.native.openApp();

⚠️ Lưu ý rằng bạn không thể đóng hoàn toàn ứng dụng của mình rồi mở lại vì làm như vậy sẽ kết thúc toàn bộ quá trình kiểm tra và do đó khiến ứng dụng thất bại.

Tham khảo ý kiến của đội tuần tra tài liệu để biết thêm ví dụ.

Sử dụng Patrol trong quy trình làm việc Codemagic của bạn

Để kết hợp Patrol vào quy trình làm việc của bạn, trước tiên bạn sẽ phải cài đặt Patrol CLI trên máy dựng. Việc này chỉ mất vài giây và sau khi hoàn tất, bạn có thể chạy tập lệnh thử nghiệm của mình. Dưới đây là ví dụ về cách bạn thêm các bước này vào phần "scripts" của tệp cấu hình codemagic.yaml . Tôi khuyên bạn nên chạy tập lệnh để cài đặt Patrol CLI như một trong những bước đầu tiên của tập lệnh và sau đó bạn có thể chạy các bài kiểm tra Tuần tra của mình ngay sau đó hoặc sau bất kỳ bài kiểm tra nào khác mà bạn cũng có thể muốn chạy trước.

Trước khi chạy thử nghiệm Tuần tra, bạn cần khởi động trình mô phỏng để chúng tôi thêm một tập lệnh để khởi chạy trình mô phỏng và đợi cho đến khi nó được khởi động hoàn toàn. Lưu ý rằng trình giả lập Android không khả dụng trên các máy sử dụng máy Apple Silicon M1 hoặc M2 do Khung ảo hóa Apple không hỗ trợ ảo hóa lồng nhau. Do đó, tôi khuyên bạn nên sử dụng phiên bản linux khi thử nghiệm ứng dụng Android.

Phần tập lệnh của codemagic.yaml của bạn sẽ trông giống như thế này:

 scripts: ... - name: Install Patrol CLI script: dart pub global activate patrol_cli - name: Launch Android emulator script: | cd $ANDROID_HOME/tools emulator -avd emulator & adb wait-for-device - name: Run tests with Patrol script: patrol test -t integration_test/your_test.dart ignore_failure: true ...

Hiển thị kết quả kiểm tra Tuần tra trong nhật ký xây dựng Codemagic

Kết quả kiểm tra Patrol cũng có sẵn ở định dạng JUnit XML , có nghĩa là chúng có thể được hiển thị trong nhật ký bản dựng trên màn hình tổng quan về bản dựng Codemagic. Bạn chỉ cần thêm thuộc tính test_report vào đường dẫn đến tệp XML JUnit được tạo. Bạn có thể sử dụng thuộc tính ign_failure với boolean để kiểm soát xem bạn có muốn phần còn lại của quy trình làm việc tiếp tục chạy hay không. Nếu bạn muốn tải kết quả của mình lên hệ thống quản lý bài kiểm tra như được mô tả trong phần tiếp theo, bạn nên đặt giá trị này thành true .

Đây là ví dụ về kịch bản của bạn sẽ trông như thế nào:

 scripts: ... - name: Run tests with Patrol script: | patrol test -t integration_test/your_test.dart test_report: build/app/outputs/androidTest-results/connected/*.xml ignore_failure: true ...

Một thử nghiệm thất bại có thể trông giống như thế này:

Thu thập báo cáo kiểm tra tuần tra dưới dạng tạo phẩm xây dựng

Một điều nữa mà bạn có thể muốn làm là thu thập đầu ra của báo cáo thử nghiệm dưới dạng một tạo phẩm xây dựng để bạn có thể xem báo cáo đầy đủ nếu có bất kỳ lỗi nào xảy ra. Việc thực hiện này sẽ giúp báo cáo có sẵn để tải xuống dưới dạng tệp zip trên màn hình tổng quan về bản dựng trong phần "Cấu tạo" ở phía bên trái. Cách dễ nhất để thực hiện việc này là sao chép thư mục chứa các tệp báo cáo vào thư mục mà Codemagic sử dụng để xuất các tạo phẩm. Có một biến môi trường tích hợp có tên $CM_EXPORT_DIR tham chiếu thư mục này mà bạn có thể sử dụng trong tập lệnh của mình.

Kịch bản để làm điều này sẽ như thế này:

 scripts: ... - name: Export Patrol test report script: | cp -r build/app/reports/androidTests/connected $CM_EXPORT_DIR/report ...

Phần kết luận

Patrol cuối cùng đã khắc phục được vấn đề chạy thử nghiệm giao diện người dùng và tích hợp liên quan đến các tính năng gốc. Giờ đây, bạn có thể kiểm tra các tính năng gốc và tương tác với các luồng xác thực, hộp thoại gốc và thậm chí chuyển đổi các tính năng gốc như wifi, di động, chế độ tối và thậm chí thu nhỏ và tối đa hóa ứng dụng của bạn. Ngoài ra, nó vừa là nguồn mở vừa miễn phí , đồng thời cung cấp giải pháp cho một vấn đề thực sự tồn tại kể từ khi Flutter được ra mắt. Hơn nữa, việc thêm và sử dụng nó trong quy trình làm việc Codemagic của bạn thật đơn giản. Nếu bạn muốn ủng hộ công việc tuyệt vời mà LeanCode đang làm, hãy like cho Patrol trên pub.dev đây và tặng cho kho lưu trữ GitHub của đội tuần tra một ngôi sao đây .

Bài viết này được viết bởi Kevin Suhajda, Trưởng phòng Kỹ thuật Giải pháp tại Mật mã . Bạn có thể tìm thấy Kevin trên X , GitHub , Và LinkedIn .