Tích hợp Kiểm thử tự động Playwright với Jenkins (CI/CD)

Giới thiệu

Chào các bạn, bài viết này sẽ hướng dẫn cách tích hợp các kịch bản kiểm thử tự động được viết bằng Playwright vào quy trình CI/CD, bài viết sẽ tập trung chủ yếu vào Jenkins. Để đơn giản hóa, chúng ta sẽ sử dụng dự án mẫu mặc định của Playwright.

Nội dung bài viết dựa trên kiến thức và kinh nghiệm cá nhân của mình trong quá trình tự tìm hiểu và nghiên cứu, nên có thể còn thiếu sót và cần cập nhật thêm. Vì vậy, rất mong nhận được sự đóng góp từ các bạn qua phần bình luận để bài viết hoàn thiện hơn.

Trước khi bắt tay vào tạo dự án và tích hợp với Jenkins, chúng ta sẽ cùng nhau tìm hiểu cơ bản về CI/CD, Playwright, và Jenkins nhé.

CI/CD là gì?

CI/CD (Continuous Integration/Continuous Deployment) là phương pháp giúp tự động hóa các bước kiểm thử và triển khai phần mềm. CI/CD giúp giảm thời gian phát hiện lỗi, cải thiện chất lượng phần mềm và tăng tốc độ phát hành.

Continuous Integration (CI): Mỗi khi lập trình viên thay đổi mã nguồn (như thêm tính năng mới hoặc sửa lỗi), mã nguồn mới sẽ được tự động kiểm thử để đảm bảo không có lỗi phát sinh.
Continuous Deployment (CD): Sau khi mã nguồn được kiểm thử thành công, nó sẽ tự động được triển khai (deploy) lên môi trường sản xuất (production), nơi người dùng có thể sử dụng.

Ví dụ CI/CD trong thực tế

Hãy tưởng tượng bạn đang phát triển một ứng dụng web bán hàng. Mỗi khi bạn sửa lại quy trình thêm một sản phẩm mới vào giỏ hàng hoặc thay đổi giá, bạn phải kiểm tra xem các tính năng khác của trang web vẫn hoạt động bình thường. Thay vì kiểm tra thủ công, bạn có thể thiết lập CI/CD để tự động hóa quá trình này.

Tích hợp liên tục (CI): Bạn thay đổi mã nguồn để thêm sản phẩm mới. Mã nguồn mới sẽ tự động được đẩy lên hệ thống kiểm thử.
Triển khai liên tục (CD): Nếu mã nguồn mới vượt qua tất cả các bài kiểm thử, nó sẽ tự động được triển khai lên trang web chính thức. Người dùng có thể ngay lập tức thấy sản phẩm mới trên trang web mà không cần bạn phải làm thêm bất cứ bước thủ công nào.

Nhờ CI/CD, quá trình phát triển và triển khai phần mềm trở nên nhanh chóng, hiệu quả và giảm thiểu rủi ro.

Giới thiệu về Playwright và Jenkins

Playwright: Một framework kiểm thử tự động hiện đại, hỗ trợ nhiều trình duyệt và ngôn ngữ lập trình.
Jenkins: Công cụ CI/CD phổ biến, hỗ trợ tự động hóa build, test, và deploy phần mềm.

Chuẩn bị môi trường

Hệ điều hành: Windows, macOS, hoặc Linux
Node.js và npm
Jenkins

Các bạn có thể cài đặt NodeJS, Jenkins ở trang chủ. Nhà phát hành đã trình bày rất chi tiết cho từng hệ điều hành khác nhau, vì những nội dung này có thể thay đổi nên mình không trình bày trong bài viết này. Tuy nhiên trước khi bắt đầu với dự án, các bạn phải cài đặt thành công NodeJS và Jenkins trên thiết bị của mình.

Khởi tạo dự án Playwright

Mở Terminal tại thư mục bạn muốn khởi tạo dự án, và gõ lệnh sau để tạo thư mục dự án:

mkdir playwright-jenkins

Truy cập vào thư mục gốc của dự án:

cd playwright-jenkins

Tại thư mục playwright-jenkins, khởi tạo dự án Playwright:

npm init playwright@latest

Sau khi chạy dòng lệnh trên, Playwright sẽ hỏi một số thông tin như:

Các bạn muốn sử dụng TypeScript hay JavaScript, ở đây mình sử dụng TypeScript
Bạn muốn đặt thư mục test tên gì. Mình để mặc định là tests nhấn Enter.
Bạn có muốn thêm Github Actions workflow hay không? Ở đây mình hướng dẫn dùng Jenkins nên bạn có thể để mặc định là false rồi nhấn Enter.
Bạn có muốn cài đặt Playwright browsers? Bạn cũng có thể để mặc định là true.

Sau khi chạy dòng lênh dự án của bạn sẽ được khởi tạo và 1 cấu trúc thư mục như sau, bạn có thể mở thư mục này với VSCode hoặc bấn kỳ trình soạn mã nào, ở đây chúng ta sẽ không tìm hiểu sâu về cú pháp Playwright mà tìm hiểu cách nó tích hợp với Jenkins vì vậy không cần thay đổi nhiều về các test scripts, các bạn có thể để mặc định:

Vì ở bài viết này chủ yếu tìm hiểu về Jenkins nên chúng ta không cần thay đổi nhiều về mã nguồn trong dự án mà Playwright khởi tạo, bạn tạo giúp mình 1 file Jenkinsfile ở thư mục gốc của dự án. Bạn có thể tham khảo dự án của mình qua link Github này.

