సైప్రెస్: వెబ్ అప్లికేషన్‌ల కోసం అల్టిమేట్ ఎండ్-టు-ఎండ్ టెస్టింగ్ గైడ్

నేటి వేగంగా అభివృద్ధి చెందుతున్న వెబ్ డెవలప్‌మెంట్ రంగంలో, వెబ్ అప్లికేషన్‌ల నాణ్యత మరియు విశ్వసనీయతను నిర్ధారించడం చాలా ముఖ్యం. ఒక అప్లికేషన్‌లోని అన్ని భాగాలు వినియోగదారు దృష్టికోణం నుండి సజావుగా కలిసి పనిచేస్తున్నాయో లేదో ధృవీకరించడంలో ఎండ్-టు-ఎండ్ (E2E) టెస్టింగ్ కీలక పాత్ర పోషిస్తుంది. సైప్రెస్ ఒక ప్రముఖ E2E టెస్టింగ్ ఫ్రేమ్‌వర్క్‌గా ఉద్భవించింది, ఇది డెవలపర్-ఫ్రెండ్లీ అనుభవాన్ని, శక్తివంతమైన ఫీచర్‌లను మరియు అద్భుతమైన పనితీరును అందిస్తుంది. ఈ సమగ్ర గైడ్ సైప్రెస్‌తో ప్రారంభించడానికి మరియు మీ వెబ్ అప్లికేషన్‌లను సమర్థవంతంగా పరీక్షించడానికి అవసరమైన ప్రతిదాన్ని మీకు వివరిస్తుంది.

సైప్రెస్ అంటే ఏమిటి?

సైప్రెస్ అనేది ఆధునిక వెబ్ కోసం రూపొందించబడిన నెక్స్ట్-జనరేషన్ ఫ్రంట్-ఎండ్ టెస్టింగ్ సాధనం. బ్రౌజర్‌లో టెస్టులు నడిపే సాంప్రదాయ టెస్టింగ్ ఫ్రేమ్‌వర్క్‌ల వలే కాకుండా, సైప్రెస్ నేరుగా బ్రౌజర్‌లో పనిచేస్తుంది, ఇది మీ అప్లికేషన్ ప్రవర్తనపై మీకు అపూర్వమైన నియంత్రణ మరియు దృశ్యమానతను ఇస్తుంది. ఇది వేగవంతమైనది, విశ్వసనీయమైనది మరియు ఉపయోగించడానికి సులభమైనదిగా రూపొందించబడింది, ఇది ప్రపంచవ్యాప్తంగా డెవలపర్‌లు మరియు QA ఇంజనీర్‌ల మధ్య ఒక ప్రసిద్ధ ఎంపికగా నిలిచింది. సైప్రెస్ జావాస్క్రిప్ట్‌లో వ్రాయబడింది మరియు బ్రౌజర్‌లో అమలు చేయబడుతుంది, ఇది చాలా వేగంగా పనిచేయడానికి మరియు అప్లికేషన్ యొక్క అంతర్గత భాగాలకు అపూర్వమైన ప్రాప్యతను అందించడానికి వీలు కల్పిస్తుంది.

సైప్రెస్ ఉపయోగించడం వల్ల కలిగే ముఖ్య ప్రయోజనాలు

• డెవలపర్-ఫ్రెండ్లీ: సైప్రెస్ ఒక స్పష్టమైన మరియు సహజమైన APIని అందిస్తుంది, ఇది టెస్టులు వ్రాయడం మరియు డీబగ్ చేయడం సులభం చేస్తుంది.
• టైమ్ ట్రావెల్: ప్రతి టెస్ట్ కమాండ్ సమయంలో సైప్రెస్ మీ అప్లికేషన్ యొక్క స్థితిని స్నాప్‌షాట్‌లను తీసుకుంటుంది, ఇది మిమ్మల్ని గతంలోకి వెళ్లి ఏ సమయంలోనైనా సరిగ్గా ఏమి జరిగిందో చూడటానికి అనుమతిస్తుంది.
• రియల్-టైమ్ రీలోడ్‌లు: మీరు మీ టెస్టులకు మార్పులు చేసినప్పుడు సైప్రెస్ స్వయంచాలకంగా రీలోడ్ అవుతుంది, తక్షణ ఫీడ్‌బ్యాక్‌ను అందిస్తుంది.
• ఆటోమేటిక్ వెయిటింగ్: చర్యలను నిర్వహించడానికి ముందు, ఎలిమెంట్లు కనిపించేలా లేదా ఇంటరాక్ట్ అయ్యేలా సైప్రెస్ స్వయంచాలకంగా వేచి ఉంటుంది, ఇది ఎక్స్‌ప్లిసిట్ వెయిట్‌ల అవసరాన్ని తొలగిస్తుంది.
• నెట్‌వర్క్ నియంత్రణ: సైప్రెస్ నెట్‌వర్క్ అభ్యర్థనలను మరియు ప్రతిస్పందనలను స్టబ్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది, ఇది వివిధ దృశ్యాలను అనుకరించడానికి మరియు మీ అప్లికేషన్ యొక్క ఎర్రర్ హ్యాండ్లింగ్‌ను పరీక్షించడానికి వీలు కల్పిస్తుంది.
• డీబగ్గింగ్ సామర్థ్యం: సైప్రెస్ శక్తివంతమైన డీబగ్గర్ మరియు వివరణాత్మక ఎర్రర్ సందేశాలతో సహా అద్భుతమైన డీబగ్గింగ్ సాధనాలను అందిస్తుంది.
• క్రాస్-బ్రౌజర్ టెస్టింగ్: సైప్రెస్ Chrome, Firefox, Edge, మరియు Electronతో సహా బహుళ బ్రౌజర్‌లకు మద్దతు ఇస్తుంది.
• హెడ్‌లెస్ టెస్టింగ్: CI/CD పరిసరాలలో వేగవంతమైన అమలు కోసం టెస్టులను హెడ్‌లెస్ మోడ్‌లో అమలు చేయండి.
• అంతర్నిర్మిత నిర్ధారణలు (Assertions): మీ అప్లికేషన్ యొక్క ఆశించిన ప్రవర్తనను ధృవీకరించడానికి సైప్రెస్ అంతర్నిర్మిత నిర్ధారణల యొక్క గొప్ప సెట్‌ను అందిస్తుంది.

