Playwright tests में axe-core जोड़ना
a11y प्रतिगमन दिखने पर बिल्ड विफल करें।
Playwright tests में axe-core जोड़ना, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 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 जोड़ता है और आपके लिए results एकत्र करता है।
import AxeBuilder from '@axe-core/playwright';नेविगेट कीजिए, फिर analyze कीजिए
पहले Playwright को पृष्ठ लोड करने दीजिए, फिर नए AxeBuilder पर analyze को बुलाइए, ताकि ब्राउज़र में इस समय प्रदर्शित सामग्री का स्कैन किया जा सके।
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();शून्य उल्लंघन सुनिश्चित कीजिए
परिणाम में violations नाम की सारणी होती है। सफल पृष्ठ में यह सारणी खाली होती है, इसलिए उसकी लंबाई शून्य होने की पुष्टि कीजिए, ताकि किसी भी समस्या पर परीक्षण विफल हो जाए।
expect(results.violations).toEqual([]);एक पूर्ण परीक्षण मामला
इन सभी चरणों को मिलाकर आपके पास एक वास्तविक सुगम्यता परीक्षण होगा, जो किसी भी अन्य Playwright विनिर्देश की तरह CI में चलता है।
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});परस्पर क्रिया के बाद परीक्षण कीजिए
वास्तविक शक्ति गतिशील अवस्थाओं को स्कैन करने में है। पहले कोई मोडल खोलिए या मेनू विस्तृत कीजिए, फिर analyze कीजिए, ताकि axe उस UI की जाँच करे जिसे उपयोगकर्ता वास्तव में सक्रिय करते हैं।
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 परीक्षण भी केवल उन समस्याओं के स्वचालित हिस्से को जाँचते हैं जिन्हें स्वचालित रूप से परखा जा सकता है। वे मैन्युअल स्क्रीन रीडर जाँचों के पूरक हैं; उनका स्थान कभी नहीं ले सकते।
त्वरित जाँच
याद कीजिए कि सुगम्यता संबंधी समस्याओं पर परीक्षण को विफल कैसे कराते हैं।
पुनरावलोकन: आपकी pipeline में a11y
AxeBuilder वास्तविक ब्राउज़र में axe-core जोड़ता है, आप प्रत्येक अवस्था पर analyze करते हैं और शून्य उल्लंघनों की पुष्टि करते हैं। अब सुगम्यता में होने वाले प्रतिगमन अपने-आप निर्माण को विफल कर देंगे। ✅
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “Playwright tests में axe-core जोड़ना” पाठ निःशुल्क है?
हाँ—“Playwright tests में axe-core जोड़ना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Playwright tests में axe-core जोड़ना” में मैं क्या सीखूँगा?
a11y प्रतिगमन दिखने पर बिल्ड विफल करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“Playwright tests में axe-core जोड़ना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- स्वचालन क्या पकड़ सकता है और क्या नहीं
- axe DevTools और Lighthouse से स्कैन करना
- Playwright tests में axe-core जोड़ना
- एक्सेसिबिलिटी के लिए Linting और CI गेट