Viewport là gì?

Trình duyệt thu thập dữ liệu không bị rác cho phép tự động hóa chạy trong môi trường trình duyệt được quản lý, nơi các cài đặt viewport định hình bố cục trang và đầu ra được ghi lại.

Viewport là gì?

Viewport là vùng chữ nhật mà qua đó trình duyệt trình bày tài liệu. Trong trình duyệt máy tính để bàn thông thường, nó tương ứng với khu vực nội dung trang bên trong cửa sổ trình duyệt. Nội dung vượt ra ngoài viewport vẫn tồn tại trong tài liệu nhưng không trở nên hiển thị cho đến khi cuộn, phóng to, thay đổi kích thước hoặc một thay đổi bố cục khác đưa nó vào tầm nhìn.

Viewport không giống như độ phân giải màn hình, kích thước cửa sổ trình duyệt, kích thước chụp màn hình hoặc kích thước tài liệu. Các điều khiển trình duyệt tiêu thụ một phần của cửa sổ đầu đủ, tỷ lệ pixel thiết bị thay đổi ánh xạ giữa pixel CSS và pixel thiết bị, và một ảnh chụp màn hình toàn trang có thể ghi lại nội dung cao hơn rất nhiều so với viewport hiện tại.

Một định nghĩa chính xác giúp các nhóm chọn các công cụ và chẩn đoán các sự cố. Nếu các kỹ sư sử dụng một từ cho vài lớp, một vấn đề cookie có thể bị nhầm với một vấn đề trình duyệt, một sự không khớp viewport có thể bị nhầm với việc thiếu dữ liệu, và một kết nối điều khiển đóng có thể bị nhầm với trạng thái hồ sơ bị mất. Đặt tên cho ranh giới giúp sửa lỗi nhỏ hơn.

Cách mà Viewport Thay đổi Kết xuất

Cách mà Viewport Thay đổi Kết xuất có thể được hiểu như một chuỗi các chuyển tiếp trạng thái được điều khiển bởi trình duyệt và khách hàng tự động hóa. API chính xác có thể khác nhau, nhưng điều hướng, kết xuất, lưu trữ, nhập liệu, quan sát và dọn dẹp vẫn là những phần chịu tải.

Viewport bố cục

Viewport bố cục cung cấp khu vực tham chiếu được sử dụng bởi bố cục đáp ứng, truy vấn đa phương tiện, kích thước phần trăm và đơn vị tương ứng với viewport. Thay đổi nó có thể chọn một menu điều hướng, lưới hoặc mật độ nội dung khác.

Viewport bố cục nên có thể quan sát được trong sản xuất. Ghi lại cấu hình ảnh hưởng đến nó, ghi lại bằng chứng tại điểm mà trang đạt được trạng thái yêu cầu, và đóng tài nguyên một cách có chủ đích. Thực hành đó biến một phiên trình duyệt thành một hoạt động có thể giải thích thay vì một chuỗi chỉ hoạt động trên một máy.

Viewport trực quan

Viewport trực quan là phần hiện tại mà người dùng đang nhìn thấy. Phóng to và bàn phím trên màn hình có thể thu hẹp hoặc di chuyển khu vực trực quan trong khi viewport bố cục vẫn ổn định.

Viewport trực quan nên có thể quan sát được trong sản xuất. Ghi lại cấu hình ảnh hưởng đến nó, ghi lại bằng chứng tại điểm mà trang đạt được trạng thái yêu cầu, và đóng tài nguyên một cách có chủ đích. Thực hành đó biến một phiên trình duyệt thành một hoạt động có thể giải thích thay vì một chuỗi chỉ hoạt động trên một máy.

Tỷ lệ pixel thiết bị

Pixel CSS mô tả các tọa độ bố cục, trong khi pixel vật lý hoặc hình ảnh mô tả đầu ra raster. Tỷ lệ pixel thiết bị kết nối các không gian đó và ảnh hưởng đến kích thước chụp màn hình và độ sắc nét của hình ảnh.