ఇన్‌స్టాలేషన్ మరియు సెటప్

సైప్రెస్‌తో ప్రారంభించడం చాలా సులభం. దానిని ఇన్‌స్టాల్ చేయడం ఎలాగో ఇక్కడ ఉంది:

1. ముందస్తు అవసరాలు: మీ సిస్టమ్‌లో Node.js మరియు npm (నోడ్ ప్యాకేజీ మేనేజర్) ఇన్‌స్టాల్ చేయబడి ఉన్నాయని నిర్ధారించుకోండి. మీరు వాటిని అధికారిక Node.js వెబ్‌సైట్ నుండి డౌన్‌లోడ్ చేసుకోవచ్చు.
2. సైప్రెస్ ఇన్‌స్టాల్ చేయండి: మీ టెర్మినల్ లేదా కమాండ్ ప్రాంప్ట్‌ని తెరిచి, మీ ప్రాజెక్ట్ డైరెక్టరీకి నావిగేట్ చేసి, కింది కమాండ్‌ను అమలు చేయండి:

npm install cypress --save-dev

3. సైప్రెస్ తెరవండి: ఇన్‌స్టాలేషన్ పూర్తయిన తర్వాత, మీరు సైప్రెస్ టెస్ట్ రన్నర్‌ను అమలు చేయడం ద్వారా తెరవవచ్చు:

npx cypress open

ఈ కమాండ్ సైప్రెస్ టెస్ట్ రన్నర్‌ను ప్రారంభిస్తుంది, ఇది మీ టెస్టులను అమలు చేయడానికి మరియు డీబగ్ చేయడానికి గ్రాఫికల్ ఇంటర్‌ఫేస్‌ను అందిస్తుంది.

మీ మొదటి సైప్రెస్ టెస్ట్ రాయడం

ఒక వెబ్‌సైట్ హోమ్‌పేజీ సరిగ్గా లోడ్ అవుతుందో లేదో ధృవీకరించడానికి ఒక సాధారణ టెస్ట్‌ను సృష్టిద్దాం. మీ ప్రాజెక్ట్ యొక్క `cypress/e2e` డైరెక్టరీలో `example.cy.js` అనే కొత్త ఫైల్‌ను సృష్టించండి.

// సైప్రెస్/e2e/example.cy.js

