การทดสอบแบบฟอร์มและการนำทาง
ทดสอบการส่งแบบฟอร์ม การเปลี่ยนเส้นทาง และลำดับการใช้งานของผู้ใช้หลายหน้าแบบครบวงจร
การทดสอบแบบฟอร์มและการนำทาง เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การส่งแบบฟอร์ม
กรอกข้อมูลนำเข้าและส่งแบบฟอร์ม จากนั้นยืนยันผลลัพธ์
await page.getByLabel("Email").fill("a@b.com");
await page.getByRole("button", { name: "Submit" }).click();
await expect(page).toHaveURL("/dashboard");ข้อผิดพลาดจากการตรวจสอบ
ทดสอบว่าข้อมูลนำเข้าที่ไม่ถูกต้องทำให้เกิดข้อความแสดงข้อผิดพลาด
await page.getByRole("button", { name: "Submit" }).click();
await expect(page.getByText("Email required")).toBeVisible();ข้อผิดพลาดฝั่งเซิร์ฟเวอร์
จำลอง API หรือเตรียมข้อมูลในฐานข้อมูลเพื่อเรียกใช้เส้นทางการตรวจสอบฝั่งเซิร์ฟเวอร์
ลำดับการเปลี่ยนเส้นทาง
หลังจากเข้าสู่ระบบ ให้ยืนยัน URL ใหม่และองค์ประกอบที่มีเฉพาะในหน้าปลายทาง
การนำทางเบราว์เซอร์
ใช้ page.goBack() และ page.goForward() เพื่อทดสอบประวัติการนำทาง
คุกกี้และการยืนยันตัวตน
เข้าสู่ระบบเพียงครั้งเดียวและนำสถานะกลับมาใช้ซ้ำด้วย storageState เพื่อให้ชุดการทดสอบทำงานเร็วขึ้น
CSRF
ระบบป้องกัน CSRF ในตัวของ SvelteKit จะจัดการให้โดยอัตโนมัติเมื่อใช้การส่งแบบฟอร์มจริง
การเพิ่มประสิทธิภาพแบบก้าวหน้า
ทดสอบว่าแบบฟอร์มยังทำงานได้แม้ปิดใช้งาน JavaScript โดยสลับการตั้งค่าเบราว์เซอร์
แบบฟอร์มหลายขั้นตอน
ใช้ Page Object เพื่อรวบรวมขั้นตอนต่าง ๆ ไว้ด้วยกัน และยืนยันสถานะระหว่างทางเมื่อจำเป็น
การจำลองเครือข่าย
ดักจับการเรียก API ด้วย page.route() เพื่อให้การทดสอบมีผลลัพธ์แน่นอน
await page.route("**/api/items", route => route.fulfill({ json: [] }));การถดถอยด้านภาพ
บันทึกภาพหน้าสำคัญหลังการส่งแบบฟอร์ม เพื่อจับการเปลี่ยนแปลงส่วนติดต่อผู้ใช้ที่ไม่ตั้งใจ
ตรวจสอบอย่างรวดเร็ว
คุณจะนำสถานะการเข้าสู่ระบบกลับมาใช้ซ้ำในการทดสอบต่าง ๆ ได้อย่างไร
สรุปทบทวน
ทดสอบลำดับการใช้งานของผู้ใช้ทั้งหมด ได้แก่ แบบฟอร์ม การนำทาง และสถานะข้อผิดพลาด ใช้การจำลองและ storageState เพื่อให้ชุดการทดสอบรวดเร็วและเชื่อถือได้
คำถามที่พบบ่อย
บทเรียน “การทดสอบแบบฟอร์มและการนำทาง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทดสอบแบบฟอร์มและการนำทาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบแบบฟอร์มและการนำทาง”
ทดสอบการส่งแบบฟอร์ม การเปลี่ยนเส้นทาง และลำดับการใช้งานของผู้ใช้หลายหน้าแบบครบวงจร คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การทดสอบแบบฟอร์มและการนำทาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Playwright ใน SvelteKit
- การเขียนการทดสอบการโต้ตอบกับหน้า
- การทดสอบแบบฟอร์มและการนำทาง
- การผสานรวม CI