แบบฝึกหัด: การใช้ Playwright ใน Visual Studio Code

เสร็จสมบูรณ์เมื่อ

ในส่วนก่อนหน้านี้ เราสํารวจแนวคิดหลักที่เกี่ยวข้องกับการกําหนดค่าการทดสอบ Playwright และข้อกําหนดการทดสอบ Playwright แต่เราใช้ Playwright Commandline (CLI) สําหรับการดําเนินการทดสอบและการดูรายงานของเรา

จะเกิดอะไรขึ้นถ้าเราสามารถดําเนินการได้ ภายในสภาพแวดล้อม Visual Studio Code ของเรา และมีกระบวนการโต้ตอบกับ ภาพ มากขึ้นสําหรับการเขียน การเรียกใช้ และการดีบัก การทดสอบของเรา

ด้วย การทดสอบ Playwright สําหรับส่วนขยาย Visual Studio Code คุณจะได้รับประสบการณ์สําหรับนักพัฒนาที่เหนือชั้น กว่าและคุณลักษณะการใช้เครื่องมือที่ไม่เหมือนใคร ซึ่งอาจทําให้วิธีที่คุณต้องการในการโต้ตอบกับตัวเรียกใช้การทดสอบ Playwright ลองเข้าไปดูและชมการแนะนํา

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

เอกสารประกอบ Playwright มีบทช่วยสอนที่ครอบคลุมพร้อมคําแนะนําวิดีโอที่เราแนะนําให้คุณดูในเวลาของคุณเอง ในบทเรียนนี้ เราพยายามทําตามชุดย่อยของแบบฝึกหัดเหล่านี้เพื่อให้คุณคุ้นเคยกับการใช้งาน

]D;]A;

ติดตั้งส่วนขยาย Playwright

ติดตั้งส่วนขยาย จาก Visual Studio Code Marketplace เมื่อติดตั้งแล้ว คุณควรเห็นไอคอนบีกเกอร์ทางด้านซ้ายของหน้าต่าง Visual Studio Code ของคุณดังที่แสดงในภาพหน้าจอ ให้สังเกตวิธีการที่ส่วนขยาย ตรวจหาและรวบรวมข้อกําหนดการทดสอบในโครงการของคุณโดยอัตโนมัติ

เรียกใช้การทดสอบ (ไม่มีหัว)

เมื่อต้องการเรียกใช้การทดสอบในลักษณะที่ไม่มีหัววัด (ไม่มีหน้าต่างเบราว์เซอร์) ตรวจสอบให้แน่ใจว่าไม่ได้เลือกตัวเลือกแสดงเบราว์เซอร์และแสดงตัวแสดงการติดตาม เลือกปุ่ม เล่น สีเขียวในบรรทัดที่ 3 ของไฟล์ example.spec.ts เพื่อเรียกใช้การทดสอบครั้งแรก คุณยังสามารถเลือกปุ่ม เล่น สีเทาในแถบด้านข้าง Test Explorer เพื่อเรียกใช้การทดสอบทั้งหมดในไฟล์หรือเพื่อเรียกใช้การทดสอบเฉพาะ

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

แสดงเบราว์เซอร์ (มุ่งหน้า)

ถ้าคุณต้องการเรียกใช้ในโหมด มุ่งหน้า ซึ่งหมายความว่าทําการทดสอบของคุณโดยเปิดหน้าต่างเบราว์เซอร์อยู่ คุณสามารถทําเครื่องหมายในกล่อง แสดงเบราว์เซอร์ ก่อนที่จะเรียกใช้การทดสอบ

Playwright เป็นผู้ใช้ที่เร็วมาก ซึ่งอาจทําให้การติดตามสิ่งที่เกิดขึ้นในการทดสอบยากเมื่อใช้แสดงเบราว์เซอร์ สําหรับการดีบัก เราขอแนะนําให้ใช้ตัวเลือกแสดงตัวแสดงการติดตาม

แสดงตัวแสดงการติดตาม (มุ่งหน้า)

เลือกกล่อง แสดงตัวแสดงการติดตาม และเลือกบนปุ่ม เล่น สีเขียวสําหรับการทดสอบครั้งที่สอง การดําเนินการนี้จะเปิดใช้หน้าต่างตัวแสดงการติดตาม ซึ่งจะแสดงวิชวลของการดําเนินการทดสอบ

ที่ด้านบน คุณจะเห็นไทม์ไลน์ของการทดสอบที่คุณสามารถวางเมาส์เหนือเพื่อดูสถานะของเบราว์เซอร์ หากต้องการเลือกช่วงเวลาเฉพาะที่จะโฟกัส ให้เลือกและลากไทม์ไลน์

ในแถบด้านข้างด้านซ้าย คุณสามารถดูการดําเนินการที่ดําเนินการในระหว่างการดําเนินการทดสอบได้ ถ้าคุณเลือกการดําเนินการ locator.click คุณจะเห็นจุดสีแดงบนปุ่ม เริ่มต้นใช้งาน ในสแนปช็อต DOM

