เชื่อม axe-core เข้ากับการทดสอบของ Playwright
ทำให้การสร้างล้มเหลวเมื่อพบการถดถอยด้านการเข้าถึง
เชื่อม axe-core เข้ากับการทดสอบของ Playwright เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
จากการสแกนด้วยตนเองสู่การทดสอบอัตโนมัติ
การคลิกส่วนขยายเบราว์เซอร์เหมาะสำหรับหน้าเดียว แต่หากต้องตรวจสอบทุกหน้าในทุกการคอมมิต คุณต้องเชื่อม axe-core เข้ากับชุดการทดสอบอัตโนมัติ
เหตุผลที่เลือก Playwright
Playwright ควบคุมเบราว์เซอร์จริงจากโค้ด ดังนั้น axe จึงทำงานกับหน้าเว็บตรงตามที่ผู้ใช้เห็น รวมถึงเนื้อหาที่แสดงผลโดย JavaScript
แพ็กเกจตัวเชื่อม
แพ็กเกจ axe-core/playwright เชื่อมเครื่องมือทั้งสองเข้าด้วยกัน โปรดติดตั้งแพ็กเกจนี้ควบคู่กับ Playwright เพื่อให้การทดสอบของคุณแทรกและเรียกใช้เอนจิน axe ได้
npm install --save-dev @axe-core/playwrightนำเข้าเครื่องมือสร้าง
ในไฟล์การทดสอบของคุณ ให้นำเข้า AxeBuilder ซึ่งเป็นตัวช่วยที่แทรก axe-core ลงในหน้าปัจจุบันและรวบรวมผลลัพธ์ให้คุณ
import AxeBuilder from '@axe-core/playwright';ไปยังหน้าเว็บ แล้ววิเคราะห์
ขั้นแรกให้ Playwright โหลดหน้าเว็บ จากนั้นเรียกใช้ analyze กับ AxeBuilder ใหม่เพื่อสแกนสิ่งที่แสดงผลอยู่ในเบราว์เซอร์ขณะนั้น
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();ตรวจยืนยันว่าไม่มีการละเมิด
ผลลัพธ์มีอาร์เรย์ violations อยู่ อาร์เรย์ของหน้าที่ผ่านการตรวจสอบจะว่างเปล่า ดังนั้นให้ตรวจยืนยันว่าความยาวเป็นศูนย์ เพื่อให้การทดสอบล้มเหลวเมื่อพบปัญหาใด ๆ
expect(results.violations).toEqual([]);กรณีการทดสอบฉบับสมบูรณ์
เมื่อนำทุกอย่างมารวมกัน คุณจะได้ การทดสอบการเข้าถึงจริงที่ทำงานใน CI เช่นเดียวกับข้อกำหนดการทดสอบ Playwright อื่น ๆ
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});ทดสอบหลังการโต้ตอบ
จุดแข็งที่แท้จริงคือการสแกน สถานะแบบไดนามิก ให้เปิดหน้าต่างโมดัลหรือขยายเมนูก่อน แล้วจึงวิเคราะห์ เพื่อให้ axe ตรวจสอบส่วนติดต่อผู้ใช้ที่ผู้ใช้เรียกใช้งานจริง
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();จำกัดขอบเขตให้แคบลง
คุณสามารถจำกัดการสแกนไว้ที่ภูมิภาคใดภูมิภาคหนึ่งด้วย include ซึ่งมีประโยชน์เมื่อต้องทดสอบส่วนประกอบเดียวโดยไม่ถูกรบกวนจากส่วนอื่นของหน้า
new AxeBuilder({ page }).include('#signup-form').analyze();เลือกชุดกฎของคุณ
ใช้ withTags เพื่อเรียกใช้เฉพาะกฎที่เชื่อมโยงกับมาตรฐาน เช่น เกณฑ์ WCAG 2.1 AA เพื่อให้การทดสอบสอดคล้องกับเป้าหมายการผ่านมาตรฐานของคุณ
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();อย่าลืมข้อจำกัด
การทดสอบ Playwright ที่ผ่านด้วยสีเขียวยังคงครอบคลุมเพียงปัญหาส่วนที่สามารถทำให้เป็นอัตโนมัติได้เท่านั้น การทดสอบเหล่านี้ เสริมการตรวจสอบด้วยโปรแกรมอ่านหน้าจอด้วยตนเอง แต่ไม่สามารถทดแทนกันได้
ตรวจสอบอย่างรวดเร็ว
ทบทวนว่าคุณทำให้การทดสอบล้มเหลวเมื่อพบปัญหาด้านการเข้าถึงได้อย่างไร
สรุป: a11y ในไปป์ไลน์ของคุณ
AxeBuilder แทรก axe-core ลงในเบราว์เซอร์จริง คุณวิเคราะห์แต่ละสถานะ และตรวจยืนยันว่า ไม่มีการละเมิด จากนี้การถดถอยด้านการเข้าถึงจะทำให้การสร้างซอฟต์แวร์ล้มเหลวโดยอัตโนมัติ ✅
คำถามที่พบบ่อย
บทเรียน “เชื่อม axe-core เข้ากับการทดสอบของ Playwright” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เชื่อม axe-core เข้ากับการทดสอบของ Playwright” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เชื่อม axe-core เข้ากับการทดสอบของ Playwright”
ทำให้การสร้างล้มเหลวเมื่อพบการถดถอยด้านการเข้าถึง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “เชื่อม axe-core เข้ากับการทดสอบของ Playwright” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สิ่งที่ระบบอัตโนมัติตรวจพบและตรวจไม่พบ
- สแกนด้วย axe DevTools และ Lighthouse
- เชื่อม axe-core เข้ากับการทดสอบของ Playwright
- การตรวจรูปแบบและด่าน CI สำหรับการเข้าถึง