Jan 01, 1970
802 lượt đọc
Kiểm tra các tính năng gốc trong ứng dụng Flutter bằng Patrol và Codemagic
dài quá đọc không nổi
Patrol là một công cụ kiểm tra mới của LeanCode cho phép bạn kiểm tra các tính năng nền tảng gốc trong ứng dụng Flutter. Giờ đây, bạn có thể tương tác với các luồng xác thực của Google và Apple, chế độ xem web, chuyển đổi giữa chế độ sáng và tối, v.v. Trong bài viết này, bạn cũng sẽ tìm hiểu cách sử dụng Patrol trong quy trình làm việc Codemagic CI/CD của mình."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
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ư
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ư:
- 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.
- Tương tác với WebViews.
- Thu nhỏ và tối đa hóa ứng dụng của bạn.
- 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.
- 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
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ọ
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
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
Nếu bạn tìm thấy bất kỳ lỗi nào, thì bạn có thể nêu vấn đề
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
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
Nếu bạn tìm thấy bất kỳ lỗi nào, thì bạn có thể nêu vấn đề
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
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
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
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
Cũng được xuất bản ở đây .
L O A D I N G
. . . comments & more!
. . . comments & more!
