Vue Academy · บทเรียน

การทดสอบตั้งแต่ต้นจนจบ

ตรวจสอบกระบวนการใช้งานทั้งหมดด้วยการทดสอบตั้งแต่ต้นจนจบ

บทเรียน 3 จาก 313 ขั้นตอน

การทดสอบตั้งแต่ต้นจนจบ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

ทดสอบเหมือนผู้ใช้

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

เหตุใดจึงต้องทดสอบตั้งแต่ต้นจนจบ

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

การติดตั้ง Cypress

Cypress คือเฟรมเวิร์กการทดสอบตั้งแต่ต้นจนจบยอดนิยมที่มีตัวเรียกใช้การทดสอบแบบโต้ตอบ ให้ติดตั้งเป็นส่วนเสริมสำหรับการพัฒนา แล้วเปิดตัวเรียกใช้การทดสอบ

npm install -D cypress
npx cypress open

โครงสร้างการทดสอบของ Cypress

การทดสอบของ Cypress ใช้ describe เพื่อจัดกลุ่มการทดสอบ และใช้ it สำหรับแต่ละสถานการณ์ โดยมีรูปแบบไวยากรณ์การทดสอบที่คุ้นเคย

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

การเข้าชมหน้าเว็บ

ใช้ cy.visit เพื่อโหลดที่อยู่เว็บในเบราว์เซอร์ ซึ่งเป็นจุดเริ่มต้นของการทดสอบส่วนใหญ่

cy.visit("http://localhost:5173/login")

การค้นหาองค์ประกอบ

cy.get จะเลือกองค์ประกอบด้วยตัวเลือก CSS Cypress จะรอให้องค์ประกอบปรากฏโดยอัตโนมัติ ซึ่งช่วยลดการทดสอบที่ทำงานผิดพลาดเป็นครั้งคราว

cy.get("input[name=email]")
cy.get("button[type=submit]")

การพิมพ์ลงในช่องป้อนข้อมูล

เชื่อม type เข้ากับช่องป้อนข้อมูลที่เลือก เพื่อจำลองการพิมพ์ด้วยแป้นพิมพ์

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

การคลิกองค์ประกอบ

ใช้ click เพื่อโต้ตอบกับปุ่มและลิงก์ เช่นเดียวกับที่ผู้ใช้ทำ

cy.get("button[type=submit]").click()

การตรวจสอบผลลัพธ์

หลังจากโต้ตอบแล้ว ให้ตรวจสอบสิ่งที่ผู้ใช้ควรเห็นในตอนนี้ด้วย should โดย Cypress จะลองตรวจสอบซ้ำจนกว่าจะผ่านหรือหมดเวลา

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

การทดสอบตั้งแต่ต้นจนจบที่สมบูรณ์

เมื่อนำขั้นตอนต่าง ๆ มารวมกัน จะได้การทดสอบลำดับการใช้งานจริงของผู้ใช้ที่อ่านเข้าใจได้ง่าย

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

ทางเลือกอย่าง Playwright

Playwright เป็นเครื่องมือทดสอบตั้งแต่ต้นจนจบที่มีประสิทธิภาพอีกตัวหนึ่ง โดยมีแนวคิดคล้ายกัน ได้แก่ เปิดเบราว์เซอร์ นำทาง โต้ตอบ และตรวจสอบผลลัพธ์ แม้ API จะแตกต่างกัน แต่แนวคิดในการทดสอบยังเหมือนเดิม

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการทดสอบตั้งแต่ต้นจนจบของคุณ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

การทดสอบตั้งแต่ต้นจนจบจะควบคุมแอปจริงในเบราว์เซอร์ ด้วย Cypress ให้จัดโครงสร้างการทดสอบด้วย describe/it โหลดหน้าด้วย cy.visit ค้นหาองค์ประกอบด้วย cy.get โต้ตอบผ่าน type และ click และตรวจสอบผลลัพธ์ด้วย should ส่วน Playwright ก็ใช้แนวคิดเดียวกัน บทถัดไป คุณจะปรับประสิทธิภาพและนำบิลด์ขึ้นใช้งาน

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การทดสอบตั้งแต่ต้นจนจบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทดสอบตั้งแต่ต้นจนจบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบตั้งแต่ต้นจนจบ”

ตรวจสอบกระบวนการใช้งานทั้งหมดด้วยการทดสอบตั้งแต่ต้นจนจบ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “การทดสอบตั้งแต่ต้นจนจบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy