Angular Academy · บทเรียน

ตัวเลือกและการตรวจยืนยัน

ระบุองค์ประกอบและตรวจยืนยันสถานะ

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

ตัวเลือกที่ดีทำให้การทดสอบมีเสถียรภาพ

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

getByRole: ตัวระบุตำแหน่งที่แนะนำ

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

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel และ getByPlaceholder

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

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText และ getByTestId

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

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

หลีกเลี่ยงตัวเลือก CSS ที่เปราะบาง

คุณยังใช้ page.locator('.css-selector') ได้ แต่ควรถือเป็นทางเลือกสุดท้าย ชื่อคลาสและการซ้อนองค์ประกอบเปลี่ยนแปลงบ่อย ส่วนบทบาทและป้ายกำกับมักไม่เปลี่ยน

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

การตรวจสอบแบบเว็บเป็นหลัก

expect ของ Playwright สำหรับตัวระบุตำแหน่งเป็นแบบ เว็บเป็นหลัก โดยจะลองใหม่โดยอัตโนมัติจนกว่าเงื่อนไขจะเป็นจริงหรือหมดเวลา นี่คือกุญแจสำคัญในการทำให้การตรวจสอบไม่เกิดความไม่แน่นอน

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

ตัวจับคู่การตรวจสอบที่พบบ่อย

ตัวจับคู่จะอธิบายสถานะที่คาดหวังขององค์ประกอบหรือหน้าเว็บ

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

การตรวจสอบจำนวนรายการในรายการ

หากต้องการตรวจสอบองค์ประกอบที่ปรากฏซ้ำ ให้ค้นหาองค์ประกอบทั้งหมดแล้วตรวจสอบจำนวน ตัวระบุตำแหน่งจะจับคู่กับทุกองค์ประกอบ และ toHaveCount จะลองใหม่จนกว่าค่าจะคงที่

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

การตรวจสอบด้านลบ

ใช้ .not เพื่อตรวจสอบว่าสิ่งใดไม่มีอยู่หรือถูกซ่อน เช่น หลังจากลบรายการ

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

การกรองและการเชื่อมตัวระบุตำแหน่ง

ปรับให้ตัวระบุตำแหน่งเฉพาะเจาะจงขึ้นด้วย filter หรือเชื่อมต่อเพื่อจำกัดขอบเขตภายในองค์ประกอบแม่ ซึ่งช่วยให้การตรวจสอบแม่นยำ

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

เหตุใดการตรวจสอบแบบเว็บเป็นหลักจึงดีกว่าการตรวจสอบซ้ำด้วยตนเอง

การตรวจสอบแบบเว็บเป็นหลักจะลองประเมินนิพจน์ทั้งหมดใหม่ ไม่ใช่เพียงอ่านภาพรวมเก่าซ้ำ ดังนั้น await expect(loc).toHaveText('Done') จะรอให้ข้อความปรากฏ และขจัดสภาวะแข่งขันที่มักเกิดจากการรอที่เขียนด้วยตนเอง

ตรวจสอบอย่างรวดเร็ว

เลือกตัวระบุตำแหน่งที่ทนทานที่สุด

สรุปทบทวน

ควรเลือกตัวระบุตำแหน่งเชิงความหมาย ได้แก่ getByRole, getByLabel และ getByText โดยใช้ getByTestId เป็นทางเลือกสำรอง ตรวจสอบด้วยตัวจับคู่แบบเว็บเป็นหลัก (toBeVisible, toHaveText, toHaveCount, toHaveURL) ที่ลองใหม่โดยอัตโนมัติ และใช้ .not กับ filter เพื่อให้แม่นยำ

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

บทเรียน “ตัวเลือกและการตรวจยืนยัน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัวเลือกและการตรวจยืนยัน”

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

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

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

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

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

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

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

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

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