Laravel Dusk: Robot Test Tự Động Cho Ứng Dụng Của Bạn

Chào các bạn, tôi là Creyt đây! Hôm nay chúng ta sẽ "lái thử" một công cụ cực kỳ xịn xò trong hệ sinh thái Laravel, đó là Laravel Dusk. Nếu bạn đã từng đau đầu với việc kiểm tra thủ công từng ngóc ngách của ứng dụng web mỗi khi deploy một tính năng mới, thì Dusk chính là vị cứu tinh mà bạn đang tìm kiếm.

Laravel Dusk Là Gì? Tại Sao Chúng Ta Cần Nó?

Hãy hình dung thế này nhé: Bạn vừa xây xong một căn nhà đẹp đẽ (ứng dụng web của bạn), có cửa chính, cửa sổ, phòng khách, phòng ngủ đầy đủ. Giờ bạn muốn chắc chắn rằng mọi thứ hoạt động trơn tru: cửa mở ra vào không kẹt, đèn bật tắt đúng chỗ, nước chảy trong vòi hoa sen... Bạn có thể tự mình đi kiểm tra từng thứ một. Nhưng nếu căn nhà quá lớn, hoặc bạn phải xây thêm nhiều căn nữa, việc kiểm tra thủ công sẽ tốn thời gian, dễ sai sót và cực kỳ nhàm chán.

Laravel Dusk chính là một "đội ngũ kiểm định chất lượng" tự động, một con robot siêu phàm biết cách "đi lại" trong căn nhà web của bạn. Nó sẽ mở trình duyệt web (như Chrome chẳng hạn), truy cập vào địa chỉ bạn chỉ định, gõ chữ vào ô input, nhấn nút, kéo thả, và thậm chí còn "nhìn" xem các phần tử trên trang có xuất hiện đúng như mong đợi hay không.

Mục đích chính của Dusk là gì? Nó giúp chúng ta thực hiện kiểm thử đầu cuối (End-to-End Testing) hay còn gọi là kiểm thử trình duyệt (Browser Testing). Tức là, thay vì chỉ kiểm tra từng phần nhỏ của mã nguồn (unit test) hay sự tương tác giữa các module (feature test), Dusk sẽ kiểm tra toàn bộ luồng người dùng từ đầu đến cuối, giống hệt như một người dùng thật đang trải nghiệm ứng dụng của bạn vậy. Điều này cực kỳ quan trọng để đảm bảo trải nghiệm người dùng không bị gián đoạn bởi những lỗi nhỏ nhặt mà bạn không thể ngờ tới.

Bắt Tay Vào Cài Đặt và Sử Dụng Dusk

Để mời "con robot" Dusk về nhà, chúng ta chỉ cần vài bước đơn giản.

Đầu tiên, hãy đảm bảo bạn đã có một dự án Laravel và đang ở trong thư mục gốc của dự án. Sau đó, chúng ta sẽ cài đặt Dusk thông qua Composer:

composer require laravel/dusk --dev

Lệnh --dev ở đây nghĩa là Dusk chỉ cần thiết trong môi trường phát triển (development) và kiểm thử (testing), chứ không cần phải có mặt khi ứng dụng đã "lên sóng" (production).

Tiếp theo, chúng ta cần "khởi tạo" Dusk trong dự án:

php artisan dusk:install

Lệnh này sẽ tạo ra thư mục tests/Browser cùng với một file ví dụ ExampleTest.php và một service provider DuskServiceProvider.php. DuskServiceProvider này cần được đăng ký trong config/app.php nhưng chỉ khi ở môi trường local hoặc testing. Laravel Dusk đã tự động làm điều này cho bạn rồi, bạn có thể kiểm tra trong app/Providers/AppServiceProvider.php (hoặc DuskServiceProvider.php nếu bạn đã publish nó) để thấy đoạn code này:

// Trong AppServiceProvider.php hoặc DuskServiceProvider.php
public function register()
{
    if ($this->app->environment('local', 'testing')) {
        $this->app->register(\Laravel\Dusk\DuskServiceProvider::class);
    }
}

Mặc định, Dusk sử dụng ChromeDriver để điều khiển trình duyệt Chrome. Bạn cần đảm bảo ChromeDriver đã được cài đặt và có thể chạy được trên hệ thống của bạn. Laravel Dusk thường sẽ tự động tải phiên bản ChromeDriver phù hợp với Chrome của bạn.

Viết Một Bài Kiểm Tra Đơn Giản Với Dusk

Giờ thì, hãy cùng viết một bài kiểm tra thực tế. Giả sử chúng ta có một ứng dụng web đơn giản cho phép người dùng đăng ký và đăng nhập. Chúng ta muốn kiểm tra xem liệu một người dùng có thể đăng ký thành công, sau đó đăng nhập và nhìn thấy tên của họ trên trang chào mừng hay không.

Gợi Ý Đọc Tiếp

Kiểm thử Laravel: Bảo hiểm chất lượng code cùng Creyt

46 Lượt xem

Đầu tiên, hãy tạo một test file mới:

php artisan make:dusk UserRegistrationAndLoginTest

Lệnh này sẽ tạo ra file tests/Browser/UserRegistrationAndLoginTest.php. Mở file này ra, chúng ta sẽ viết kịch bản cho con robot của mình:

<?php

namespace Tests\Browser;

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
use App\Models\User; // Giả sử bạn có model User

class UserRegistrationAndLoginTest extends DuskTestCase
{
    use DatabaseMigrations; // Đảm bảo database được reset trước mỗi test

    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testUserCanRegisterAndLogin()
    {
        $this->browse(function (Browser $browser) {
            // 1. Truy cập trang đăng ký
            $browser->visit('/register')
                    ->assertSee('Register'); // Đảm bảo thấy chữ 'Register'

            // 2. Điền thông tin và đăng ký
            $browser->type('name', 'Creyt Testing')
                    ->type('email', 'creyt@example.com')
                    ->type('password', 'password')
                    ->type('password_confirmation', 'password')
                    ->press('Register'); // Nhấn nút 'Register'

            // 3. Kiểm tra xem đã chuyển hướng đến trang Home sau khi đăng ký
            $browser->assertPathIs('/home')
                    ->assertSee('Creyt Testing'); // Đảm bảo thấy tên người dùng trên trang Home

            // 4. Đăng xuất để chuẩn bị cho bước đăng nhập
            $browser->clickLink('Logout'); // Giả sử có link Logout
            $browser->assertPathIs('/'); // Đảm bảo đã về trang chủ

            // 5. Truy cập trang đăng nhập
            $browser->visit('/login')
                    ->assertSee('Login'); // Đảm bảo thấy chữ 'Login'

            // 6. Điền thông tin và đăng nhập
            $browser->type('email', 'creyt@example.com')
                    ->type('password', 'password')
                    ->press('Login'); // Nhấn nút 'Login'

            // 7. Kiểm tra lại sau khi đăng nhập
            $browser->assertPathIs('/home')
                    ->assertSee('Creyt Testing'); // Đảm bảo thấy tên người dùng
        });
    }

    // Một ví dụ khác: kiểm tra lỗi validation khi đăng ký
    public function testRegistrationValidationErrors()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/register')
                    ->press('Register') // Nhấn nút đăng ký mà không điền gì
                    ->assertSee('The name field is required.') // Kiểm tra thông báo lỗi
                    ->assertSee('The email field is required.')
                    ->assertSee('The password field is required.');
        });
    }
}

Để chạy bài kiểm tra này, bạn dùng lệnh:

php artisan dusk

Bạn sẽ thấy một trình duyệt Chrome tự động mở ra, thực hiện các thao tác mà bạn đã "lập trình" cho nó, và sau đó tự động đóng lại. Nếu mọi thứ diễn ra đúng như kịch bản, bài kiểm tra sẽ thành công. Nếu có lỗi, Dusk sẽ chụp lại ảnh màn hình tại thời điểm xảy ra lỗi và lưu vào tests/Browser/screenshots, giúp bạn dễ dàng debug.

Lưu ý quan trọng: Dòng use DatabaseMigrations; ở đầu class test đảm bảo rằng cơ sở dữ liệu của bạn sẽ được migrate (tạo bảng) và rollback (xóa bảng) sau mỗi bài kiểm tra. Điều này giúp mỗi bài kiểm tra chạy trong một môi trường sạch sẽ, không bị ảnh hưởng bởi dữ liệu từ các bài kiểm tra trước đó. Nếu bạn muốn seed dữ liệu, bạn có thể dùng thêm use DatabaseTransactions; hoặc gọi Artisan::call('db:seed') trong phương thức setUp() của test.