Tỷ lệ pixel thiết bị nên có thể quan sát được trong sản xuất. Ghi lại cấu hình ảnh hưởng đến nó, ghi lại bằng chứng tại điểm mà trang đạt được trạng thái yêu cầu, và đóng tài nguyên một cách có chủ đích. Thực hành đó biến một phiên trình duyệt thành một hoạt động có thể giải thích thay vì một chuỗi chỉ hoạt động trên một máy.

Thuật ngữ trình duyệt dễ sử dụng khi nó giữ liên kết với các định nghĩa chính. Từ điển viewport MDN mô tả khái niệm cốt lõi trực tiếp nhất, Khái niệm viewport MDN định nghĩa một điều khiển hoặc ranh giới kiến trúc láng giềng, và Thông số kỹ thuật WebDriver W3C cung cấp một quan điểm thực hiện thứ hai. Những nguồn này mô tả các tiêu chuẩn và hành vi của trình duyệt; lựa chọn sản phẩm vẫn phụ thuộc vào quy trình làm việc, mô hình bảo mật và môi trường mục tiêu.

Viewport, Cửa sổ, Màn hình và Tài liệu

Viewport, Cửa sổ, Màn hình và Tài liệu tách biệt các thuật ngữ mà thường được kết hợp trong cuộc thảo luận thường ngày. Bảng tập trung vào quyền sở hữu và hiệu ứng hoạt động thay vì tên API cụ thể cho thương hiệu.

Các danh mục này có thể đồng tồn tại trong một kiến trúc. Một phân bổ đám mây có thể chạy một quy trình Chromium không có đầu, tạo một ngữ cảnh cách ly, mở nhiều trang, áp dụng một vùng nhìn cho mỗi trang, và đính kèm một hồ sơ liên tục. Kiến trúc chỉ có thể hiểu nếu mỗi danh từ giữ công việc của nó.

Các sử dụng phổ biến của một vùng nhìn

Một vùng nhìn hữu ích khi ranh giới cụ thể của nó giảm thiểu rủi ro vận hành hoặc làm cho hành vi của trình duyệt có thể đo lường được. Những sử dụng phổ biến này cho thấy yêu cầu mà mỗi mẫu thực sự đáp ứng.

Mô hình trạng thái phía sau một vùng nhìn

Một quy trình làm việc vùng nhìn đáng tin cậy tách biệt cấu hình, trạng thái thời gian chạy, trạng thái trang web, và chứng cứ. Cấu hình là những gì người vận hành chọn trước khi khởi động: bản xây dựng trình duyệt, chế độ khởi động, ngôn ngữ địa phương, múi giờ, quyền hạn, vùng nhìn và tuyến đường mạng. Trạng thái thời gian chạy bao gồm quy trình đã được phân bổ, ngữ cảnh, trang, bộ nhớ, kết nối mở và kênh điều khiển. Trạng thái trang web bao gồm cookie, lưu trữ nguồn gốc, hồ sơ tài khoản phía máy chủ và tài liệu hiện đang được hiển thị. Chứng cứ là bản ghi được sử dụng để giải thích những gì đã xảy ra.

Các lớp này có tuổi thọ khác nhau. Một trang có thể đóng trong khi cookie ngữ cảnh của nó vẫn còn. Một ngữ cảnh có thể đóng trong khi một hồ sơ liên tục vẫn tồn tại trên ổ đĩa. Một kết nối điều khiển từ xa có thể biến mất trong khi dịch vụ vẫn sở hữu trình duyệt trong một khoảng thời gian ngắn. Một phiên đăng nhập trang web có thể vẫn hợp lệ sau khi phiên tự động hóa kết thúc. Do đó, dọn dẹp cần một hành động rõ ràng cho mỗi lớp mà quy trình làm việc đã tạo ra.

Quyền sở hữu trạng thái cũng kiểm soát sự song song. Hai trang trong một ngữ cảnh có thể cố ý chia sẻ xác thực, nhưng hai công việc độc lập thường không nên. Hai ngữ cảnh trong một trình duyệt có thể cách ly cookie trong khi cạnh tranh cho cùng một nguồn tài nguyên quy trình. Hai lần khởi động trình duyệt liên tục không nên chỉ vào cùng một thư mục dữ liệu người dùng hoạt động. Đơn vị an toàn của độ đồng thời được xác định bởi cả cách ly và giới hạn tài nguyên chia sẻ.

