2 Công cụ tuyệt vời để tự động hóa kiểm tra hiệu suất phía máy khách

Mar 23 2022
Một cái nhìn về ngọn hải đăng và nhà viết kịch
Khi các ứng dụng ngày càng phức tạp và các nỗ lực thử nghiệm được mở rộng quá mức, việc tự động hóa các đường ống thử nghiệm của chúng tôi là điều tối quan trọng. Trong bài viết này, tôi sẽ trình bày cách bạn có thể sử dụng 2 công cụ tuyệt vời để nhanh chóng bao quát nhiều lĩnh vực thử nghiệm một cách dễ dàng.
hình ảnh của Paul Esch-Laurent trên unsplash

Khi các ứng dụng ngày càng phức tạp và các nỗ lực thử nghiệm được mở rộng quá mức, việc tự động hóa các đường ống thử nghiệm của chúng tôi là điều tối quan trọng.

Trong bài viết này, tôi sẽ trình bày cách bạn có thể sử dụng 2 công cụ tuyệt vời để nhanh chóng bao quát nhiều lĩnh vực thử nghiệm một cách dễ dàng.

Giới thiệu ngọn hải đăng của Google

Ngọn hải đăng của Googles là một công cụ đánh giá chất lượng trang web mã nguồn mở.
Nó dựa trên các nguyên tắc về web-vitals của googles và nó đo lường 5 yếu tố chất lượng:

1: hiệu suất

Yếu tố này có 3 khía cạnh:

  • Sơn có nội dung lớn nhất (LCP) : đo lường hiệu suất tải . Để cung cấp trải nghiệm người dùng tốt, LCP sẽ xảy ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải lần đầu tiên.
  • Độ trễ đầu vào đầu tiên (FID) : đo lường mức độ tương tác . Để cung cấp trải nghiệm người dùng tốt, các trang phải có FID từ 100 mili giây trở xuống.
  • Tích lũy Layout Shift (CLS) : đo độ ổn định của hình ảnh . Để cung cấp trải nghiệm người dùng tốt, các trang phải duy trì CLS là 0,1. hoặc ít hơn.

Tôi đã trình bày chi tiết về khả năng truy cập và tầm quan trọng của nó trong phát triển phần mềm hiện đại ở đây .
Nói chung, lighthouse giúp cải thiện khả năng truy cập các trang web theo các chỉ số quan trọng về khả năng truy cập web của nó .

3: Các phương pháp hay nhất

Điều này sẽ cung cấp cho các nhà phát triển web cơ hội để cải thiện chất lượng mã của họ.

4: Tối ưu hóa công cụ tìm kiếm (SEO)

Tối ưu hóa kết quả của công cụ tìm kiếm

5: Ứng dụng web tiến bộ (PWA)

Giữ cho trang web của bạn được cập nhật với các công nghệ hiện đại.

Mỗi một trong 5 yếu tố này sẽ tạo ra điểm từ 0 đến 100 và kết quả là một báo cáo chi tiết về các vấn đề được tìm thấy và cơ hội để khắc phục chúng.

Bạn có thể chạy Lighthouse theo 4 cách chính:

  1. Từ các công cụ dành cho nhà phát triển chrome
  2. Trực tuyến
  3. Từ cli
  4. Là một gói nút

trước tiên, chúng tôi cần cài đặt gói hải đăng từ NPM

npm install lighthouse
    
      

Chúng tôi chỉ quan tâm đến hiệu suất, khả năng tiếp cận và các phương pháp hay nhất.

Bây giờ chúng ta có thể chạy script:

node pure-lighthouse.js

Lighthouse cung cấp các báo cáo tuyệt vời với các chi tiết đáng kinh ngạc, nó thực sự có thể giúp xác định các vấn đề về chất lượng trong trang web.

Chuẩn bị sẵn tập lệnh, chúng tôi có thể thực thi nó trong các đường ống tự động hóa của mình và dễ dàng nhắm mục tiêu các vấn đề này.

Vấn đề với cách tiếp cận này là chúng tôi chỉ có thể kiểm tra trang đầu của ứng dụng của mình.

Chúng tôi cần khả năng điều hướng giữa các trang và chạy ngọn hải đăng trên trang hiện tại.

Giới thiệu nhà viết kịch

Playwright là một khung tự động thử nghiệm web mã nguồn mở.

