Chrome DevTools cho 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. Hãy 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á quá 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 các công cụ khác cho phép tác nhân 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à di chuyển trên các trang.
Bạn có thể mô phỏng những nội dung sau:
- Khung hiển thị và tác nhân người dùng: Mô phỏng các kích thước màn hình và mã 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 chỉnh các điều kiện mạng và tốc độ CPU để mô phỏng các hạn chế về hiệu suất trong thế giới thực.
- Bảng phối màu: Chuyển đổi giữa chế độ sáng và chế độ 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ị: Tác nhân của bạn có thể mô phỏng mọi thiết bị trong danh sách Puppeteer's
KnownDevices. Điều này bao gồm 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ụ 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ụ 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 ở 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 môi trường và xác minh giao diện người dùng cho bạn, thay vì tự động đổi kích thước trình duyệt, giả mạo IP hoặc điều chỉnh mạng sau mỗi lần thay đổi mã.
Tích hợp tính năng mô phỏng vào quy trình phát triển của bạn bằng các quy trình công việc này.
Lặp lại thiết kế thích ứng
Các mẫu điều hướng thường thay đổi đáng kể giữa các hệ số hình thức trên thiết bị di động và máy tính. Khi xây dựng ứng dụng, bạn có thể hướng dẫn tác nhân của mình xác minh rằng các thành phần mà tác nhân vừa viết sẽ 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ị.
Ví dụ về câu lệnh:
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ị. Tác nhân này xác nhận rằng khung hiển thị trên thiết bị di động (Trình đơn bánh hamburger) và khung hiển thị trên máy tính (Tiêu đề) chứa các đường liên kết dự kiến.
Xác thực cá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 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 hiển thị để phát hiện các lỗi chức năng ẩn.
Ví dụ về câu lệnh:
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 phát hiệ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 đề, làm 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ụ tìm cửa hàng) thường yêu cầu bạn phải 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 các vị trí địa lý cụ thể để xác minh giao diện người dùng và logic phụ trợ một cách dễ dàng.
Ví dụ về câu lệnh:
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ề quá trình 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 đó tự động chèn các 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 chính xác được điền sẵn.