Sử dụng các định danh tương quan mà không phơi bày bí mật điều khiển. Một ID công việc có thể kết nối nhật ký ứng dụng, sự kiện trình duyệt, ảnh chụp màn hình và đầu ra cuối cùng. Một điểm cuối phiên, giá trị cookie, tiêu đề xác thực, hoặc kho lưu trữ hồ sơ không bao giờ nên đảm nhiệm vai trò đó vì bất kỳ ai đọc nhật ký có thể truy cập vào trình duyệt hoặc tài khoản. Xóa giá trị tại biên giới ghi nhật ký thay vì dựa vào dọn dẹp sau đó.

Khả năng quan sát cho vùng nhìn

Khả năng quan sát nên trả lời bốn câu hỏi: môi trường nào đã chạy, trình duyệt đã thấy gì, hành động nào mà bộ điều khiển đã gửi, và tại sao quy trình làm việc coi nhiệm vụ đã hoàn tất. Một bản ghi sự kiện hữu ích bao gồm một dấu thời gian, ID tương quan, URL trang sau khi điều hướng, tên hành động, các tham số không bí mật, thời gian, kết quả và phân loại lỗi ngắn gọn. Nó tránh nội dung trang trừ khi nội dung đó là chứng cứ cần thiết.

Chọn các di sản theo chế độ thất bại. Các sự kiện mạng giúp khi một tài nguyên bị chặn hoặc điều hướng lại. Một ảnh chụp DOM giúp khi phần tử dự kiến bị thiếu hoặc khác cấu trúc. Một ảnh chụp màn hình giúp khi một lớp phủ che khuất một điều khiển, thay đổi bố cục đáp ứng, hoặc phông chữ làm thay đổi hình học. Dữ liệu siêu dữ liệu lưu trữ giúp khi trạng thái đăng nhập biến mất. Một bản ghi giúp khi thứ tự của nhiều tương tác là quan trọng, nhưng nó nên được giữ lại một cách thận trọng vì nó có thể ghi lại thông tin nhạy cảm.

Kiểm tra hoàn thành thuộc về bên cạnh hành động mà chúng xác thực. Sau khi điều hướng, xác minh một URL, phản hồi, hoặc dấu trang. Sau khi nhập, xác minh giá trị trường hoặc trạng thái kết quả. Sau khi nhấp, xác minh lộ trình, hộp thoại, yêu cầu mạng, hoặc sự thay đổi tài liệu mà nó nên gây ra. Sau khi trích xuất, xác thực các trường và kiểu dữ liệu cần thiết. Một lệnh đã trả về mà không có ngoại lệ không phải là bằng chứng rằng kết quả nhìn thấy của người dùng đã xảy ra.

Bảng điều khiển hoạt động nên phân biệt giữa sức khỏe sản phẩm và biến thiên trang mục tiêu. Các lỗi phân bổ trình duyệt, lỗi kênh điều khiển, sự cố trình tạo, phản hồi HTTP mục tiêu, trạng thái rỗng ở cấp ứng dụng, và các sự không khớp của bộ chọn cần các nhãn khác nhau. Kết hợp chúng thành một tỷ lệ thất bại chung ẩn lớp mà cần chú ý và khuyến khích các thay đổi rộng lớn cho một vấn đề hẹp.

Giới hạn và chế độ thất bại

Một vùng nhìn có kích thước máy tính để bàn với tác nhân người dùng di động không phải là một môi trường di động trung thành. Các trang đáp ứng xem xét nhiều tín hiệu, và một số ứng dụng quan sát hỗ trợ cảm ứng, tỷ lệ thiết bị, hướng, hoặc gợi ý của khách hàng. Để có các bản chụp tái tạo được, hãy ghi lại cấu hình giả lập hoàn chỉnh và đợi các thay đổi bố cục, phông chữ, và nội dung liên quan trước khi chụp màn hình.

