หน้าต่างและป๊อปอัปใหม่ในอดีตเป็นปัญหาสำหรับวิศวกรทดสอบระบบอัตโนมัติ ในขณะที่ Selenium สามารถจัดการกับ windows ได้ แต่ผลลัพธ์อาจเป็นเรื่องที่ยุ่งยากเนื่องจากการโฟกัสของเบราว์เซอร์ เครื่องมือบางอย่างเช่น Cypress จงใจไม่อนุญาตให้มีการดำเนินการในหน้าต่างใหม่

นักเขียนบทละครของ Microsoft สร้างขึ้นโดยมีจุดประสงค์ที่ชัดเจนในการจัดการการโต้ตอบทางเว็บอย่างสง่างาม ไม่แปลกใจเลยที่หน้าต่างและป๊อปอัปนั้นง่ายต่อการจัดการโดยใช้ Playwright

บทช่วยสอนนี้จะให้รายละเอียดเกี่ยวกับวิธีการจับภาพหน้าต่างใหม่โดยใช้ Playwright และวิธียืนยันกับพวกเขา เราจะใช้หน้า Browser Windows ของ DemoQAเป็นฐาน

เริ่มต้นใช้งาน

คุณจะต้องติดตั้งแพ็คเกจต่อไปนี้โดยใช้ Pip หรือตัวจัดการแพ็คเกจที่คุณเลือก:

• นักเขียนบทละคร
• Pytest
• Pytest- นักเขียนบทละคร

การสร้างแบบทดสอบ

หน้า DemoQA Browser Windows มีปุ่มสามปุ่ม:

• แท็บใหม่
• หน้าต่างใหม่
• หน้าต่างใหม่พร้อมข้อความ

การเดินทางของผู้ใช้ของเราจะไปที่หน้าหน้าต่างเบราว์เซอร์เลือกปุ่มหน้าต่างใหม่จากนั้นตรวจสอบว่าหน้าต่างที่โหลดข้อความ

def test_new_browser_window(page):
    """Test that a new window may be opened.
:param page: A Playwright browser page
    """
    page.goto("https://www.demoqa.com/browser-windows")
    page.wait_for_selector("#windowButton")

บริบทที่จำเป็น

นักเขียนบทละครเปิดหน้าต่างใหม่ในสิ่งที่เรียกว่าบริบทเบราว์เซอร์ แต่ละเซสชันของนักเขียนบทละครเริ่มต้นด้วยลำดับชั้นของเบราว์เซอร์ -> บริบท -> เพจหรือเบราว์เซอร์ -> เพจขึ้นอยู่กับว่าบริบทถูกใช้หรือไม่

อาจมีเบราว์เซอร์ที่ไม่ซ้ำใคร (Chromium, Firefox หรือ Webkit) ในช่วงเวลาใดเวลาหนึ่ง อย่างไรก็ตามเบราว์เซอร์อาจมีหลายบริบทและหลายหน้าภายในแต่ละบริบท

การเปิดหน้าต่างใหม่ใน Playwright จะเพิ่มหน้าในบริบทเบราว์เซอร์ที่มีอยู่ ซึ่งหมายความว่าหน้าต่างใหม่ทั้งหมดภายในบริบทเฉพาะจะสืบทอดรายการเช่นสถานะการจัดเก็บและคุกกี้

กำลังเปิด Windows

การใช้รหัสต่อไปนี้เราสามารถจับภาพการเปิดหน้าต่างในเหตุการณ์เฉพาะเช่นการคลิกที่องค์ประกอบของหน้าหรือไปที่ URL ที่ต้องการ

ในกรณีทดสอบของเราการคลิก#windowButtonองค์ประกอบจะเปิดหน้าต่างใหม่ในบริบทเบราว์เซอร์

with page.context.expect_page() as window:
    page.click("#windowButton")
new_window = window.value

with context.expect_page() as window:
    page.click("#windowButton")
new_window = window.value

การเชื่อมโยงnew_windowกับผลลัพธ์ของwindow.valueทำให้เราสามารถดำเนินการกับเพจใหม่ได้เช่นการสร้าง Element Handle

heading = new_window.wait_for_selector("#sampleHeading")

visible = heading.is_visible()

หากหน้าต่างเปิดขึ้นโดยไม่มีจุดเริ่มต้นที่ชัดเจนเราสามารถจัดการได้ดังต่อไปนี้:

def handle_page(page):
    page.wait_for_load_state()
    print(page.url)
page.on("page", handle_page)

ทดสอบการชุบแข็ง

หน้าต่างใหม่มีโหนดข้อความที่อ่านว่า“ นี่คือหน้าตัวอย่าง” เราสามารถยืนยันได้ว่าข้อความภายในของโหนดตรงกับสตริงข้อความที่คาดไว้ การทดสอบของเราควรมีลักษณะดังต่อไปนี้เมื่อเสร็จสมบูรณ์:

def test_new_browser_window(page):
    """Test that a new window may be opened.
:param page: A Playwright browser page
    """
    window_text = "This is a sample page"
page.goto("https://www.demoqa.com/browser-windows")
    page.wait_for_selector("#windowButton")
with page.context.expect_page() as window:
        page.click("#windowButton")
new_window = window.value
    heading = new_window.wait_for_selector(
        "#sampleHeading"
    )
    visible = heading.is_visible()
    text = heading.inner_text()
assert visible and window_text in text

• pytest
• pytest --headful

ไดเรกทอรีของคุณควรมีลักษณะดังต่อไปนี้เมื่อจบบทช่วยสอนนี้:

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

การจัดการหน้าต่างใน Playwright ทำได้อย่างง่ายดาย เมื่อใช้expect_pageวิธีนี้เราสามารถดำเนินการกับหน้าต่างใหม่หรือเพียงแค่รอจนกว่าจะโหลด เมื่อนำเสนอแล้วเราสามารถใช้คลังคำยืนยันของ Playwright เพื่อให้แน่ใจว่าเส้นทางของผู้ใช้ของเราประสบความสำเร็จ

Jonathan Thompsonเป็นวิศวกรคุณภาพอาวุโสที่เชี่ยวชาญด้านการทดสอบอัตโนมัติ ปัจจุบันเขาอาศัยอยู่ใน Raleigh, NC กับภรรยาของเขาและ Goldendoodle ชื่อ Winston คุณสามารถเชื่อมต่อกับเขาบนLinkedInหรือติดตามเขาทาง Twitter ( @jacks_elsewhere ) หรือ Github ( ThompsonJonM )