ถัดไป เลือก การยืนยัน expect.toBeVisible และคุณจะเห็นสแนปช็อต DOM ของเราเปลี่ยนแปลงเพื่อแสดงหน้าการติดตั้งที่มีไฮไลต์บนหัวเรื่องที่เรากําลังยืนยัน เหนือสแนปช็อต DOM คุณสามารถเลือกปุ่ม ก่อน และ หลัง เพื่อดูสถานะของ DOM ก่อนและหลังการดําเนินการ

คุณสามารถเปิดสแนปช็อต DOM ไปยังหน้าต่างแยกต่างหากได้โดยการเลือกไอคอน ป็อปเอาท์ ที่มุมบนขวา ซึ่งจะเป็นประโยชน์ถ้าคุณต้องการตรวจสอบ DOM ในขณะที่ดีบักการทดสอบของคุณ

เมื่อพูดถึงการดีบัก คุณยังสามารถเลือกตัวค้นหาจากสแนปช็อต DOM โดยการเลือกปุ่ม เลือกตัวค้นหา ในบานหน้าต่างด้านล่าง จากนั้นวางเมาส์เหนือองค์ประกอบบนสแนปช็อต DOM เพื่อดูตัวค้นหาสําหรับองค์ประกอบนั้น การเลือกองค์ประกอบจะเพิ่มไปยังกล่อง Locator ที่ด้านล่างของตัวแสดงการติดตาม ซึ่งคุณสามารถแก้ไขก่อนที่จะคัดลอกไปยังคลิปบอร์ดของคุณได้

คุณสามารถสํารวจฟีเจอร์ที่เหลือของตัวดูการติดตามได้ด้วยตนเอง เช่น แท็บการโทรคอนโซลเครือข่าย และแหล่งที่มา

ดีบักการทดสอบ

สําหรับการดีบัก เราขอแนะนําให้เรียกใช้การทดสอบของคุณด้วยตัวเลือก แสดงตัวแสดงการติดตาม และใช้การติดตามของการทดสอบของคุณเพื่อให้เข้าใจสิ่งที่เกิดขึ้นได้ดียิ่งขึ้น

อย่างไรก็ตาม ด้วยส่วนขยาย Visual Studio Code คุณยังสามารถดีบักการทดสอบของคุณได้โดยตรงใน Visual Studio Code ดูข้อความข้อผิดพลาด สร้างจุดสั่งหยุด และดีบักการทดสอบของคุณแบบสด เรียนรู้เพิ่มเติมจากเอกสารประกอบ หรือดูวิดีโอต่อไปนี้เพื่อทําความเข้าใจเกี่ยวกับการสนับสนุนการดีบัก

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

CodeGen สร้างการทดสอบของคุณเมื่อคุณดําเนินการในเบราว์เซอร์ ทําให้วิธีที่ง่ายที่สุดในการเริ่มต้นการทดสอบสําหรับเวิร์กโฟลว์ที่ซับซ้อน

หากต้องการสร้างการทดสอบ ให้เลือกปุ่ม บันทึกใหม่ ในแถบด้านข้างการทดสอบใน Visual Studio Code การดําเนินการนี้จะเปิดหน้าต่างเบราว์เซอร์ที่คุณสามารถดําเนินการที่จะถูกบันทึกและกลายเป็นการทดสอบ นอกจากนี้ คุณจะสังเกตเห็นว่าไฟล์ใหม่ใน tests โฟลเดอร์ถูกสร้างขึ้นด้วยการทดสอบที่สร้างขึ้น

พิมพ์ URL ในหน้าต่างเบราว์เซอร์ และเริ่มดําเนินการกระทําแบบที่ผู้ใช้จะทํา คุณจะเห็นการดําเนินการที่บันทึกไว้ในไฟล์ทดสอบในรหัส VS

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

เรียนรู้เพิ่มเติมเกี่ยวกับการสร้างการทดสอบในวิดีโอต่อไปนี้

ขั้นตอนถัดไป

ในส่วนนี้ คุณได้เรียนรู้วิธีการใช้ส่วนขยาย Visual Studio Code เพื่อค้นหาและเรียกใช้การทดสอบ และวิธีการทํางานกับตัวแสดงการติดตามเพื่อรับประสบการณ์วิชวลเพิ่มเติมสําหรับการทดสอบการดีบัก

คุณยังได้เรียนรู้วิธีการที่ Visual Studio Code มีเครื่องมือมากขึ้นสําหรับการสร้างการทดสอบโดยใช้คุณลักษณะบันทึกการทดสอบใหม่ เลือกตัวค้นหา และบันทึกที่คุณลักษณะเคอร์เซอร์ ในตอนนี้ ถึงเวลา แล้วที่จะนํา การเรียนรู้พื้นฐานของ Playwright ของคุณไปใช้ในโครงการที่มีคําแนะนําเพื่อสร้างข้อกําหนดการทดสอบแบบ end-to-end สําหรับแอปตัวอย่างของเรา