Hầu hết các lỗi trở nên dễ phân loại hơn khi chứng cứ được ghi lại ở lớp đúng. Một phản hồi điều hướng giải thích hành vi vận chuyển và máy chủ. DOM giải thích cấu trúc hiển thị. Một ảnh chụp màn hình giải thích bố cục có thể nhìn thấy. Kiểm tra bộ nhớ giải thích cookies và trạng thái nguồn. Nhật ký phiên làm rõ vòng đời. Không có bất kỳ vật phẩm nào trong số này có thể thay thế cho tất cả những cái khác.

Các độ trễ cố định là một tín hiệu hoàn thành yếu vì các trang không hoàn thành trong một khoảng thời gian chung. Thích một điều kiện liên quan đến nhiệm vụ: một lộ trình ổn định, một tiêu đề xuất hiện, một yêu cầu đã biết hoàn thành, một điều khiển được bật, hoặc dữ liệu mong đợi tồn tại. Đặt thời gian giới hạn để một điều kiện thiếu kết thúc với chứng cứ hữu ích.

Phát triển, D staging, và Sản xuất

Phát triển ưu tiên khả năng nhìn thấy và chẩn đoán nhanh chóng. Chạy một trường hợp đại diện nhỏ, tiết lộ trạng thái trình duyệt và giữ ảnh chụp màn hình hoặc dấu vết gần với mã. D staging nên phản ánh cấu hình sản xuất trong khi sử dụng các tài khoản và mục tiêu có kiểm soát. Sản xuất ưu tiên đầu vào xác định, quyền hạn tối thiểu, sử dụng tài nguyên giới hạn, telemetry có cấu trúc và dọn dẹp tự động. Việc di chuyển qua các môi trường này nên thay đổi cấu hình, không viết lại logic điều hướng.

Kiểm soát phiên bản áp dụng cho hành vi trình duyệt cũng như mã ứng dụng. Ghim các phiên bản trình duyệt và client tự động tương thích nơi nền tảng cho phép, xem ghi chú phát hành trước khi nâng cấp, và chạy một bộ tương thích có mục tiêu. Bộ này nên bao gồm điều hướng, bộ nhớ, đầu vào, tải xuống nếu được sử dụng, ảnh chụp màn hình, và bất kỳ tính năng giao thức nào mà quy trình làm việc phụ thuộc. Kiểm tra tiêu đề trang qua sẽ quá nông cho một lần nâng cấp trình duyệt.

Lập kế hoạch dung lượng bắt đầu từ trang thay vì một con số trình duyệt-cho-máy chung. Đo bộ nhớ, CPU, lưu lượng mạng, thời gian trang, và kích thước vật phẩm cho công việc đại diện. Các ứng dụng nặng ở phía khách, video, canvas lớn, và nhiều trang mở thay đổi hồ sơ chi phí. Đặt độ đồng thời từ việc sử dụng tài nguyên quan sát và giới hạn dịch vụ, sau đó để lại không gian trống để một trang đắt tiền không làm mất cân bằng các phiên không liên quan.

Dọn dẹp sản xuất nên là không thay đổi: gọi nó sau một lỗi một phần vẫn nên đóng các trang, ngữ cảnh, phiên, và tệp tạm tồn tại. Nhật ký dọn dẹp nên xác nhận nguồn tài nguyên nào đã được phát hành mà không in ra giá trị bí mật của chúng. Các hồ sơ thường trực được xử lý riêng vì việc xóa một hồ sơ có chủ đích bền vững không phải là dọn dẹp công việc thông thường.

Bảo mật, Quyền riêng tư và Sử dụng Có trách nhiệm

Môi trường trình duyệt có thể chứa thông tin xác thực, dữ liệu cá nhân, tải xuống, và nội dung chỉ xuất hiện cho tài khoản đã được ủy quyền. Áp dụng quyền tối thiểu cho các tài khoản và người vận hành, giữ bí mật ra khỏi các tệp nguồn, hạn chế quyền truy cập vào các bản ghi, và xóa trạng thái theo chính sách giữ gìn tài liệu. Một vật phẩm gỡ lỗi tiện lợi có thể trở thành một lỗ hổng dữ liệu nếu nó được chia sẻ mà không kiểm tra.