describe('నా మొదటి టెస్ట్', () => {
  it('కిచెన్ సింక్‌ను సందర్శిస్తుంది', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

ఈ టెస్ట్‌ను విశ్లేషిద్దాం:

• `describe()`: ఒక టెస్ట్ సూట్‌ను నిర్వచిస్తుంది, ఇది సంబంధిత టెస్టుల సమాహారం.
• `it()`: టెస్ట్ సూట్‌లో ఒక వ్యక్తిగత టెస్ట్ కేసును నిర్వచిస్తుంది.
• `cy.visit()`: పేర్కొన్న URLకి నావిగేట్ చేస్తుంది.
• `cy.contains()`: పేర్కొన్న టెక్స్ట్‌ను కలిగి ఉన్న ఎలిమెంట్‌ను కనుగొంటుంది.
• `.click()`: ఎంచుకున్న ఎలిమెంట్‌పై క్లిక్ చేస్తుంది.
• `cy.url()`: పేజీ యొక్క ప్రస్తుత URLను పొందుతుంది.
• `.should()`: అప్లికేషన్ యొక్క స్థితి గురించి ఒక నిర్ధారణ చేస్తుంది.
• `cy.get()`: ఒక CSS సెలెక్టర్‌ను ఉపయోగించి ఒక ఎలిమెంట్‌ను ఎంచుకుంటుంది.
• `.type()`: ఎంచుకున్న ఎలిమెంట్‌లో టెక్స్ట్ టైప్ చేస్తుంది.
• `.should('have.value', 'fake@email.com')`: ఎలిమెంట్ యొక్క విలువ 'fake@email.com'కి సమానంగా ఉందని నిర్ధారిస్తుంది.

ఈ టెస్ట్‌ను సైప్రెస్ టెస్ట్ రన్నర్‌లో అమలు చేసి దాని పనితీరును చూడండి. బ్రౌజర్ సైప్రెస్ కిచెన్ సింక్ వెబ్‌సైట్‌కు నావిగేట్ అవ్వడం, "type" లింక్‌పై క్లిక్ చేయడం మరియు URLను ధృవీకరించడం మీరు చూడాలి.

సైప్రెస్ కమాండ్స్

సైప్రెస్ మీ అప్లికేషన్‌తో ఇంటరాక్ట్ అవ్వడానికి విస్తృత శ్రేణి కమాండ్‌లను అందిస్తుంది. ఇక్కడ కొన్ని సాధారణంగా ఉపయోగించే కమాండ్‌లు ఉన్నాయి:

• `cy.visit(url)`: పేర్కొన్న URLకి నావిగేట్ చేస్తుంది.
• `cy.get(selector)`: ఒక CSS సెలెక్టర్‌ను ఉపయోగించి ఒక ఎలిమెంట్‌ను ఎంచుకుంటుంది.
• `cy.contains(content)`: పేర్కొన్న టెక్స్ట్‌ను కలిగి ఉన్న ఎలిమెంట్‌ను ఎంచుకుంటుంది.
• `cy.click()`: ఎంచుకున్న ఎలిమెంట్‌పై క్లిక్ చేస్తుంది.
• `cy.type(text)`: ఎంచుకున్న ఎలిమెంట్‌లో టెక్స్ట్ టైప్ చేస్తుంది.
• `cy.clear()`: ఇన్‌పుట్ లేదా టెక్స్ట్‌ఏరియా ఎలిమెంట్ యొక్క కంటెంట్‌లను క్లియర్ చేస్తుంది.
• `cy.submit()`: ఒక ఫారమ్‌ను సమర్పిస్తుంది.
• `cy.check()`: చెక్‌బాక్స్ లేదా రేడియో బటన్‌ను చెక్ చేస్తుంది.
• `cy.uncheck()`: చెక్‌బాక్స్‌ను అన్‌చెక్ చేస్తుంది.
• `cy.select(value)`: డ్రాప్‌డౌన్ నుండి ఒక ఆప్షన్‌ను ఎంచుకుంటుంది.
• `cy.scrollTo(position)`: పేజీని పేర్కొన్న స్థానానికి స్క్రోల్ చేస్తుంది.
• `cy.trigger(event)`: ఎంచుకున్న ఎలిమెంట్‌పై DOM ఈవెంట్‌ను ప్రేరేపిస్తుంది.
• `cy.request(url, options)`: పేర్కొన్న URLకి HTTP అభ్యర్థనను చేస్తుంది.
• `cy.intercept(route, handler)`: పేర్కొన్న రూట్‌తో సరిపోలే HTTP అభ్యర్థనలను అడ్డగిస్తుంది.
• `cy.wait(time)`: పేర్కొన్న సమయం వరకు వేచి ఉంటుంది.
• `cy.reload()`: ప్రస్తుత పేజీని రీలోడ్ చేస్తుంది.
• `cy.go(direction)`: బ్రౌజర్ చరిత్రలో మునుపటి లేదా తదుపరి పేజీకి నావిగేట్ చేస్తుంది.
• `cy.url()`: పేజీ యొక్క ప్రస్తుత URLను పొందుతుంది.
• `cy.title()`: పేజీ యొక్క శీర్షికను పొందుతుంది.
• `cy.window()`: విండో ఆబ్జెక్ట్‌ను పొందుతుంది.
• `cy.document()`: డాక్యుమెంట్ ఆబ్జెక్ట్‌ను పొందుతుంది.
• `cy.viewport(width, height)`: వ్యూపోర్ట్ పరిమాణాన్ని సెట్ చేస్తుంది.

ఇవి సైప్రెస్‌లో అందుబాటులో ఉన్న అనేక కమాండ్‌లలో కొన్ని మాత్రమే. కమాండ్‌లు మరియు వాటి ఆప్షన్‌ల పూర్తి జాబితా కోసం సైప్రెస్ డాక్యుమెంటేషన్‌ను చూడండి.

సైప్రెస్‌లో నిర్ధారణలు (Assertions)

మీ అప్లికేషన్ యొక్క ఆశించిన ప్రవర్తనను ధృవీకరించడానికి నిర్ధారణలు ఉపయోగించబడతాయి. సైప్రెస్ అంతర్నిర్మిత నిర్ధారణల యొక్క గొప్ప సెట్‌ను అందిస్తుంది, వీటిని మీరు ఎలిమెంట్ల స్థితి, URL, శీర్షిక మరియు మరిన్నింటిని తనిఖీ చేయడానికి ఉపయోగించవచ్చు. నిర్ధారణలు `.should()` పద్ధతిని ఉపయోగించి సైప్రెస్ కమాండ్‌ల తర్వాత చైన్ చేయబడతాయి.

ఇక్కడ కొన్ని సాధారణ నిర్ధారణ ఉదాహరణలు ఉన్నాయి:

• `.should('be.visible')`: ఒక ఎలిమెంట్ కనిపిస్తుందని నిర్ధారిస్తుంది.
• `.should('not.be.visible')`: ఒక ఎలిమెంట్ కనిపించడం లేదని నిర్ధారిస్తుంది.
• `.should('be.enabled')`: ఒక ఎలిమెంట్ ఎనేబుల్ చేయబడిందని నిర్ధారిస్తుంది.
• `.should('be.disabled')`: ఒక ఎలిమెంట్ డిసేబుల్ చేయబడిందని నిర్ధారిస్తుంది.
• `.should('have.text', 'expected text')`: ఒక ఎలిమెంట్‌లో పేర్కొన్న టెక్స్ట్ ఉందని నిర్ధారిస్తుంది.
• `.should('contain', 'expected text')`: ఒక ఎలిమెంట్‌లో పేర్కొన్న టెక్స్ట్ ఉందని నిర్ధారిస్తుంది.
• `.should('have.value', 'expected value')`: ఒక ఎలిమెంట్‌లో పేర్కొన్న విలువ ఉందని నిర్ధారిస్తుంది.
• `.should('have.class', 'expected class')`: ఒక ఎలిమెంట్‌లో పేర్కొన్న క్లాస్ ఉందని నిర్ధారిస్తుంది.
• `.should('have.attr', 'attribute name', 'expected value')`: ఒక ఎలిమెంట్‌లో పేర్కొన్న అట్రిబ్యూట్ మరియు విలువ ఉన్నాయని నిర్ధారిస్తుంది.
• `.should('have.css', 'css property', 'expected value')`: ఒక ఎలిమెంట్‌లో పేర్కొన్న CSS ప్రాపర్టీ మరియు విలువ ఉన్నాయని నిర్ధారిస్తుంది.
• `.should('have.length', expected length)`: ఒక ఎలిమెంట్‌లో పేర్కొన్న పొడవు ఉందని నిర్ధారిస్తుంది (ఉదా., జాబితాలోని ఎలిమెంట్ల సంఖ్య).

మీ నిర్దిష్ట అవసరాలకు అనుగుణంగా మీరు కస్టమ్ నిర్ధారణలను కూడా సృష్టించవచ్చు.

సైప్రెస్ టెస్టులు రాయడానికి ఉత్తమ పద్ధతులు

ఉత్తమ పద్ధతులను అనుసరించడం వల్ల మీరు మరింత నిర్వహించదగిన, విశ్వసనీయమైన మరియు సమర్థవంతమైన సైప్రెస్ టెస్టులు రాయడంలో సహాయపడుతుంది. ఇక్కడ కొన్ని సిఫార్సులు ఉన్నాయి:

• స్పష్టమైన మరియు సంక్షిప్త టెస్టులు రాయండి: ప్రతి టెస్ట్ ఒక నిర్దిష్ట కార్యాచరణ లేదా దృశ్యంపై దృష్టి పెట్టాలి. అర్థం చేసుకోవడానికి మరియు నిర్వహించడానికి కష్టంగా ఉండే అత్యంత సంక్లిష్టమైన టెస్టులు రాయడం మానుకోండి.
• అర్థవంతమైన టెస్ట్ పేర్లను ఉపయోగించండి: మీ టెస్టులకు అవి ఏమి పరీక్షిస్తున్నాయో స్పష్టంగా సూచించే వివరణాత్మక పేర్లను ఇవ్వండి.
• విలువలను హార్డ్‌కోడింగ్ చేయడం మానుకోండి: కాలక్రమేణా మారగల విలువలను నిల్వ చేయడానికి వేరియబుల్స్ లేదా కాన్ఫిగరేషన్ ఫైల్‌లను ఉపయోగించండి.
• కస్టమ్ కమాండ్‌లను ఉపయోగించండి: పునర్వినియోగ లాజిక్‌ను పొందుపరచడానికి మరియు మీ టెస్టులను మరింత చదవగలిగేలా చేయడానికి కస్టమ్ కమాండ్‌లను సృష్టించండి.
• టెస్టులను వేరు చేయండి: ప్రతి టెస్ట్ ఇతర టెస్టుల నుండి స్వతంత్రంగా ఉండాలి. మునుపటి టెస్టుల నుండి అప్లికేషన్ స్థితిపై ఆధారపడటం మానుకోండి.
• టెస్టుల తర్వాత శుభ్రపరచండి: తదుపరి టెస్టులు శుభ్రమైన స్లేట్ నుండి ప్రారంభమయ్యేలా నిర్ధారించడానికి ప్రతి టెస్ట్ తర్వాత అప్లికేషన్ స్థితిని రీసెట్ చేయండి.
• డేటా అట్రిబ్యూట్‌లను ఉపయోగించండి: మీ టెస్టులలో ఎలిమెంట్‌లను ఎంచుకోవడానికి డేటా అట్రిబ్యూట్‌లను (ఉదా., `data-testid`) ఉపయోగించండి. డేటా అట్రిబ్యూట్‌లు CSS క్లాసులు లేదా IDల కంటే తక్కువగా మారే అవకాశం ఉంది, ఇది మీ టెస్టులను UI మార్పులకు మరింత నిరోధకంగా చేస్తుంది.
• ఎక్స్‌ప్లిసిట్ వెయిట్‌లను మానుకోండి: సైప్రెస్ ఎలిమెంట్లు కనిపించేలా లేదా ఇంటరాక్ట్ అయ్యేలా స్వయంచాలకంగా వేచి ఉంటుంది. ఖచ్చితంగా అవసరమైతే తప్ప ఎక్స్‌ప్లిసిట్ వెయిట్‌లను (ఉదా., `cy.wait()`) ఉపయోగించడం మానుకోండి.
• యూజర్ ఫ్లోలను పరీక్షించండి: వ్యక్తిగత భాగాల కంటే యూజర్ ఫ్లోలను పరీక్షించడంపై దృష్టి పెట్టండి. ఇది మీ అప్లికేషన్ వినియోగదారు దృష్టికోణం నుండి సరిగ్గా పనిచేస్తుందని నిర్ధారించడంలో మీకు సహాయపడుతుంది.
• టెస్టులను క్రమం తప్పకుండా అమలు చేయండి: మీ CI/CD పైప్‌లైన్‌లో సైప్రెస్ టెస్టులను ఇంటిగ్రేట్ చేయండి మరియు డెవలప్‌మెంట్ ప్రక్రియలో బగ్‌లను ముందుగానే గుర్తించడానికి వాటిని క్రమం తప్పకుండా అమలు చేయండి.

అధునాతన సైప్రెస్ టెక్నిక్స్

స్టబ్బింగ్ మరియు మాకింగ్

సైప్రెస్ నెట్‌వర్క్ అభ్యర్థనలు మరియు ప్రతిస్పందనలను స్టబ్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది, ఇది వివిధ దృశ్యాలను అనుకరించడానికి మరియు మీ అప్లికేషన్ యొక్క ఎర్రర్ హ్యాండ్లింగ్‌ను పరీక్షించడానికి వీలు కల్పిస్తుంది. బాహ్య APIలు లేదా సేవలపై ఆధారపడే ఫీచర్‌లను పరీక్షించడానికి ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది.

నెట్‌వర్క్ అభ్యర్థనను స్టబ్ చేయడానికి, మీరు `cy.intercept()` కమాండ్‌ను ఉపయోగించవచ్చు. ఉదాహరణకు, కింది కోడ్ `/api/users`కి GET అభ్యర్థనను స్టబ్ చేసి, ఒక మాక్ ప్రతిస్పందనను తిరిగి ఇస్తుంది:

cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

మీరు `cy.wait('@getUsers')` ఉపయోగించి అడ్డగించబడిన అభ్యర్థన కోసం వేచి ఉండవచ్చు మరియు మీ అప్లికేషన్ మాక్ ప్రతిస్పందనను సరిగ్గా హ్యాండిల్ చేస్తుందో లేదో ధృవీకరించవచ్చు.

లోకల్ స్టోరేజ్ మరియు కుకీలతో పనిచేయడం

సైప్రెస్ లోకల్ స్టోరేజ్ మరియు కుకీలతో ఇంటరాక్ట్ అవ్వడానికి కమాండ్‌లను అందిస్తుంది. మీరు మీ టెస్టులలో లోకల్ స్టోరేజ్ మరియు కుకీలను సెట్ చేయడానికి, పొందడానికి మరియు క్లియర్ చేయడానికి ఈ కమాండ్‌లను ఉపయోగించవచ్చు.

లోకల్ స్టోరేజ్ ఐటెమ్‌ను సెట్ చేయడానికి, మీరు విండో ఆబ్జెక్ట్‌ను యాక్సెస్ చేయడానికి `cy.window()` కమాండ్‌ను ఉపయోగించవచ్చు మరియు ఆపై `localStorage.setItem()` పద్ధతిని ఉపయోగించవచ్చు. ఉదాహరణకి:

cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

లోకల్ స్టోరేజ్ ఐటెమ్‌ను పొందడానికి, మీరు `cy.window()` కమాండ్‌ను ఉపయోగించవచ్చు మరియు ఆపై `localStorage.getItem()` పద్ధతిని ఉపయోగించవచ్చు. ఉదాహరణకి:

cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

ఒక కుకీని సెట్ చేయడానికి, మీరు `cy.setCookie()` కమాండ్‌ను ఉపయోగించవచ్చు. ఉదాహరణకి:

cy.setCookie('myCookie', 'myCookieValue')

ఒక కుకీని పొందడానికి, మీరు `cy.getCookie()` కమాండ్‌ను ఉపయోగించవచ్చు. ఉదాహరణకి:

cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

ఫైల్ అప్‌లోడ్‌లను హ్యాండిల్ చేయడం

సైప్రెస్ `cypress-file-upload` అనే ప్లగిన్‌ను అందిస్తుంది, ఇది మీ టెస్టులలో ఫైల్ అప్‌లోడ్‌లను సులభతరం చేస్తుంది. ప్లగిన్‌ను ఇన్‌స్టాల్ చేయడానికి, కింది కమాండ్‌ను అమలు చేయండి:

npm install -D cypress-file-upload

ఆపై, మీ `cypress/support/commands.js` ఫైల్‌కు కింది లైన్‌ను జోడించండి:

import 'cypress-file-upload';

మీరు ఫైల్‌ను అప్‌లోడ్ చేయడానికి `cy.uploadFile()` కమాండ్‌ను ఉపయోగించవచ్చు. ఉదాహరణకి:

cy.get('input[type="file"]').attachFile('example.txt')

IFramesతో పనిచేయడం

IFrames పరీక్షించడం కష్టంగా ఉంటుంది, కానీ సైప్రెస్ వాటితో ఇంటరాక్ట్ అవ్వడానికి ఒక మార్గాన్ని అందిస్తుంది. మీరు IFrame లోడ్ అవ్వడానికి వేచి ఉండటానికి `cy.frameLoaded()` కమాండ్‌ను ఉపయోగించవచ్చు, ఆపై IFrame యొక్క డాక్యుమెంట్ ఆబ్జెక్ట్‌ను పొందడానికి `cy.iframe()` కమాండ్‌ను ఉపయోగించవచ్చు.

cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

సైప్రెస్ మరియు కంటిన్యూయస్ ఇంటిగ్రేషన్/కంటిన్యూయస్ డిప్లాయ్‌మెంట్ (CI/CD)

మీ అప్లికేషన్ యొక్క నాణ్యతను నిర్ధారించడానికి మీ CI/CD పైప్‌లైన్‌లో సైప్రెస్‌ను ఇంటిగ్రేట్ చేయడం చాలా అవసరం. మీరు మీ CI/CD పరిసరంలో సైప్రెస్ టెస్టులను హెడ్‌లెస్ మోడ్‌లో అమలు చేయవచ్చు. ఇక్కడ ఎలాగో ఉంది:

1. సైప్రెస్ ఇన్‌స్టాల్ చేయండి: మీ ప్రాజెక్ట్‌లో సైప్రెస్ ఒక డిపెండెన్సీగా ఇన్‌స్టాల్ చేయబడిందని నిర్ధారించుకోండి.
2. CI/CD కాన్ఫిగర్ చేయండి: ప్రతి బిల్డ్ తర్వాత సైప్రెస్ టెస్టులను అమలు చేయడానికి మీ CI/CD పైప్‌లైన్‌ను కాన్ఫిగర్ చేయండి.
3. సైప్రెస్‌ను హెడ్‌లెస్‌గా అమలు చేయండి: సైప్రెస్ టెస్టులను హెడ్‌లెస్ మోడ్‌లో అమలు చేయడానికి `cypress run` కమాండ్‌ను ఉపయోగించండి.

ఉదాహరణ CI/CD కాన్ఫిగరేషన్ (GitHub Actions ఉపయోగించి):

name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

ఈ కాన్ఫిగరేషన్ `main` బ్రాంచ్‌కు కోడ్ పుష్ చేయబడినప్పుడు లేదా `main` బ్రాంచ్‌కు వ్యతిరేకంగా పుల్ రిక్వెస్ట్ సృష్టించబడినప్పుడు సైప్రెస్ టెస్టులను అమలు చేస్తుంది. `cypress-io/github-action` చర్య GitHub Actionsలో సైప్రెస్ టెస్టులను అమలు చేసే ప్రక్రియను సులభతరం చేస్తుంది.

సైప్రెస్ టెస్టులను డీబగ్గింగ్ చేయడం

మీ టెస్టులలో సమస్యలను గుర్తించడానికి మరియు పరిష్కరించడానికి సైప్రెస్ అద్భుతమైన డీబగ్గింగ్ సాధనాలను అందిస్తుంది. సైప్రెస్ టెస్టులను డీబగ్గింగ్ చేయడానికి ఇక్కడ కొన్ని చిట్కాలు ఉన్నాయి:

• సైప్రెస్ టెస్ట్ రన్నర్‌ను ఉపయోగించండి: సైప్రెస్ టెస్ట్ రన్నర్ మీ టెస్టులను అమలు చేయడానికి మరియు డీబగ్ చేయడానికి ఒక విజువల్ ఇంటర్‌ఫేస్‌ను అందిస్తుంది. మీరు మీ టెస్టులను ఒకే కమాండ్‌తో స్టెప్ చేయవచ్చు, అప్లికేషన్ స్థితిని తనిఖీ చేయవచ్చు మరియు వివరణాత్మక ఎర్రర్ సందేశాలను చూడవచ్చు.
• `cy.pause()` కమాండ్‌ను ఉపయోగించండి: `cy.pause()` కమాండ్ మీ టెస్ట్ అమలును పాజ్ చేసి, బ్రౌజర్ డెవలపర్ టూల్స్‌లో అప్లికేషన్ స్థితిని తనిఖీ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
• `cy.debug()` కమాండ్‌ను ఉపయోగించండి: `cy.debug()` కమాండ్ ఎంచుకున్న ఎలిమెంట్‌ను కన్సోల్‌కు ప్రింట్ చేస్తుంది, దాని లక్షణాలు మరియు అట్రిబ్యూట్‌లను తనిఖీ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
• బ్రౌజర్ డెవలపర్ టూల్స్‌ను ఉపయోగించండి: బ్రౌజర్ డెవలపర్ టూల్స్ మీ అప్లికేషన్ గురించి DOM, నెట్‌వర్క్ అభ్యర్థనలు మరియు కన్సోల్ లాగ్‌లతో సహా విస్తృత సమాచారాన్ని అందిస్తాయి.
• ఎర్రర్ సందేశాలను జాగ్రత్తగా చదవండి: సైప్రెస్ ఎర్రర్ కారణాన్ని గుర్తించడంలో మీకు సహాయపడే వివరణాత్మక ఎర్రర్ సందేశాలను అందిస్తుంది. ఎర్రర్ సందేశం మరియు స్టాక్ ట్రేస్‌పై శ్రద్ధ వహించండి.

సైప్రెస్ vs. ఇతర టెస్టింగ్ ఫ్రేమ్‌వర్క్‌లు

సైప్రెస్ ఒక శక్తివంతమైన ఎండ్-టు-ఎండ్ టెస్టింగ్ ఫ్రేమ్‌వర్క్ అయినప్పటికీ, ఇతర ప్రముఖ ఆప్షన్‌లతో ఇది ఎలా పోలుస్తుందో అర్థం చేసుకోవడం చాలా అవసరం. ఇక్కడ ఒక సంక్షిప్త అవలోకనం ఉంది:

• సెలీనియం: సెలీనియం విస్తృతంగా ఉపయోగించే ఆటోమేషన్ టెస్టింగ్ ఫ్రేమ్‌వర్క్. ఇది ఫ్లెక్సిబుల్ మరియు బహుళ భాషలకు మద్దతు ఇస్తున్నప్పటికీ, దీనిని సెటప్ చేయడం మరియు నిర్వహించడం సంక్లిష్టంగా ఉంటుంది. సైప్రెస్, ముఖ్యంగా జావాస్క్రిప్ట్-ఆధారిత అప్లికేషన్‌ల కోసం, ఒక సరళమైన మరియు మరింత డెవలపర్-ఫ్రెండ్లీ అనుభవాన్ని అందిస్తుంది.
• పప్పెటీర్: పప్పెటీర్ అనేది హెడ్‌లెస్ క్రోమ్ లేదా క్రోమియంను నియంత్రించడానికి ఉన్నత-స్థాయి APIని అందించే ఒక నోడ్ లైబ్రరీ. ఇది స్క్రాపింగ్ మరియు బ్రౌజర్ పనులను ఆటోమేట్ చేయడానికి అద్భుతమైనది, కానీ ఎండ్-టు-ఎండ్ టెస్టింగ్ కోసం సైప్రెస్‌తో పోలిస్తే ఎక్కువ మాన్యువల్ కాన్ఫిగరేషన్ అవసరం కావచ్చు.
• ప్లేరైట్: ప్లేరైట్ మైక్రోసాఫ్ట్ అభివృద్ధి చేసిన మరొక క్రాస్-బ్రౌజర్ ఆటోమేషన్ ఫ్రేమ్‌వర్క్. ఇది పప్పెటీర్‌తో సారూప్యతలను పంచుకుంటుంది కానీ విస్తృత బ్రౌజర్ మద్దతును అందిస్తుంది. సైప్రెస్‌కు ఒక ప్రత్యేకమైన టైమ్-ట్రావెలింగ్ డీబగ్గర్ మరియు మరింత ఇంటిగ్రేటెడ్ టెస్టింగ్ అనుభవం ఉంది.

ఫ్రేమ్‌వర్క్ ఎంపిక మీ ప్రాజెక్ట్ యొక్క నిర్దిష్ట అవసరాలు మరియు ఆవశ్యకతలపై ఆధారపడి ఉంటుంది. వేగవంతమైన, విశ్వసనీయమైన మరియు డెవలపర్-ఫ్రెండ్లీ ఎండ్-టు-ఎండ్ టెస్టింగ్ అవసరమయ్యే ఆధునిక వెబ్ అప్లికేషన్‌ల కోసం సైప్రెస్ ఒక అద్భుతమైన ఎంపిక.

వాస్తవ-ప్రపంచ ఉదాహరణలు: సైప్రెస్ ఇన్ యాక్షన్

వివిధ రకాల వెబ్ అప్లికేషన్‌లను పరీక్షించడానికి సైప్రెస్‌ను ఎలా ఉపయోగించవచ్చో కొన్ని వాస్తవ-ప్రపంచ ఉదాహరణలను అన్వేషిద్దాం:

ఇ-కామర్స్ అప్లికేషన్‌ను పరీక్షించడం

మీరు ఇ-కామర్స్ అప్లికేషన్‌లో వివిధ యూజర్ ఫ్లోలను పరీక్షించడానికి సైప్రెస్‌ను ఉపయోగించవచ్చు, అవి:

• ఉత్పత్తుల కోసం శోధించడం
• కార్ట్‌కు ఉత్పత్తులను జోడించడం
• చెక్ అవుట్ చేయడం మరియు ఆర్డర్ చేయడం
• ఖాతా సెట్టింగ్‌లను నిర్వహించడం

ఒక వినియోగదారు విజయవంతంగా వారి కార్ట్‌కు ఒక ఉత్పత్తిని జోడించగలరని ధృవీకరించే సైప్రెస్ టెస్ట్ ఉదాహరణ ఇక్కడ ఉంది:

it('కార్ట్‌కు ఒక ఉత్పత్తిని జోడిస్తుంది', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

సోషల్ మీడియా అప్లికేషన్‌ను పరీక్షించడం

సోషల్ మీడియా అప్లికేషన్‌లో యూజర్ ఇంటరాక్షన్‌లను పరీక్షించడానికి మీరు సైప్రెస్‌ను ఉపయోగించవచ్చు, అవి:

• కొత్త పోస్ట్‌ను సృష్టించడం
• ఒక పోస్ట్‌ను లైక్ చేయడం
• ఒక పోస్ట్‌పై వ్యాఖ్యానించడం
• ఇతర వినియోగదారులను అనుసరించడం

ఒక వినియోగదారు విజయవంతంగా కొత్త పోస్ట్‌ను సృష్టించగలరని ధృవీకరించే సైప్రెస్ టెస్ట్ ఉదాహరణ ఇక్కడ ఉంది:

it('కొత్త పోస్ట్‌ను సృష్టిస్తుంది', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('హలో, వరల్డ్!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'హలో, వరల్డ్!')
})

బ్యాంకింగ్ అప్లికేషన్‌ను పరీక్షించడం

బ్యాంకింగ్ అప్లికేషన్‌ల కోసం, సైప్రెస్‌ను క్లిష్టమైన కార్యాచరణలను పరీక్షించడానికి ఉపయోగించవచ్చు, అవి:

• సురక్షితంగా లాగిన్ అవ్వడం
• ఖాతా బ్యాలెన్స్‌లను తనిఖీ చేయడం
• నిధులను బదిలీ చేయడం
• లబ్ధిదారులను నిర్వహించడం

నిధుల బదిలీని ధృవీకరించే ఒక టెస్ట్ ఇలా ఉండవచ్చు (భద్రత కోసం తగిన స్టబ్బింగ్‌తో):

it('నిధులను విజయవంతంగా బదిలీ చేస్తుంది', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

ముగింపు

సైప్రెస్ ఒక శక్తివంతమైన మరియు బహుముఖ ఎండ్-టు-ఎండ్ టెస్టింగ్ ఫ్రేమ్‌వర్క్, ఇది మీ వెబ్ అప్లికేషన్‌ల నాణ్యత మరియు విశ్వసనీయతను నిర్ధారించడంలో మీకు సహాయపడుతుంది. దాని డెవలపర్-ఫ్రెండ్లీ API, శక్తివంతమైన ఫీచర్‌లు మరియు అద్భుతమైన పనితీరు ప్రపంచవ్యాప్తంగా డెవలపర్‌లు మరియు QA ఇంజనీర్‌ల మధ్య ఒక ప్రసిద్ధ ఎంపికగా నిలిచింది. ఈ గైడ్‌లో వివరించిన ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా, మీరు డెవలప్‌మెంట్ ప్రక్రియలో బగ్‌లను ముందుగానే గుర్తించడంలో మరియు మీ వినియోగదారులకు అధిక-నాణ్యత సాఫ్ట్‌వేర్‌ను అందించడంలో సహాయపడే సమర్థవంతమైన సైప్రెస్ టెస్టులను వ్రాయవచ్చు.

వెబ్ అప్లికేషన్‌లు అభివృద్ధి చెందుతూనే ఉన్నందున, ఎండ్-టు-ఎండ్ టెస్టింగ్ ప్రాముఖ్యత మాత్రమే పెరుగుతుంది. సైప్రెస్‌ను స్వీకరించడం మరియు దానిని మీ డెవలప్‌మెంట్ వర్క్‌ఫ్లోలో ఇంటిగ్రేట్ చేయడం వల్ల మీరు మరింత బలమైన, విశ్వసనీయమైన మరియు యూజర్-ఫ్రెండ్లీ వెబ్ అనుభవాలను నిర్మించడానికి అధికారం పొందుతారు.