การจัดการ Shadow DOM ใน Automated Browser Testing
Shadow DOM มอบ encapsulation จริงสำหรับ web component Style ไม่รั่วเข้า selector ไม่รั่วออก และ component internals ยังคง private design system ขนาดใหญ่ — Amazon Katal framework, Salesforce Lightning Web Components, Material Web Components — ใช้ Shadow DOM อย่างกว้างขวางเพราะ encapsulation นั้นทำให้ component คาดเดาได้และ portable
encapsulation เดิมนั้นทำให้ automated testing ยากด้วย selector ที่ทำงานบน regular DOM หยุดทำงานที่ shadow boundary test framework สร้างขึ้นก่อนที่ web component จะเป็น mainstream ไม่ได้คำนึงถึง shadow tree เป็น first-class concern และ documentation เกี่ยวกับเรื่องนี้มักสับสนเกี่ยวกับว่า behavior ใดใช้กับ framework ใด
Shadow DOM คืออะไรจากมุมมองการทดสอบ
ทุก shadow root สร้าง encapsulation boundary ที่ document-level query selector หยุดทำงาน ถ้า component ของคุณมีโครงสร้าง: <my-button> (shadow host) ที่มี <button class="internal-btn"> อยู่ใน shadow tree, document.querySelector('.internal-btn') จะ return null แม้ว่าคุณจะเห็น element ใน DevTools ก็ตาม
สิ่งที่ Playwright จัดการ และสิ่งที่ไม่ได้จัดการ
Playwright เจาะ shadow boundary อัตโนมัติสำหรับ selector strategy ส่วนใหญ่ ซึ่งเป็นสิ่งที่ทำให้แตกต่างจาก library การทดสอบในยุคก่อน ๆ Playwright traverse shadow tree อัตโนมัติ สิ่งที่ไม่ทำงาน: CSS selector ที่มี combinator ข้าม shadow boundary, Playwright locator ที่ใช้ innerHTML หรือ textContent คาดหวัง shadow-projected content