Bạn có thấy lấy trực tiếp script pipeline jenkins từ trang chủ của Playwright để thực hiển dự án mẫu này, hoặc sao chép mã bên dưới:

pipeline {
   agent { docker { image 'mcr.microsoft.com/playwright:v1.45.1-jammy' } }
   stages {
      stage('e2e-tests') {
         steps {
            sh 'npm ci'
            sh 'npx playwright test'
         }
      }
   }
}

Đoạn mã của Pipeline này sử dụng Docker để tạo ra một môi trường chứa Playwright và các công cụ cần thiết để chạy các bài kiểm thử. Trong stage e2e-tests, pipeline thực hiện hai bước chính: cài đặt các phụ thuộc của dự án Node.js và chạy các bài kiểm thử đầu cuối bằng Playwright.

pipeline { ... }: Đây là phần khai báo chính của Jenkins Pipeline. Nó định nghĩa toàn bộ pipeline và các cấu hình liên quan.
agent { docker { image 'mcr.microsoft.com/playwright:v1.45.1-jammy' } }:
- agent: Xác định nơi mà pipeline sẽ được thực thi. Trong trường hợp này, pipeline sẽ chạy trong môi trường Docker.
- docker { image 'mcr.microsoft.com/playwright:v1.45.1-jammy' }: Chỉ định image Docker mà bạn muốn sử dụng để chạy pipeline. Hình ảnh này bao gồm Playwright phiên bản 1.45.1 trên Ubuntu Jammy (Ubuntu 22.04).
stages { … }: Phần này định nghĩa các bước (stages) khác nhau trong pipeline. Mỗi stage chứa một hoặc nhiều bước để thực hiện.
stage('e2e-tests') { ... }:
- stage('e2e-tests'): Tên của stage này là e2e-tests. Đây là nơi bạn định nghĩa các bước cần thực hiện trong giai đoạn kiểm thử đầu cuối.
- steps { ... }: Xác định các bước cụ thể mà bạn muốn thực hiện trong stage này.
sh 'npm ci':
- sh: Lệnh dùng để thực thi các lệnh shell.
- npm ci: Cài đặt các phụ thuộc của dự án Node.js từ package-lock.json một cách chính xác và nhanh chóng. Lệnh này thường được sử dụng trong các môi trường CI/CD để đảm bảo cài đặt các phiên bản phụ thuộc đúng như trong lock file.
sh 'npx playwright test':
- npx: Chạy các lệnh Node.js mà không cần cài đặt toàn cục.
- playwright test: Chạy các bài kiểm thử đầu cuối bằng Playwright, một công cụ kiểm thử tự động cho web. Lệnh này sẽ thực hiện các bài kiểm thử đã được định nghĩa trong dự án.

Sau khi đã có file Jenkinsfile, bạn có thể đẩy lên 1 Repository Github hoặc bất kỳ SCM (Source Code Management). Ở đây mình đã đẩy lên 1 repository công khai như sau.

Cấu hình Jenkins

Để tiến hành cấu hình Jenkins bạn phải cài đặt thành công Jenkins theo hướng dẫn từ trang chủ, sau đó chạy dịch vụ của Jenkins. Bài viết này không tập trung vào hướng dẫn cài đặt Jenkins, thay vào đó các bạn nên đọc tài liệu trang chủ Jenkins để luôn cập nhật bản mới nhất.

Sau khi khởi chạy Jenkins, mặc định Jenkins sẽ chạy trên máy của các bạn với đường dẫn http://localhost:8080. Truy cập đường dẫn này và làm theo hướng dẫn cấu hình.

Cài đặt các plugin cần thiết cho Jenkins:

Vì pipeline chúng ta sử dụng từ trang chủ của Playwright sử dụng docker, vì vậy chúng ta phải cài thêm 2 thư viện Docker và Docker pipeline vào Jenkins bằng cách truy cập Manage Jenkins > Plugins > Available plugins > Tìm và cài giúp mình 2 plugin Docker Pipeline và Docker plugin
Sau khi cài đặt, bạn khởi động lại Jenkins và kiểm tra các Plugin đã cài ở phần Installed plugins

Tạo pipeline mới trên Jenkins:

Jenkins Dashboard > chọn New Item > Nhập tên của Job mới > Chọn Pipeline > Nhấn OK . Ở đây mình chọn loại là Pipeline bởi vì đây là loại phổ biến và được dùng nhiều khi sử dụng Jenkins cũng như các tools CI/CD khác. Bởi tính linh hoạt và cấu hình bằng script.

Sau khi tạo job mới với loại pipeline, bạn nhấn vào tab Pipeline và thiết đặt như hình bên dưới:

Chạy pipeline

Sau khi cấu hình xong quay về trang chủ job bạn vừa tạo và nhấn Build now để chạy pipeline.

Sau khi nhấn Build now, sau đó quan sátở phần Build History sẽ có 1 build sẽ được lên lịch chạy, bạn có thể nhấn vào bản chạy này và chọn Console Output để xem quá trình chạy của Pipeline và kết quả chạy của pipeline.

Đây là giao diện Console Output của quá trình chạy pipeline:

Từ kết quả có thể thấy, Pipeline đã chạy thành công và 6 kịch bản kiểm thử đã được kiểm tra thành công.

Tổng kết

Trong bài viết này, mình đã giới thiệu cơ bản về việc áp dụng CI với Playwright sử dụng Jenkins, đây là ví dụ rất cơ bản để hiểu được cách để kết hợp Playwright và Jenkins trong mô hình CI/CD và giao diện các thao cơ bản của Jenkins. Ở các bài viết khác mình sẽ đi sâu vào giới thiệu cho các bạn về Playwright và Jenkins hơn.