Chrome DevTools cho các tác nhân cho phép tác nhân của bạn xác minh bố cục thích ứng, kiểm thử các API nhận biết vị trí và mô phỏng nhiều tốc độ CPU hoặc mạng. Sử dụng các công cụ này để xác định các trường hợp đặc biệt và tự động hoá quy trình kiểm tra hiệu suất một cách hiệu quả hơn.
Các tính năng mô phỏng này hoạt động với những công cụ khác cho phép tác nhân phần mềm của bạn tương tác với trang web của bạn, chẳng hạn như nhấp vào các phần tử, điền vào biểu mẫu và điều hướng các trang.
Bạn có thể mô phỏng những thứ sau:
- Khung nhìn và tác nhân người dùng: Mô phỏng kích thước màn hình và giá trị nhận dạng thiết bị cụ thể.
- Vị trí địa lý: Giả mạo toạ độ vị trí để kiểm thử các API nhận biết vị trí.
- Mạng và CPU: Điều tiết các điều kiện mạng và tốc độ CPU để mô phỏng các giới hạn về hiệu suất trong thực tế.
- Bảng phối màu: Chuyển đổi giữa chế độ sáng và tối.
Khi sử dụng tính năng mô phỏng, hãy lưu ý những điều sau:
- Hỗ trợ thiết bị: Trợ lý của bạn có thể mô phỏng mọi thiết bị trong danh sách
KnownDevicescủa Puppeteer. Trong đó có cả việc mô phỏng các sự kiện chạm cho khung hiển thị trên thiết bị di động. - Hành vi của công cụ kết xuất trình duyệt: Mặc dù công cụ này mô phỏng các đặc điểm của thiết bị, nhưng không mô phỏng các công cụ kết xuất trình duyệt không phải Chromium hoặc các hệ điều hành khác. Tác nhân của bạn luôn thực thi trong Chrome trên hệ điều hành hiện tại.
Các trường hợp sử dụng tính năng mô phỏng người dùng
Hướng dẫn tác nhân của bạn mô phỏng các môi trường và xác minh giao diện người dùng cho bạn, thay vì tự điều chỉnh kích thước trình duyệt, giả mạo IP hoặc điều chỉnh tốc độ mạng sau mỗi lần thay đổi mã.
Tích hợp hoạt động mô phỏng vào quy trình phát triển bằng các quy trình sau.
Lặp lại thiết kế đáp ứng
Các mẫu điều hướng thường thay đổi đáng kể giữa các hệ số hình dạng của thiết bị di động và máy tính. Khi tạo ứng dụng, bạn có thể hướng dẫn tác nhân phần mềm xác minh rằng các thành phần mà tác nhân phần mềm vừa viết hiển thị chính xác và cung cấp cùng một nội dung trên các thiết bị.
Câu lệnh mẫu:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn mở một cửa sổ Chrome, chuyển đến trang, bắt đầu mô phỏng và so sánh các mục trên cả hai khung hiển thị. Thao tác này xác nhận rằng chế độ xem trên thiết bị di động (Trình đơn bánh hamburger) và chế độ xem trên máy tính (Tiêu đề) chứa các đường liên kết dự kiến.
Xác thực lượt tương tác trên nhiều khung hiển thị
Bố cục bị hỏng trong quá trình tương tác, không chỉ trong CSS. Ảnh chụp màn hình tĩnh thường bỏ sót các lỗi xảy ra khi người dùng thực sự chạm vào giao diện người dùng. Bạn có thể giao cho tác nhân phần mềm của mình nhiệm vụ kiểm thử các luồng tương tác cụ thể trên nhiều khung nhìn để phát hiện các lỗi chức năng ẩn.
Câu lệnh mẫu:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
Ví dụ về quá trình thực thi tác nhân: Tác nhân của bạn nhập một cụm từ tìm kiếm và đổi kích thước màn hình thành từng kích thước trong số 3 kích thước. Trong ví dụ này, tác nhân của bạn nhận thấy rằng trên máy tính bảng và thiết bị di động, thanh tìm kiếm sẽ mở rộng để lấp đầy toàn bộ chiều rộng của tiêu đề, che khuất đường liên kết Đăng nhập.
Tạo mẫu các tính năng nhận biết vị trí
Việc kiểm thử các API dựa vào vị trí thực tế của người dùng (chẳng hạn như tìm kiếm "Gần tôi" hoặc công cụ định vị cửa hàng) thường yêu cầu bạn ghi đè cảm biến theo cách thủ công. Giờ đây, bạn có thể hướng dẫn tác nhân của mình giả mạo vị trí địa lý cụ thể để xác minh logic giao diện người dùng và logic phụ trợ một cách trơn tru.
Câu lệnh mẫu:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
Ví dụ về việc thực thi tác nhân: Tác nhân của bạn chuyển đến trang web, tìm kiếm Berlin, sau đó chèn động toạ độ vĩ độ và kinh độ cụ thể để mô phỏng Paris, trước khi tương tác với tính năng Sử dụng vị trí của tôi để đảm bảo các cửa hàng phù hợp xuất hiện.