5. Kết cấu khóa luận
3.1. Tìm hiểu về công cụ kiểm thử tự động PUPPETEE R CODECEPJS
3.1.1. Puppeteer là gì?
Muốn biết Puppeteer làm gì, ta phải hiểu về khái niệm Headless browser (trình duyệt không đầu) là browser chạy mà không cần giao diện. Điều này có nghĩa là, đôi khi chúng ta sẽ cần mở browser lên không phải để duyệt web, mà là để lấy dữ liệu, để test, chụp screenshot, đo hiệu năng performance. Ta muốn làm chuyện này trên các server không có giao diện, lúc này Headless browser là lựa chọn duy nhất.
Puppeteer là một thư viện của Nodejs, có khả năng điều khiển Chrome headless browser thông qua code. Do vậy, Chrome làm được gì thì Puppeteer làm được cái đấy. Ta có thể dùng NodeJS và Puppeteer để làm nhiều việc hữu ích như chụp ảnh màn hình, thu thập dữ liệu, chạy automation test.
3.1.2. Puppeteer có thể làm gì?
Puppeteer có thể làm được nhiều việc, đặc biệt là nó giải quyết được các vấn đề mà nhiều công cụ đang gặp phải, đó là:
Chỉ lấy được HTML thuần của trang web. Trước đây, việc chỉ lấy được HTML
thuần được xem là phổ biến, tùy nhiên bây giờ, hầu hết các trang đều dùng Javascript và Ajax để lấy dữ liệu và render. Lấy HTML thuần thì chúng ta không giải quyết được nhiều công việc.
Bên server có một số biện pháp để chặn HTTP request đơn thuần (dựa theo user
- agent,...) nên dễ bị chặn hơn.
Với một số trang phải đăng nhập mới có dữ liệu, việc quản lí cookie, đăng nhập,... với HTML Agility Pack rất rắc rối.
Dùng Headless browser, ta giải quyết được toàn bộ những vấn đề trên. Đến cả Google còn sử dụng headles browser để lấy dữ liệu các trang web dùng Ajax.
3.1.3. Tại sao nên sử dụng Puppeteer cho testing?
Trong thập kỷ qua, thế giới đã chứng kiến sự xuất hiện của các ứng dụng web dựa trên Javascripts mạnh mẽ, trong khi các frameworks mới phát triển. Các frameworks này đã thách thức các vấn đề từ lâu đã được liên kết với nhau làm tê liệt hiệu suất trang web. Các yếu tố UI tương tác, tốc độ liều mạch và các thành phần kiểu
dáng ấn tượng, đã bắt đầu tồn tại trong một trang web và điều đó cũng không ảnh hưởng nhiều yếu tố tốc độ. CSS và HTML hiện được đưa vào JS thay vì ngược lại vì đơn giản là JS hiệu quả hơn. Mặc dù việc sử dụng các frameworks Javascript này đã tăng hiệu suất, nhưng nó đã gây thiệt hại cho những nhân viên kiểm thử. Nó khiến cho việc kiểm tra và gỡ lỗi trở nên ngày càng phức tạp. Puppeteer đã được giới thiệu là thư viện nút để cho phép thử nghiệm trình duyệt Chrome.
*Trình duyệt không đầu
Như chính tên gọi, trình duyệt không đầu là trình duyệt chạy dưới dạng quá trình ứng dụng mà không có bất kỳ yếu tố giao diện người dùng nào. Các trình duyệt không đầu, như Chrome không đầu đơn giản là nhanh hơn, tiêu thụ ít bộ nhớ hơn, linh hoạt hơn và ổn định hơn dưới áp lực tự động hóa.
Google đã và đang làm việc để đảm bảo rằng sự hỗ trợ phù hợp được cung cấp cho hệ sinh thái DevTools. Với việc sử dụng Puppeteer, thu thập dữ liệu web, quét và khởi chạy các tập lệnh tự động giờ đây có thể được thực hiện với ít nỗ lực hơn và ổn định hơn trước.
Tự động hóa dễ dàng
Selenium dẫn đầu ngành khi nói đến thử nghiệm tự động hóa. Công cụ nguồn mở tuyệt vời này đã được cộng đồng thử nghiệm chấp nhận với bàn tay mở. Nhưng và đây là một thử nghiệm lớn nhưng, selen yêu cầu các trình duyệt được cài đặt bất kể selen được cài đặt trên đám mây hay trên máy cục bộ. Thêm vào sự phức tạp của tích hợp với sự đa dạng của các thành phần, nó trở nên quá khó để quá trình có thể chạy trơn tru.
Chrome không đầu đã trở thành xu hướng khi sử dụng các tập lệnh tự động vào trình duyệt. Việc sử dụng Karma, Mocha và Puppeteer cùng với nó có tất cả các thử nghiệm được thực hiện đột ngột bằng cách sử dụng các tập lệnh tự động dễ dàng hơn.
Kiểm tra hồi quy giao diện người dùng trực quan
Puppeteer có thể được sử dụng để kiểm tra hồi quy các yếu tố UI khác nhau. Để kiểm tra giao diện người dùng của trang web, nên có phiên bản crom mới nhất để đảm bảo kiểm soát api tốt hơn. Thông thường Mocha được sử dụng cùng với Puppeteer để kiểm tra hồi quy trên các tính năng UI khác nhau. Ngoài ra, Mocha cung cấp cho bạn các móc có thể được sử dụng trước hoặc sau khi thử nghiệm.
Puppeteer thành công chủ yếu vì nó đơn giản hóa các chức năng liên quan đến các tác vụ tự động được thực hiện trên trình duyệt.
Kiểm tra ảnh chụp màn hình
Bộ ba cuối cùng của Jest, Chrome không đầu và Puppeteer có thể được sử dụng để thử nghiệm dựa trên ảnh chụp màn hình. Trên thực tế, tính năng Ảnh chụp màn hình tự động của LambdaTest đã tận dụng cả ba công cụ này để chụp ảnh màn hình trên nhiều trình duyệt chrome. Bạn có thể dễ dàng chụp các cây React và các giá trị tuần tự hóa khác và sử dụng chúng để phân tích các thay đổi trạng thái trong khi thử nghiệm. Jest đi kèm với hệ sinh thái React mạnh mẽ và sự tích hợp của nó mở đường cho các yếu tố JavaScript được kiểm tra dễ dàng.
Puppeteer-ảnh chụp màn hình-kiểm tra là một thư viện trong chính trình điều khiển rối cho phép tạo ảnh chụp màn hình trong khi kiểm tra.
Tương tự ava-Puppeteer là một thư viện khác có sẵn trên GitHub sẽ sớm xuất hiện vào npm.
Kiểm tra năng suất
Sử dụng Puppeteer, các số liệu hiệu suất có thể được đo lường và phân tích để tối ưu hóa trang web cho các thiết bị và tốc độ mạng khác nhau. Chrome cung cấp DevTools cho phép ghi lại Dòng thời gian hiệu suất mà khi tự động tiết lộ các vấn đề liên quan đến hiệu suất. Puppeteer là một kiểm soát API cấp cao đối với Giao thức Công cụ dành cho nhà phát triển Chrome. Sự thành thạo của Puppeteer để dễ dàng xử lý các yếu tố không đồng bộ và hành vi của chúng đối với sự thay đổi trạng thái DOM. Bạn thậm chí có thể lưu dữ liệu hiệu suất dưới dạng tệp JSON.
Đặt nó như thế này khi bạn sử dụng Puppeteer, bạn là Puppeteer. Bạn có thể kiểm soát các nhân viên dịch vụ và kiểm tra bộ nhớ đệm cũng như thời gian tải của một trang web có hoặc không có thời gian bộ đệm. Thời gian phản hồi của trang web có thể được theo dõi bằng cách sử dụng answerEnd, cùng với ảnh hưởng của băng thông mạng và các vấn đề liên quan đến độ trễ.
Tải thử nghiệm bằng cách sử dụng Puppeteer
Load Test chỉ đơn giản là chiếm số lượng phiên bản tối đa mà bạn có thể có thể chạy trên trang web của mình. Nhiều phiên bản Puppeteer có thể được khởi chạy song song một cách dễ dàng thông qua đó bạn có thể tải thử nghiệm trang web đang được xem xét.
Puppeteer đúng với tên của nó, vì bạn có một mệnh lệnh tuyệt vời đối với chrome không đầu mà bạn có khả năng khởi chạy rất nhiều phiên bản thử nghiệm trên một phiên hoặc nhiều trình duyệt.
Ở đây, các phần mềm dành cho số lượng mẫu và phần mềm dành cho các phiên đồng thời trên mỗi mẫu.
Kết thúc thử nghiệm (Kiểm thử từ đầu đến cuối)
Thử nghiệm từ đầu đến cuối hoặc Chấp nhận thường được coi là một trong những thử nghiệm ít phổ biến nhất. Selenium đã được sử dụng trước đó để thử nghiệm chấp nhận và nó khá dễ bị lỗi và có rất nhiều lỗi. Sau đó, đến Puppeteer với sự tập trung cải tiến vào kiểm soát API đã giúp giải quyết các biến chứng xuất hiện dưới dạng lỗi. Một trong những siêu năng lực của Puppeteer mà nó không cần biết về stack của bạn và có thể hoạt động với mọi khung công tác, có thể là React, Angular hoặc bất kỳ thư viện nào khác.
Phần kết luận
Thành công của puppeteer và chrome không chỉ có thể làm giảm hiệu quả của chúng, thực tế là nó được Google hỗ trợ cũng là lý do tại sao nó được chấp nhận và công nhận trên toàn cầu. Tuy nhiên, vấn đề lớn nhất là tính toàn vẹn của nó với chrome không đầu rất tuyệt vời tuy nhiên với các trình duyệt khác, nó có thể bị chùn bước. Phải nói rằng, tôi tin tưởng mạnh mẽ rằng công cụ này sẽ phát triển mạnh mẽ với hệ sinh thái google ngày càng mở rộng.
3.2. ỨNG DỤNG CÔNG CỤ VÀO CÔNG CỤ KIỂM THỬ TỰ ĐỘNG PUPPETEER - CODECEPJS VÀO THỰC TẾ CÔNG TY TNHH SETA PUPPETEER - CODECEPJS VÀO THỰC TẾ CÔNG TY TNHH SETA
3.2.1. Giới thiệu về Các phần mềm cần thiết
Phần này sẽ cung cấp cho bạn cách chạy/ ghi các bài kiểm thử end to end cho dự án của bạn, tất cả các điều cần thiết cần thiết và mã hóa kiểm thử end to end cơ bản.
Với NodeJS, chúng ta sẽ dụng Visual Studio Code là nhẹ và tiện nhất vì có thể dễ dàng debug. Visual Studio Code nhẹ lại còn miễn phí, chạy được cả trên cả hệ điều hành Window và Mac nên các bạn có thể tải về dùng tại:
https://code.visualstudio.com/
Nếu có khả năng lập trình cao hơn thì bạn cũng có thể dùng Notepad + + hoặc Sublime Text đều được. Nhưng để phù hợp với khóa luận, mình sẽ dùng Visual Studio Code.
3.2.2. Cài đặt và khởi tạo Puppeteer – Codeceptjs và ứng dụng
Vào thư mục muốn chứa thư mục test chuẩn bị được khởi tạo. Mình sẽ vào ổ D, tạo thư mục có tên là “automation_demo”.
Mở thư mục mới tạo, mở cmd hoặc Git Bash của bạn bằng cách giữ Shift + chuột phải, chọn “Open command window here”.
Sau khi cửa sổ cmd được bật lên, bạn gõ “npm init”. “npm” là package của nodejs, còn “init” có nghĩa là khởi tạo, sau đó ấn Enter.
Nếu không có thông tin gì cần thay đổi thì chúng ta cứ ấn Enter tiếp.
Sau khi khởi tạo xong, trong tệp lưu sẽ xuất hiện file “package.json”. File này sẽ chứa các dependence cần thiết để mà chạy cho các dự án của các bạn. Nếu các bạn cần thêm gì, sẽ phải khai báo ở file này và cài đặt. Và giờ, ta sẽ thử mở code xem các thông tin vừa khai báo đã được lưu lại trong file này chưa bằng cách chọn file “package.json”, chuột phải, chọn “Open with Code”
.*Cài đặt thư viện
Sau khi đã thành công sẽ hiện thị như hình bên trên. Bạn mở code, trong mục “dependencies” thể hiện là codecept.js bản 2.3.2 đã được cài. Khi cài, máy tính sẽ tự động cài đặt phiên bản mới nhất.
Tiếp theo, chúng ta khởi tạo framework bằng cách chạy 2 câu lệnh sau: //node_modules/.bin/codeceptjs
Khởi tạo xong, trong thư mục “Automation_demo” sẽ xuất hiện file “codecept.conf.js”. Ở đây, lưu tất cả các thông tin, mục đích các file của dự án. Trong hình dưới, “helpers” thể hiện framework chúng ta đang sử dụng là puppeteer, đường dẫn trang web chúng ta định test là url: “https://www.stage.veritone.com” (đây là dự án hiện tại đang làm của công ty Seta).
Bây giờ chúng ta sẽ bắt đầu viết script cho test case có chức năng đăng nhập. Chúng ta sẽ tạo 1 file test lấy tên là “demo_test.js” trong thư mục “test_e2e”. Các đoạn script chúng ta sẽ lưu ở file mới tạo này.
Và đây là đoạn code mình viết cho trường hợp đăng nhập thất bại với user name hoặc pass word không đúng.
Đoạn script này với luồng không khác gì chúng ta đang thực hiện kiểm thử bằng tay, chỉ khác là chúng ta đang dùng ngôn ngữ để sao cho máy tính hiểu được là bạn đang muốn thực hiện hành động gì. Ví dụ như đoạn ở trên:
“I.amOnPage(“/login/#/”) có nghĩa là chúng ta đang ở đường dẫn “https://www.stage.veritone.com/login/#/” để chuyển trang trình duyệt đến màn hình login của dự án.
“I.waitForText(“Login”,60)” có nghĩa là chúng ta đang đợi khi nào nhìn thấy dòng “Login” trên trang trình duyệt. 60 là 60s, đây là thời gian tối đa để tải được trang này.
Chúng ta đang muốn login với trường hợp thất bại, vậy thì user name và password được nhập vào trang này là không đúng. Nhưng làm sao để máy có thể phát hiện ra chỗ nào là user name và password để nhập kí tự vào. Chúng ta sẽ đi lấy đường dẫn tới user name bẳng cách vào trang login của dự án, ấn F12/element và tìm đến khu vực cần thao tác.
Sau khi xong đoạn script, bạn sẽ chạy bằng cách gõ lệnh “./node_modules/.bin/codecept.js run” và Enter. Chạy xong nó sẽ báo kết quả có thông tin là đã chạy trường hợp này trong bao lâu, case thành công hay thất bại như sau: