Khung nội tuyến (thường được gọi là iframe) được sử dụng để hiển thị nội dung của bên thứ 3 hoặc nhúng các trang mới vào nội dung của trang web. Trong thế giới tự động hóa thử nghiệm, iframe có thể khó hoạt động.

Selenium yêu cầu một kỹ sư sử dụng switch_tophương pháp thay đổi tiêu điểm của người lái vào chính khung. Sau khi thực hiện xong các hành động, trình điều khiển cần được tập trung lại vào trang chính đang sử dụng switch_to.default_content(). Mặc dù đây không phải là một quy trình làm việc khó khăn, nhưng chắc chắn có thể gặp rắc rối khi tiếp tục chuyển đổi giữa các khung hình bất cứ khi nào cần thực hiện một hành động.

Cypress không xử lý iframe nguyên bản. Điều này là do cytiền tố được sử dụng trong tất cả các lệnh Cypress sẽ đi ngang qua DOM cho đến khi định #documentvị được a. Sau khi xác định vị trí, truyền tải sẽ kết thúc. Cần có mã tùy chỉnh (hoặc plugin cypress-iframe ) để sử dụng Cypress với iframe.

Mặt khác, Playwright làm việc với iframe đơn giản và trực quan. Trong hướng dẫn này, chúng ta sẽ học cách sử dụng Playwright với cả iframe thông thường và iframe lồng nhau. Chúng tôi sẽ sử dụng các trang Khung DemoQA và Khung lồng nhau làm trọng tâm cho các thử nghiệm của chúng tôi.

Bắt đầu

Bạn sẽ cần cài đặt các gói sau cho hướng dẫn này:

• Pytest
• Nhà viết kịch

Phương pháp chọn

Playwright cung cấp cho các kỹ sư ba tùy chọn để chọn iframe:

• element_handle.content_frame ()
• page.frame ()
• page.frames [i]

Các page.frames[i]bất động sản nên được sử dụng trong trường hợp một iframe có thuộc tính không duy nhất hoặc yếu tố phụ huynh. Thuộc tính sẽ liệt kê tất cả các khung hoạt động trên trang có thể được lập chỉ mục cho một khung cụ thể. Tôi không khuyên bạn nên sử dụng phương pháp này trừ khi bạn không có quyền truy cập vào mã nguồn ứng dụng và không thể sử dụng hai phương pháp trước đó.

Tập trung vào iframe

Trang DemoQA Frames chứa hai iframe, một ở giữa bên trái của trang và một ở dưới cùng bên trái.

Các iframe trên trang DemoQA Frames không có urlthuộc tính duy nhất , cũng không có namethuộc tính đặc trưng . Chúng tôi sẽ sử dụng element_handle.content_frame()phương pháp để định vị chúng vì chúng có các bộ chọn duy nhất cho các phần tử mẹ của chúng.

Bây giờ chúng ta có quyền truy cập vào khung đầu tiên trên trang. Các khẳng định của Playwright có thể được sử dụng với ElementHandles frame_onevà headingđể viết các khẳng định Pytest.

Khung lồng nhau

Playwright cung cấp một phương pháp bổ sung để chọn khung trong iframe hiện có bằng cách sử dụng thuộc frame.child_frame[i]tính. Thuộc tính trả về danh sách tất cả các khung con trong iframe trên trang. Tương tự như thuộc page.frames[i]tính, điều này hữu ích khi iframe con không có thuộc tính namehoặc urlthuộc tính duy nhất hoặc phần tử mẹ có chiến lược định vị duy nhất.

Iframe con trên trang DemoQA Nested Frames không có bất kỳ chiến lược định vị duy nhất nào, vì vậy chúng tôi phải sử dụng thuộc frame.child_frame[i]tính để chọn nó.

Khung nội tuyến con chứa một bodyphần tử và một pphần tử duy nhất có văn bản “Khung nội tuyến con”. Chúng ta có thể sử dụng điều này để tạo các khẳng định của Playwright nhằm xây dựng các tuyên bố khẳng định Pytest.

xác minh

Các bài kiểm tra trên có thể được chạy trong thiết bị đầu cuối của bạn bằng các lệnh sau (nếu sử dụng pytest-playwright):

• pytest cho một cuộc chạy không đầu
• pytest --headful cho đầu óc

browser = {browser_type}.launch(headless=False)

Thư mục của bạn sẽ giống như sau khi hoàn thành hướng dẫn này:

tests
    |__ test_frames.py
.gitignore
README.md
requirements.txt

Playwright cho phép các kỹ sư viết mã kiểm tra gọn gàng và dễ đọc để tìm và thực hiện hành động chống lại iframe. Không giống như các đối thủ cạnh tranh của Playwright trong không gian tự động hóa, các kỹ sư không cần phải viết mã tùy chỉnh hoặc theo dõi tiêu điểm của trình điều khiển khi làm việc với các phần tử khung nội tuyến.

Jonathan Thompson là Kỹ sư chất lượng cao chuyên về tự động hóa thử nghiệm. Anh hiện đang sống ở Raleigh, NC với vợ và một Goldendoodle tên là Winston. Bạn có thể kết nối với anh ấy trên LinkedIn hoặc theo dõi anh ấy trên Twitter ( @jacks_elsewhere ) hoặc Github ( ThompsonJonM ).