Browser testing với Laravel Dusk (Phần 1)

Tram Ho

1 Giới thiệu

Automation testing là một quá trình tự động chạy các bước thực hiện một test case bằng máy, giúp giảm thiểu lỗi, thời gian cũng như sự nhàm chán với việc manual testing. Đặt biệt khi về cuối dự án, số lượng test case nhiều thì việc test hồi quy sẽ tốn rất nhiều thòi gian. Hơn nữa khi hệ thống có nhiều ngôn ngữ khác nhau thì sẽ gây khó khăn cho các tester và dễ xảy ra sai xót.

Là một developer, thường thì chúng ta chỉ viết unit test trong dự án, tuy nhiên unit test chỉ giúp chúng ta cover được các dòng code (line of codes), các input và output của các function mà chúng ta đã viết chứ chưa cover được các hành động, thao tác của người dùng đối với hệ thống. Và ở phiên bản 5.4, laravel đã ra mắt một tính năng mới là laravel dusk để giúp chúng ta thực hiện điều này.

2 cài đặt

2.1 Project

Bước đầu tiên là chuẩn bị một project để thực hiện test, ở đây mình đã chuẩn bị sẵn một project mẫu gồm các chức năng đăng nhập, đăng ký, và thêm sửa xóa cơ bẩn để phục vụ cho việc test. Các bạn có thể clone về tại đây

2.2 Cài đặt package Laravel dusk

Thêm package laravel dusk bằng lệnh sau:

Và cài đặt

Sau khi chạy lệnh trên, Laravel sẽ tạo một thư mục tests/Browser chứa các test case mấu, đồn thời tải và cài đặt chrome driver. Trường hợp chạy lệnh bị lỗi do không tương thích phiên bản chrome thì có thể thử theo một số cách sau:

  • Cập nhật google chrome lên phiên bản mới nhất và sau đó chạy lại

  • Kiểm tra phiên bản chrome hiện tại trên máy bạn (vào google chrome -> Help -> About Google Chrome) và cài đặt chrome dirver với phiên bản tương ứng bằng lệnh, vd: chrome 79.0.3945.88

2.3 Cấu hình

Chúng ta hãy cùng xem phương thức driver trong file DuskTestCase.php

$options là một tập hợp các tùy chọn khi chạy test, mặc định sẽ có các option --headless là không bật trình duyệt để mô phỏng khi chạy test, --start-maximized bật chrome với kích thước full màn hình để mô phỏng khi chạy test, các bạn có thể tham khảo thêm các option khác tại đây. Ở đây mình sẽ bỏ option --headless để bật trình duyệt để mô phỏng khi chạy test. Code của mình sẽ như sau

2.3 File env

Mặc định Laravel dusk sẽ sử dụng các biến môi trường trong file .env của dự án, để quản lý các biến môi trường riêng cho laravel dusk, ta copy file .env.example thành một file tên là .env.dusk. Trong bài viết này mình chạy test ở localhost nên sẽ sủa lại biến APP_URL như sau:

.env.dusk

3 Viết test

Giờ chúng ta sẽ tiến hành viết test. Đầu tiên mình sẽ xóa file ExampleTest.php trong thư mục tests/Browser vì ở ví dụ này mình sẽ test chức năng đăng ký của dự án này.

với bốn field name, email, pasword, password confirmation với code html tương ứng như sau:

Tạo file test chức năng đăng ký bằng lệnh

Laravel dusk sẽ sinh ra một file RegisterTest.php trong thư mục tests/Browser với nội dung như sau:

Mình sẽ xóa test example và thay bằng các test case của mình

  • Test truy cập vào trang Register và kiểm tra xem có các element hay không

  • Test chức năng đăng ký

Và chạy lệnh sau để chạy các test case

Và kết quả

Test result

4 Kết

Trên đây là các bước cài đặt và ví dụ sơ bộ về Laravel dusk, ở phấn tiếp theo mình sẽ giới thiệu về các phần khác nhưu cách tương tác với các element, cách cấu trúc thư mục… Cảm ơn các bạn đã quan tâm theo dõi, hẹn gặp lại ở các phần sau 😄

Tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo