मॉड्यूल 12 · वेब एप्लिकेशन टेस्टिंग

टेस्टर्स के लिए CSS बेसिक्स

Mutqan Soft QA टीम द्वारा · · 19 मिनट · शुरुआती

CSS (Cascading Style Sheets) तय करता है कि HTML elements कैसे दिखेंगे और कहाँ रहेंगे: रंग, fonts, sizes, spacing, layout, और hover, keyboard focus या पतली screen पर क्या बदलता है। HTML बताता है कि checkout page पर "Pay now" button है; CSS उसे नीला बनाता है, phone पर पूरी चौड़ाई का करता है और focus मिलने पर उसके चारों ओर outline दिखाता है।

Testers शायद ही CSS लिखते हैं, लेकिन उन्हें इसे पढ़ना आना चाहिए। जब कोई label कट जाए, elements एक-दूसरे पर चढ़ जाएँ या phone पर page sideways scroll हो, तो वजह आम तौर पर कोई CSS rule होता है, और basics जानकर आप उसे ढूँढ सकते हैं और defect को सटीक रूप से बता सकते हैं।

यह क्यों ज़रूरी है

Visual defects वह चीज़ हैं जो users सबसे पहले देखते हैं। Button के नीचे खिसकी price या sticky header के पीछे छिपा field product को टूटा हुआ दिखाता है, भले हर function काम करता हो। कुछ defects accessibility failures भी हैं: focus outline को बिना किसी विकल्प के हटा देना WCAG 2.2 का success criterion 2.4.7 Focus Visible फ़ेल करता है।

CSS की समझ "mobile पर layout टूटा है" को ऐसी report में बदल देती है जिस पर developer काम कर सके: element, viewport width, computed sizes और ज़िम्मेदार rule। यह भी बताती है कि और क्या दोबारा टेस्ट करना है, क्योंकि एक rule उसी class वाले हर page को style कर सकता है।

Rules, selectors और cascade

Stylesheet rules की एक list है। हर rule में एक selector होता है, जो elements चुनता है, और braces में एक declaration block, जिसमें property: value pairs होते हैं। #checkout .btn:hover { background-color: #0a58ca; } में selector उन elements को चुनता है जिनकी class btn है और जो id checkout वाले element के अंदर हैं, जब तक pointer उनके ऊपर है। CSS page तक linked stylesheets, <style> elements और style attribute से पहुँचता है, browser के अपने default styles के ऊपर।

जब कई rules एक ही element पर एक ही property set करते हैं, तो cascade उनमें से एक चुनता है। सरल रूप में: !important जीतता है; फिर style attribute stylesheet rules पर भारी पड़ता है; फिर ज़्यादा specific selector जीतता है; specificity बराबर हो तो बाद वाला rule जीतता है। Specificity पहले ids, फिर classes, attributes और pseudo-classes, फिर element types और pseudo-elements गिनती है, इसलिए #checkout .btn की specificity 1,1,0 है और एक id किसी भी संख्या की classes से भारी है। color और font-family जैसी कुछ properties child elements को inherit भी होती हैं।

  • button (type: हर <button>), .btn-primary (class: हर वह element जिसके class attribute की classes में btn-primary शामिल हो) और #email (id: id="email" वाला इकलौता element)।
  • [type="email"] और [data-testid="pay-now"] (attribute); [href^="https"] उन values से match करता है जो https से शुरू होती हैं।
  • Combinators selectors को जोड़ते हैं: space का मतलब है "अंदर कहीं भी" (form .error), और > का मतलब है "का direct child" (ul > li)।
  • :hover, :focus-visible, :disabled, :checked और :invalid states के लिए pseudo-classes हैं; हर state की अपनी styles होती हैं और उसे अपनी अलग जाँच चाहिए।
  • ::before और ::placeholder pseudo-elements हैं: ये उन हिस्सों को style करते हैं जो HTML में elements नहीं हैं।
/* Three rules set one property on the same button */
.btn           { background-color: #0b5ed7; }  /* 0,1,0                      */
#checkout .btn { background-color: #6c757d; }  /* 1,1,0: wins, it has an id  */
.btn           { background-color: #198754; }  /* 0,1,0: later, still loses  */

आज़माएँ: CSS फ़ॉर्मेटर आज़माएँ: कलर कन्वर्टर

Box model: चार परतें

Browser हर element को चार परतों वाले box के रूप में बनाता है, अंदर से बाहर: content; फिर padding, जो background दिखाता है और click होने पर element का ही हिस्सा गिना जाता है; फिर border; और फिर margin, पारदर्शी जगह जो पड़ोसी elements को दूर रखती है।

Box model बाहर से अंदर: margin, border, padding, content। Default content-box में width: 300px सिर्फ़ content set करता है, इसलिए हर तरफ़ 16px padding और 2px border से box 336px चौड़ा बनता है।
  1. 1MarginBox के बाहरपारदर्शी जगह जो पड़ोसी elements को दूर रखती है

    कभी width का हिस्सा नहीं

    1. 2Border2pxPadding के चारों ओर खिंची रेखा

      content-box में 2 × 2 = 4px जोड़ता है

      1. 3Padding16pxBackground दिखाता है और click होने पर element का हिस्सा गिना जाता है

        content-box में 2 × 16 = 32px जोड़ता है

        1. 4Content300pxDefault content-box में width यही set करता है

          border-box में box 300px रहता है और content घटकर 264px रह जाता है

Values इसी section के उदाहरण से: width: 300px, padding: 16px और 2px border।

box-sizing तय करता है कि width क्या नापता है। Default content-box में यह सिर्फ़ content set करता है, इसलिए padding और border ऊपर से जुड़ते हैं: padding: 16px और 2px border के साथ width: 300px से box 336 pixels चौड़ा बनता है। border-box में box 300 pixels ही रहता है और content घटकर 264 रह जाता है। Margin कभी width का हिस्सा नहीं होता। कई sites हर element पर border-box set करती हैं; जो component यह छोड़ देता है, वह थोड़े ज़्यादा चौड़े boxes बनाता है।

Element को छिपाना भी उसके box का सवाल है। तीन declarations element को अदृश्य बनाते हैं, पर उनका बर्ताव अलग है:

  • display: none element को हटा देता है: न जगह, न clicks, और screen readers से भी छिपा।
  • visibility: hidden जगह बनाए रखता है, पर उसे आँखों, clicks और screen readers से छिपा देता है।
  • opacity: 0 उसे सिर्फ़ पारदर्शी बनाता है: वह अब भी clicks लेता है और screen readers उसे पढ़ते हैं, इसलिए button के ऊपर की एक अदृश्य परत उसे block कर सकती है।

Layout, media queries और उनसे बनने वाले defects

<div> जैसे block elements ऊपर-नीचे जमते हैं; <a> जैसे inline elements line के साथ बहते हैं। Flexbox (display: flex) children को एक row या एक column में रखता है और तय करता है कि वे कैसे बढ़ें, सिकुड़ें, wrap हों और align हों; grid (display: grid) उन्हें एक साथ rows और columns में रखता है, इसलिए grid-template-columns: repeat(3, 1fr) तीन बराबर columns बनाता है। दोनों writing direction मानते हैं, इसलिए Arabic page में flex row दाईं ओर से शुरू होती है। position: absolute और fixed elements को flow से बाहर निकालते हैं, sticky page scroll होते समय element को दिखाई देता रखता है, और z-index तय करता है कि overlap होने पर कौन ऊपर दिखे।

Media query rules तभी लागू करती है जब कोई शर्त सच हो: @media (max-width: 600px) { … } तब लागू होती है जब viewport 600 CSS pixels या उससे कम चौड़ा हो, इसलिए 600 पर phone layout मिलता है और 601 पर नहीं। CSS pixels device pixels नहीं हैं; high-density phone हर CSS pixel के लिए कई device pixels इस्तेमाल करता है। Phones पर यह तभी काम करता है जब page में HTML lesson के page skeleton वाला viewport <meta> element हो; उसके बिना phone page को किसी चौड़ी screen की तरह layout करके छोटा कर देता है। हर breakpoint एक boundary है जिसे दोनों तरफ़ से टेस्ट करना है। Queries prefers-color-scheme: dark, prefers-reduced-motion और printing पर भी प्रतिक्रिया देती हैं।

ज़्यादातर visual defects इन्हीं properties या box model से निकलते हैं:

  • कटा या बाहर बहता text: fixed height या width, overflow: hidden, white-space: nowrap; लंबे नाम, translations और बड़ा किया गया text इसे सामने लाते हैं।
  • Overlap: absolute या fixed positioning, negative margins, गलत z-index। जो sticky header focused field को पूरी तरह छिपा दे, वह WCAG 2.2 का criterion 2.4.11 Focus Not Obscured (Minimum) भी फ़ेल करता है।
  • Phones पर sideways scrolling: fixed widths, बिना max-width: 100% की images, कभी wrap न होने वाली flex rows (flex-wrap का default nowrap है), box-sizing का हिसाब।
  • Misalignment: मिलते-जुलते elements पर अलग margins, padding या alignment settings।
  • न पढ़ा जा सकने वाला text: background के बहुत करीब का रंग, अक्सर सिर्फ़ dark mode में या hover पर।
  • Focus न दिखना: बिना किसी replacement style के outline: none।
  • Right-to-left pages में mirroring defects: margin-left जैसी physical properties flip नहीं होतीं, जबकि flex, grid और margin-inline-start जैसी logical properties flip होती हैं।

Worked example: sideways scroll होता card

एक साथी report करता है कि phone पर checkout page sideways scroll होता है। आप F12 से browser के developer tools खोलते हैं और device mode चालू करते हैं (Chrome, Edge और Firefox में Ctrl+Shift+M), जिससे viewport को कोई भी width दी जा सकती है। 360 pixels पर promotion card screen के किनारे से बाहर निकला दिखता है; desktop widths पर सब ठीक दिखता है। CSS नीचे है, और card का parent viewport जितना ही चौड़ा है।

Card पर right-click करके Inspect चुनें। Styles pane उस पर लागू rules दिखाता है, और जो declarations override हो गए वे कटे हुए दिखते हैं: media query active है, इसलिए width: 100% लागू है। Computed pane का box-model diagram हर तरफ़ 16 pixels padding और 2 pixels border दिखाता है। Default content-box के साथ: 360 + 2 × 16 + 2 × 2 = 396 pixels, यानी screen से 36 pixels ज़्यादा। यही 36 pixels 480 तक की हर width पर जुड़ते हैं; 481 से card 320 + 36 = 356 pixels चौड़ा है और screen में आ जाता है।

Bug report तथ्य बताती है: page, element (.promo-card), browser, viewport (480 pixels तक की हर width; 481 ठीक है), expected (card screen में आ जाए) और actual (360 पर 396 pixels का box और horizontal scrollbar), साथ में screenshot और computed values। box-sizing को संभावित वजह के रूप में बताएँ; fix developer चुनता है। फिर 480 और 481 pixels पर, English और Arabic में, और .promo-card इस्तेमाल करने वाले दूसरे pages पर दोबारा टेस्ट करें।

.promo-card {
  width: 320px;
  padding: 16px;
  border: 2px solid #d0d7de;
}

@media (max-width: 480px) {
  .promo-card { width: 100%; }
}

/* Viewport 360px, box-sizing: content-box (the default):
   360 + 2 × 16 + 2 × 2 = 396px wide, 36px wider than the screen */

आज़माएँ: Lorem Ipsum जनरेटर आज़माएँ: बहुभाषी टेस्ट डेटा जनरेटर

Locators के रूप में CSS selectors: एक झलक

Automated test को किसी element पर click या check करने से पहले उसे ढूँढना होता है, और CSS selector उसे बताने का एक तरीका है: Selenium का By.cssSelector, Cypress का cy.get और Playwright का page.locator, तीनों इसे स्वीकार करते हैं। Developer tools के Console tab में document.querySelectorAll('[data-testid="pay-now"]').length matches गिनता है; locator को ठीक एक element से match करना चाहिए।

Styling के लिए अच्छा selector हमेशा अच्छा locator नहीं होता। Styling classes redesign के साथ बदलती हैं, लंबे paths wrapper जुड़ते ही टूटते हैं, और css-1q2w3e जैसे generated नाम builds के बीच बदलते हैं। पहचान के लिए बने attributes पर छोटे selectors चुनें: stable id, field का name, या data-testid जैसा test attribute। Playwright का documentation user-facing locators (role, label, text) और test ids की सलाह देता है, और CSS और XPath की सलाह नहीं देता, क्योंकि page की structure बदलते ही वे टूट जाते हैं। Selenium और Cypress में test id को भी आम तौर पर CSS attribute selector से ही ढूँढा जाता है।

  • नाज़ुक: div.col-md-6 > div:nth-child(3) > button.btn-primary।
  • बेहतर: [data-testid="pay-now"], #email या input[name="email"]।

आज़माएँ: HTML फ़ॉर्मेटर

आम गलतियाँ

  • Element, viewport width, browser, language और theme बताए बिना "layout टूटा है" report करना; कई visual defects इनमें से सिर्फ़ एक में दिखते हैं।
  • एक desktop और एक phone width पर टेस्ट करना, और breakpoint के दोनों तरफ़ की widths कभी नहीं।
  • सिर्फ़ default state जाँचना: hover, focus, disabled, error और selected states की अपनी CSS और अपने defects होते हैं।
  • अदृश्य element को गायब मान लेना: opacity: 0 clicks या screen readers से कुछ नहीं छिपाता।
  • Browser के "Copy selector" option से मिला लंबा selector test में चिपका देना; वह page की structure पर टिका होता है और अगले layout बदलाव पर टूट जाता है।

QA का नज़रिया

Refinement और design reviews में पूछें कि हर breakpoint पर, लंबे या translated text के साथ, right-to-left layout में और dark mode में क्या होता है, और क्या hover, focus और error states design किए गए हैं। Testing के दौरान हर screen के लिए एक छोटी visual checklist रखें और आँख से अंदाज़ा लगाने की बजाय developer tools में computed values पढ़ें; वहाँ रंग rgb(11, 94, 215) जैसी rgb() values में दिखते हैं, जबकि design आम तौर पर #0b5ed7 जैसी hex values देता है, जो वही नीला रंग है, इसलिए तुलना से पहले एक को दूसरे में convert करें।

Bug reports में element, viewport size, browser, language और theme, गलत computed values और समस्या पर निशान लगा screenshot दें; जिस rule पर शक हो उसे सिर्फ़ संकेत के रूप में लिखें। जब developers stable ids या test attributes जोड़ें, तो naming convention पर जल्दी सहमति बना लें: यह हर redesign के बाद locators ठीक करने से सस्ता है।

अभ्यास

Stylesheet को tester की तरह पढ़ें

आपका काम

नीचे के styles और markup एक checkout page के हैं। Phone पर viewport और main दोनों 360 pixels चौड़े हैं। Page चलाए बिना चारों steps के जवाब दें, और हर जवाब की वजह बताएँ।

सामग्री
<style>
  .card { width: 100%; padding: 12px; border: 1px solid #d0d7de; }
  .btn { padding: 10px 16px; background-color: #0b5ed7; color: #ffffff; }
  #checkout .btn { background-color: #6c757d; }
  .btn:focus { outline: none; }
  @media (max-width: 480px) {
    .card { padding: 24px; }
  }
</style>
<main id="checkout">
  <div class="card">
    <button class="btn" data-testid="pay-now">Pay now</button>
  </div>
</main>
चरण
  1. Button का background रंग कौन-सा दिखेगा, और क्यों?
  2. Phone पर card का box कितना चौड़ा है, और क्या वह screen में आता है?
  3. कौन-सा declaration users की ज़रूरत की चीज़ हटा देता है, और कौन-सा test उसे पकड़ता है?
  4. Automated test में button को locate करने के लिए आप कौन-सा CSS selector इस्तेमाल करेंगे?
मॉडल उत्तर दिखाएँ
मॉडल उत्तर

Grey, #6c757d: #checkout .btn की specificity 1,1,0 है, जो .btn की 0,1,0 से ज़्यादा है, और order सिर्फ़ बराबर specificity के बीच फ़ैसला करता है। अगर design नीला कहता है, तो Styles view के साथ report करें, जहाँ हारा हुआ declaration कटा हुआ दिखता है।

Media query लागू है क्योंकि 360, 480 से ज़्यादा नहीं है, इसलिए padding 24 pixels है: 360 + 2 × 24 + 2 × 1 = 410 pixels, यानी main से 50 pixels ज़्यादा, और page sideways scroll होता है। 480 और 481 pixels टेस्ट करें, जहाँ padding बदलती है; बड़ी widths पर भी card main से 26 pixels बाहर रहता है।

.btn:focus { outline: none; }। Tab दबाकर focus button तक ले जाएँ: अगर focus कहाँ है यह नहीं दिखता, तो page WCAG 2.2 का success criterion 2.4.7 Focus Visible फ़ेल करता है।

[data-testid="pay-now"]: यह tests के लिए बना है, एक ही element से match करता है और redesign में बचा रहता है। .btn उस style वाले हर button से match करता है, और main > div > button structure बदलते ही टूट जाता है।

अक्सर पूछे जाने वाले सवाल

क्या testers को CSS लिखनी आनी चाहिए?

आम तौर पर नहीं। उन्हें इसे पढ़ना आना चाहिए: selectors और properties पहचानना, developer tools में देखना कि कौन-सा rule लागू है, और box model का हिसाब लगाना। Developer tools में कोई value live बदलना संदिग्ध वजह की पुष्टि का तेज़ तरीका है, पर reload पर बदलाव गायब हो जाता है और fix code में ही होना चाहिए।

CSS selector और XPath expression में क्या फ़र्क है?

दोनों elements ढूँढते हैं। CSS selectors ids, classes और attributes के लिए छोटे होते हैं और stylesheets इन्हीं का इस्तेमाल करती हैं। XPath text से match भी कर सकता है और child से parent तक जा सकता है; CSS text से match नहीं कर सकता, और उसकी :has() pseudo-class parent के सिर्फ़ कुछ cases संभालती है। Selenium और Playwright दोनों स्वीकार करते हैं; Cypress का cy.get CSS selectors लेता है।

क्या visual defect हमेशा low severity होता है?

नहीं। थोड़ा खिसका icon minor हो सकता है, लेकिन कटी हुई price, screen से बाहर धकेला गया payment button या गायब focus indicator खरीदारी रोक सकता है या keyboard users को बाहर कर सकता है। किसी भी defect की तरह severity user पर असर से तय करें।

संदर्भ

  • CSS: Cascading Style Sheets — MDNMDN Web Docs (Mozilla)MDN का CSS reference और गाइड: selectors, cascade, properties और वे layout सिस्टम जो तय करते हैं कि पेज कैसा दिखे और कैसे ढले।
  • Responsive web design — MDNMDN Web Docs (Mozilla)व्यवहार में responsive design: flexbox और grid से लचीले layout, media queries और viewport meta tag, ताकि एक ही पेज हर स्क्रीन साइज़ पर चले।
  • Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024W3C की Recommendation जो सुलभ वेब कंटेंट के लिए टेस्ट करने योग्य success criteria तय करती है — चार सिद्धांतों और तीन conformance स्तरों (A, AA, AAA) में व्यवस्थित।
  • Locators — PlaywrightMicrosoft (Playwright)Playwright एलिमेंट कैसे ढूँढता है, locator दोबारा resolve होकर अपने-आप इंतज़ार क्यों करते हैं, और role-आधारित locator पहले क्यों सुझाए जाते हैं।
टूल्स

Mutqan tools से अभ्यास करें

CSS फ़ॉर्मेटर

हर declaration अलग लाइन पर, इंडेंटेशन और सॉर्टिंग विकल्पों के साथ CSS सुंदर बनाएँ।

फ़ॉर्मेटिंग

कलर कन्वर्टर

रंगों को HEX, RGB(A), HSL(A), HSB/HSV, CMYK और CSS नामित रंगों के बीच बदलें, लाइव प्रीव्यू के साथ।

यूटिलिटीज़

HTML फ़ॉर्मेटर

नेस्टेड एलिमेंट को सही इंडेंटेशन देकर HTML सुंदर बनाएँ, pre, script और style ब्लॉक सुरक्षित रखते हुए।

फ़ॉर्मेटिंग

Lorem Ipsum जनरेटर

पैराग्राफ़, वाक्य या शब्दों के रूप में प्लेसहोल्डर टेक्स्ट बनाएँ — लैटिन, अरबी या हिंदी में।

यूटिलिटीज़

बहुभाषी टेस्ट डेटा जनरेटर

i18n और RTL/LTR मिश्रण जाँचने के लिए एक ही रिकॉर्ड कई भाषाओं (अंग्रेज़ी, अरबी, हिंदी और अन्य) में जनरेट करें।

टेस्ट डेटा

और गहराई से

इस topic में आपकी प्रगति

QA रोडमैप का हिस्सा