Được phát triển bởi Microsoft, nó được thiết kế để sử dụng Chrome Dev-Tools Protocol và thực hiện các hành động trên một phiên bản trình duyệt như điều hướng, nhấp vào các phần tử, chèn văn bản, chọn các tùy chọn từ trình đơn thả xuống, v.v.

Đầu tiên, hãy cài đặt playwright từ npm:

npm install playwright

Trong tập lệnh này, chúng tôi đã tạo một trình duyệt, một ngữ cảnh và một trang và điều hướng trang đó đến trang web demo của chúng tôi.

Sau đó, chúng ta có thể chèn tên người dùng và mật khẩu của mình, nhấp vào nút đăng nhập và đợi cho đến khi phần tử chào mừng hiển thị.

Hãy chạy tập lệnh này:

node pure-playwright.js

Tuy nhiên, bạn có thể dễ dàng sử dụng bất kỳ khung dựa trên JavaScript nào mà bạn muốn và nhận báo cáo.

Giới thiệu Playwright-Lighthouse

Bây giờ chúng ta có thể đặt tất cả các mảnh vào câu đố.
Chúng tôi sẽ sử dụng ngọn hải đăng để khởi chạy đánh giá chất lượng và nhà viết kịch điều hướng qua các trang và nhà viết kịch-ngọn hải đăng sẽ đóng vai trò như chất keo gắn hai điều này lại với nhau.

Chiến lược là điều hướng trang thông qua ứng dụng web và sau đó gửi phiên bản của trang này cho kiểm toán viên hải đăng.

Cài đặt gói từ NPM trước:

npm install playwright-lighthouse

Chúng tôi đã điều hướng đến trang tổng quan, chuyển phiên bản trang cho người kiểm tra hải đăng và xác định các ngưỡng cho hiệu suất, khả năng tiếp cận và các phương pháp hay nhất là 90 mỗi ngưỡng.

Bây giờ, hãy chạy tập lệnh này:

node all-together.js

-------- playwright lighthouse audit reports --------
c:\workspace-vscode\lighthouse-tutorial\node_modules\playwright-lighthouse\src\audit.js:79
throw new Error(label);
^
Error: playwright lighthouse - Some thresholds are not matching the expectations.
performance record is 71 and is under the 90 threshold
accessibility record is 55.00000000000001 and is under the 90 threshold
best-practices record is 83 and is under the 90 threshold

Bây giờ chúng ta hãy chuyển đến báo cáo HTML, nó sẽ nằm dưới${current_dir}/lighthouse

Ôi không!

Như bạn có thể thấy, ngọn hải đăng được thực thi trên trang đăng nhập chứ KHÔNG phải trên trang bảng điều khiển.

Điều đó xảy ra bởi vì khi ngọn hải đăng được khởi động, nó sẽ mở ra một phiên bản trình duyệt mới và tất cả các chi tiết xác thực quan trọng, cookie và bộ nhớ đều bị mất!
Những gì chúng ta cần làm là tạo một trình duyệt bền bỉ, nơi lưu trữ được duy trì trong suốt quá trình thử nghiệm và điều này có thể dễ dàng đạt được nhờ API tuyệt vời của nhà viết kịch.

Vì vậy, hãy sửa tập lệnh:

Vì vậy, trước tiên, chúng tôi tạo ra một tạm thời, trong đó chúng tôi giữ tất cả các bộ nhớ liên quan.
Sau đó, chúng tôi gọi người viết kịch khởi chạyPers phù hợpContext để tạo bối cảnh trình duyệt liên tục, sau đó chúng tôi tạo một phiên bản trang ngoài ngữ cảnh.

Phần còn lại giống như chúng tôi đã làm trước đó, chúng tôi đã chuyển trang bền bỉ cho người kiểm tra ngọn hải đăng và đưa ra quy trình đánh giá chất lượng.

Hãy chạy tập lệnh mới:

node all-together.js

-------- playwright lighthouse audit reports --------
c:\workspace-vscode\lighthouse-tutorial\node_modules\playwright-lighthouse\src\audit.js:79
throw new Error(label);
^
Error: playwright lighthouse - Some thresholds are not matching the expectations.
performance record is 19 and is under the 90 threshold
accessibility record is 67 and is under the 90 threshold
best-practices record is 75 and is under the 90 threshold

Tuyệt vời!

© Copyright 2021 - 2023 | vngogo.com | All Rights Reserved