चयनकर्ता और दावे
तत्वों को लक्ष्य बनाएँ और अवस्था पर दावा जाँचें
चयनकर्ता और दावे, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह 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');वेब-फ़र्स्ट अभिकथन
लोकेटर के लिए Playwright का expect वेब-फ़र्स्ट है: यह शर्त पूरी होने या टाइमआउट होने तक अपने-आप दोबारा प्रयास करता है। यही गैर-अस्थिर अभिकथनों की कुंजी है।
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 का उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “चयनकर्ता और दावे” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “चयनकर्ता और दावे” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“चयनकर्ता और दावे” में मैं क्या सीखूँगा?
तत्वों को लक्ष्य बनाएँ और अवस्था पर दावा जाँचें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“चयनकर्ता और दावे” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- E2E परीक्षण का परिचय
- Playwright परीक्षण लिखना
- चयनकर्ता और दावे
- CI एकीकरण