Tự động hóa không nên được sử dụng để truy cập thông tin riêng tư, bí mật, hoặc hạn chế mà không có sự cho phép. Xem xét các điều khoản trang web, hướng dẫn robot nếu có thể, nghĩa vụ hợp đồng, và các luật điều chỉnh dữ liệu và quyền tài phán. Khả năng kỹ thuật không thiết lập quyền hạn.

Cấu hình liên quan đến dấu vân tay cần được chú ý thêm. Các đặc điểm của trình duyệt như ngôn ngữ, hiển thị, mã hóa, phông chữ và cài đặt có thể góp phần vào việc nhận diện, như được mô tả trong các tiêu chuẩn và hướng dẫn quyền riêng tư đã được trích dẫn. Sử dụng các điều khiển như vậy cho tính tương thích, cách ly và thử nghiệm đã được phê duyệt; không sử dụng chúng để giả mạo một người hoặc che giấu hoạt động lạm dụng.

Cách chọn cấu hình phù hợp

Chọn kích thước viewport từ các trạng thái sản phẩm mà bạn cần xác minh, không từ một danh sách các thiết bị thời thượng. Kiểm tra ngay dưới và ngay trên các điểm phân cách quan trọng, bao gồm ít nhất một trạng thái hẹp và một trạng thái rộng, và kiểm tra sự tràn thay vì giả định rằng một ảnh chụp màn hình thành công có nghĩa là trang có thể sử dụng.

• Bắt đầu với kết quả mong muốn. Xác định trạng thái trang, dữ liệu, tương tác, hoặc chứng cứ mà quy trình làm việc phải tạo ra.
• Chọn giới hạn trạng thái nhỏ nhất. Một trang, ngữ cảnh, phiên, hoặc hồ sơ không nên sống lâu hơn hoặc chia sẻ nhiều dữ liệu hơn những gì nhiệm vụ yêu cầu.
• Làm cho các đầu vào môi trường rõ ràng. Phiên bản trình duyệt, ngôn ngữ, múi giờ, viewport, quyền hạn, và lộ trình mạng có thể thay đổi kết quả.
• Thiết kế khả năng quan sát trước khi mở rộng. Ghi lại đủ chứng cứ để phân biệt lỗi mạng, lỗi hiển thị, lỗi chọn lọc, lỗi bộ nhớ và lỗi vòng đời.
• Đóng và dọn dẹp có chủ ý. Giải phóng tài nguyên từ xa, xóa trạng thái tạm thời và chỉ giữ lại các vật phẩm đã được phê duyệt.

The Tài liệu Trình duyệt G scraping không có gì mô tả bề mặt phiên đã quản lý, trong khi Trang sản phẩm Trình duyệt G scraping không có gì giải thích vai trò của sản phẩm trong tự động hóa trình duyệt đám mây. Những tham chiếu sản phẩm này bổ sung cho các liên kết tiêu chuẩn thay vì thay đổi định nghĩa chung.

Kết luận

Một Viewport có ích nhất như một thuật ngữ kiến trúc chính xác, không phải là một nhãn tiếp thị. Giá trị của nó đến từ trạng thái mà nó sở hữu, hành vi của trình duyệt mà nó cho phép, và ranh giới hoạt động mà nó tạo ra. Giữ các thuộc tính đó rõ ràng và sự lựa chọn giữa thực thi cục bộ, từ xa, bền vững, cách ly, có thể nhìn thấy và không có người chăm sóc trở nên đơn giản.

Đối với công việc sản xuất, kết hợp định nghĩa đó với chứng cứ cụ thể: một trạng thái khởi đầu đã biết, một điều kiện hoàn thành có ý nghĩa, nhật ký được bảo vệ, và dọn dẹp có chủ ý. Sự kết hợp đó làm cho tự động hóa trình duyệt dễ dàng hơn để xem xét, gỡ lỗi, và duy trì.