Mẹo và Thực Hành Tốt (Best Practices)

Để sử dụng Dusk một cách hiệu quả, giáo sư Creyt có vài lời khuyên chân thành:

1. Giữ mỗi bài kiểm tra tập trung (Focused Tests): Mỗi phương thức test chỉ nên kiểm tra một luồng hoặc một tính năng cụ thể. Ví dụ, một test cho đăng ký, một test cho đăng nhập, một test cho việc tạo bài viết. Đừng cố nhồi nhét mọi thứ vào một test duy nhất.
2. Sử dụng bộ chọn (selectors) rõ ràng và bền vững: Thay vì dùng id hoặc class dễ thay đổi, hãy cân nhắc thêm các thuộc tính data-dusk="element-name" vào các phần tử HTML quan trọng. Điều này giúp bài kiểm tra của bạn ít bị vỡ hơn khi giao diện người dùng thay đổi.
   • $browser->type('@email-field', 'creyt@example.com') thay vì $browser->type('#email', 'creyt@example.com').
3. Dọn dẹp sau mỗi test: Sử dụng DatabaseMigrations hoặc DatabaseTransactions để đảm bảo mỗi test chạy trên một cơ sở dữ liệu sạch. Điều này ngăn chặn sự phụ thuộc giữa các test.
4. Chụp ảnh màn hình khi thất bại: Dusk tự động làm điều này, nhưng bạn hãy tận dụng nó! Các ảnh chụp này là "bằng chứng" quý giá giúp bạn hiểu tại sao test thất bại.
5. Chờ đợi là hạnh phúc: Các ứng dụng web hiện đại thường có JavaScript và AJAX, khiến các phần tử có thể không xuất hiện ngay lập tức. Hãy dùng các phương thức waitFor, waitForText, waitForLocation của Dusk để đảm bảo phần tử đã tải xong trước khi tương tác. Ví dụ: $browser->waitFor('#my-element')->click('#my-element').
6. Tích hợp với CI/CD: Đừng chỉ chạy Dusk trên máy local. Hãy đưa nó vào quy trình tích hợp liên tục (CI/CD) của bạn. Mỗi khi bạn push code lên repository, CI/CD sẽ tự động chạy các bài kiểm tra Dusk. Nếu có test nào thất bại, bạn sẽ biết ngay lập tức trước khi code đó kịp "làm hại" người dùng thật.

Ứng Dụng Thực Tế

Laravel Dusk là công cụ không thể thiếu cho bất kỳ ứng dụng Laravel nào có giao diện người dùng phức tạp và các luồng tương tác quan trọng. Bạn có thể thấy nó được ứng dụng trong:

• Các nền tảng thương mại điện tử (E-commerce): Kiểm tra toàn bộ quy trình mua hàng từ thêm sản phẩm vào giỏ, điền thông tin giao hàng, thanh toán và nhận xác nhận đơn hàng.
• Hệ thống quản lý nội dung (CMS) hoặc Blog: Đảm bảo người dùng có thể đăng nhập, tạo bài viết mới, chỉnh sửa, xóa và xem trước bài viết.
• Các ứng dụng SaaS (Software as a Service): Kiểm tra quá trình đăng ký, onboarding người dùng mới, sử dụng các tính năng cốt lõi của dịch vụ, quản lý tài khoản.
• Bảng điều khiển quản trị (Admin Dashboards): Đảm bảo các chức năng quản lý người dùng, sản phẩm, đơn hàng, báo cáo hoạt động đúng.

Tóm lại, bất cứ nơi nào mà trải nghiệm người dùng là yếu tố sống còn, Laravel Dusk đều có thể giúp bạn tự động hóa việc kiểm thử, giúp bạn tự tin hơn rất nhiều mỗi khi triển khai ứng dụng của mình. Nó giống như có một đội quân kiểm thử không biết mệt mỏi, làm việc 24/7 để đảm bảo "căn nhà web" của bạn luôn hoàn hảo.

Hy vọng bài viết này đã giúp các bạn hiểu rõ hơn về Laravel Dusk và cách sử dụng nó để nâng tầm chất lượng ứng dụng của mình. Hẹn gặp lại trong những buổi học sau!