Cypress: વેબ એપ્લિકેશન્સ માટે અંતિમ એન્ડ-ટુ-એન્ડ ટેસ્ટિંગ માર્ગદર્શિકા

આજના ઝડપથી વિકસતા વેબ ડેવલપમેન્ટ લેન્ડસ્કેપમાં, વેબ એપ્લિકેશન્સની ગુણવત્તા અને વિશ્વસનીયતા સુનિશ્ચિત કરવી અત્યંત મહત્વપૂર્ણ છે. એન્ડ-ટુ-એન્ડ (E2E) ટેસ્ટિંગ એ ચકાસવામાં મહત્વપૂર્ણ ભૂમિકા ભજવે છે કે એપ્લિકેશનના તમામ ઘટકો વપરાશકર્તાના દૃષ્ટિકોણથી એકસાથે એકીકૃત રીતે કાર્ય કરે છે. Cypress એક અગ્રણી E2E ટેસ્ટિંગ ફ્રેમવર્ક તરીકે ઉભરી આવ્યું છે, જે ડેવલપર-ફ્રેન્ડલી અનુભવ, શક્તિશાળી સુવિધાઓ અને ઉત્તમ પ્રદર્શન પ્રદાન કરે છે. આ વ્યાપક માર્ગદર્શિકા તમને Cypress સાથે શરૂઆત કરવા અને તમારી વેબ એપ્લિકેશન્સનું અસરકારક રીતે પરીક્ષણ કરવા માટે જરૂરી બધું જ સમજાવશે.

Cypress શું છે?

Cypress એ આધુનિક વેબ માટે બનાવેલ નેક્સ્ટ-જનરેશન ફ્રન્ટ-એન્ડ ટેસ્ટિંગ ટૂલ છે. પરંપરાગત ટેસ્ટિંગ ફ્રેમવર્કથી વિપરીત જે બ્રાઉઝરમાં ટેસ્ટ ચલાવે છે, Cypress સીધા બ્રાઉઝરમાં કાર્ય કરે છે, જે તમને તમારી એપ્લિકેશનના વર્તન પર અજોડ નિયંત્રણ અને દૃશ્યતા પ્રદાન કરે છે. તે ઝડપી, વિશ્વસનીય અને ઉપયોગમાં સરળ બનવા માટે ડિઝાઇન કરવામાં આવ્યું છે, જે તેને વિશ્વભરના ડેવલપર્સ અને QA એન્જિનિયરોમાં લોકપ્રિય પસંદગી બનાવે છે. Cypress JavaScript માં લખાયેલું છે અને બ્રાઉઝરની અંદર એક્ઝિક્યુટ થાય છે, જે તેને ખૂબ જ કાર્યક્ષમ બનાવે છે અને એપ્લિકેશનના આંતરિક ભાગો સુધી અજોડ ઍક્સેસ પ્રદાન કરે છે.

Cypress નો ઉપયોગ કરવાના મુખ્ય ફાયદા

• ડેવલપર-ફ્રેન્ડલી: Cypress એક સ્વચ્છ અને સાહજિક API પ્રદાન કરે છે, જે ટેસ્ટ લખવા અને ડીબગ કરવાનું સરળ બનાવે છે.
• ટાઇમ ટ્રાવેલ: Cypress દરેક ટેસ્ટ કમાન્ડ દરમિયાન તમારી એપ્લિકેશનની સ્થિતિના સ્નેપશોટ લે છે, જે તમને સમયસર પાછા જવા અને કોઈપણ સમયે બરાબર શું બન્યું તે જોવાની મંજૂરી આપે છે.
• રિયલ-ટાઇમ રીલોડ્સ: જ્યારે તમે તમારા ટેસ્ટમાં ફેરફાર કરો છો ત્યારે Cypress આપમેળે રીલોડ થાય છે, તાત્કાલિક પ્રતિસાદ પ્રદાન કરે છે.
• ઓટોમેટિક વેઇટિંગ: Cypress ક્રિયાઓ કરતા પહેલા તત્વો દૃશ્યમાન અથવા ઇન્ટરેક્ટિવ બને તેની આપમેળે રાહ જુએ છે, સ્પષ્ટ રાહ જોવાની જરૂરિયાતને દૂર કરે છે.
• નેટવર્ક નિયંત્રણ: Cypress તમને નેટવર્ક વિનંતીઓ અને પ્રતિભાવોને સ્ટબ કરવાની મંજૂરી આપે છે, જે તમને વિવિધ દૃશ્યોનું અનુકરણ કરવા અને તમારી એપ્લિકેશનના ભૂલ હેન્ડલિંગનું પરીક્ષણ કરવા સક્ષમ બનાવે છે.
• ડીબગેબિલિટી: Cypress ઉત્તમ ડીબગિંગ ટૂલ્સ પ્રદાન કરે છે, જેમાં શક્તિશાળી ડીબગર અને વિગતવાર ભૂલ સંદેશાઓ શામેલ છે.
• ક્રોસ-બ્રાઉઝર ટેસ્ટિંગ: Cypress Chrome, Firefox, Edge અને Electron સહિત બહુવિધ બ્રાઉઝર્સને સપોર્ટ કરે છે.
• હેડલેસ ટેસ્ટિંગ: CI/CD વાતાવરણમાં ઝડપી અમલ માટે હેડલેસ મોડમાં ટેસ્ટ ચલાવો.
• બિલ્ટ-ઇન એસર્શન્સ: Cypress તમારી એપ્લિકેશનના અપેક્ષિત વર્તનને ચકાસવા માટે બિલ્ટ-ઇન એસર્શન્સનો સમૃદ્ધ સમૂહ પ્રદાન કરે છે.

ઇન્સ્ટોલેશન અને સેટઅપ

Cypress સાથે શરૂઆત કરવી સીધી છે. તેને કેવી રીતે ઇન્સ્ટોલ કરવું તે અહીં આપેલું છે:

1. પૂર્વજરૂરીયાતો: ખાતરી કરો કે તમારી સિસ્ટમ પર Node.js અને npm (Node Package Manager) ઇન્સ્ટોલ કરેલા છે. તમે તેમને સત્તાવાર Node.js વેબસાઇટ પરથી ડાઉનલોડ કરી શકો છો.
2. Cypress ઇન્સ્ટોલ કરો: તમારું ટર્મિનલ અથવા કમાન્ડ પ્રોમ્પ્ટ ખોલો, તમારી પ્રોજેક્ટ ડિરેક્ટરીમાં નેવિગેટ કરો અને નીચેનો કમાન્ડ ચલાવો:

npm install cypress --save-dev

3. Cypress ખોલો: એકવાર ઇન્સ્ટોલેશન પૂર્ણ થઈ જાય, તમે નીચેનો કમાન્ડ ચલાવીને Cypress ટેસ્ટ રનર ખોલી શકો છો:

npx cypress open

આ કમાન્ડ Cypress ટેસ્ટ રનર લોંચ કરશે, જે તમારા ટેસ્ટ ચલાવવા અને ડીબગ કરવા માટે ગ્રાફિકલ ઇન્ટરફેસ પ્રદાન કરે છે.

તમારો પ્રથમ Cypress ટેસ્ટ લખવો

ચાલો એક વેબસાઇટનું હોમપેજ યોગ્ય રીતે લોડ થાય છે કે નહીં તે ચકાસવા માટે એક સરળ ટેસ્ટ બનાવીએ. તમારા પ્રોજેક્ટની cypress/e2e ડિરેક્ટરીમાં example.cy.js નામની નવી ફાઇલ બનાવો.

// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    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' બરાબર છે તેવું એસર્ટ કરે છે.

આ ટેસ્ટને Cypress ટેસ્ટ રનરમાં ચલાવો તેને કાર્યમાં જોવા માટે. તમારે બ્રાઉઝરને Cypress Kitchen Sink વેબસાઇટ પર નેવિગેટ કરતું, "type" લિંક પર ક્લિક કરતું અને URL ચકાસતું જોવું જોઈએ.

Cypress કમાન્ડ્સ

Cypress તમારી એપ્લિકેશન સાથે સંપર્ક કરવા માટે કમાન્ડ્સની વિશાળ શ્રેણી પ્રદાન કરે છે. અહીં કેટલાક સૌથી વધુ ઉપયોગમાં લેવાતા કમાન્ડ્સ આપેલા છે:

• 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): વ્યુપોર્ટનું કદ સેટ કરે છે.

આ ફક્ત Cypress માં ઉપલબ્ધ ઘણા કમાન્ડ્સમાંથી થોડા છે. કમાન્ડ્સ અને તેમના વિકલ્પોની સંપૂર્ણ સૂચિ માટે Cypress ડોક્યુમેન્ટેશનનો સંદર્ભ લો.

Cypress માં એસર્શન્સ

એસર્શન્સનો ઉપયોગ તમારી એપ્લિકેશનના અપેક્ષિત વર્તનને ચકાસવા માટે થાય છે. Cypress બિલ્ટ-ઇન એસર્શન્સનો સમૃદ્ધ સમૂહ પ્રદાન કરે છે જેનો ઉપયોગ તમે તત્વોની સ્થિતિ, URL, શીર્ષક અને વધુ ચકાસવા માટે કરી શકો છો. એસર્શન્સ .should() પદ્ધતિનો ઉપયોગ કરીને Cypress કમાન્ડ્સ પછી ચેઇન કરવામાં આવે છે.

અહીં કેટલાક સામાન્ય એસર્શન ઉદાહરણો આપેલા છે:

• .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): એક તત્વમાં નિર્દિષ્ટ લંબાઈ છે તેવું એસર્ટ કરે છે (દા.ત., સૂચિમાં તત્વોની સંખ્યા).

તમે તમારી વિશિષ્ટ જરૂરિયાતોને અનુરૂપ કસ્ટમ એસર્શન્સ પણ બનાવી શકો છો.

Cypress ટેસ્ટ લખવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરવાથી તમને વધુ જાળવણીયોગ્ય, વિશ્વસનીય અને કાર્યક્ષમ Cypress ટેસ્ટ લખવામાં મદદ મળી શકે છે. અહીં કેટલીક ભલામણો છે:

• સ્પષ્ટ અને સંક્ષિપ્ત ટેસ્ટ લખો: દરેક ટેસ્ટ ચોક્કસ કાર્યક્ષમતા અથવા દૃશ્ય પર ધ્યાન કેન્દ્રિત કરવો જોઈએ. અતિશય જટિલ ટેસ્ટ લખવાનું ટાળો જે સમજવા અને જાળવવા મુશ્કેલ હોય.
• અર્થપૂર્ણ ટેસ્ટ નામોનો ઉપયોગ કરો: તમારા ટેસ્ટને વર્ણનાત્મક નામો આપો જે સ્પષ્ટપણે દર્શાવે કે તેઓ શું પરીક્ષણ કરી રહ્યા છે.
• હાર્ડકોડિંગ મૂલ્યો ટાળો: સમય જતાં બદલાઈ શકે તેવા મૂલ્યો સંગ્રહિત કરવા માટે ચલ અથવા રૂપરેખાંકન ફાઇલોનો ઉપયોગ કરો.
• કસ્ટમ કમાન્ડ્સનો ઉપયોગ કરો: ફરીથી વાપરી શકાય તેવા તર્કને સમાવવા અને તમારા ટેસ્ટને વધુ વાંચી શકાય તેવા બનાવવા માટે કસ્ટમ કમાન્ડ્સ બનાવો.
• ટેસ્ટને અલગ કરો: દરેક ટેસ્ટ અન્ય ટેસ્ટથી સ્વતંત્ર હોવો જોઈએ. પાછલા ટેસ્ટમાંથી એપ્લિકેશનની સ્થિતિ પર આધાર રાખવાનું ટાળો.
• ટેસ્ટ પછી સાફ કરો: દરેક ટેસ્ટ પછી એપ્લિકેશનની સ્થિતિને રીસેટ કરો જેથી પછીના ટેસ્ટ સ્વચ્છ સ્થિતિથી શરૂ થાય.
• ડેટા એટ્રીબ્યુટ્સનો ઉપયોગ કરો: તમારા ટેસ્ટમાં તત્વો પસંદ કરવા માટે ડેટા એટ્રીબ્યુટ્સ (દા.ત., data-testid) નો ઉપયોગ કરો. ડેટા એટ્રીબ્યુટ્સ CSS ક્લાસ અથવા ID કરતાં બદલવાની શક્યતા ઓછી હોય છે, જે તમારા ટેસ્ટને UI માં ફેરફારો સામે વધુ સ્થિતિસ્થાપક બનાવે છે.
• સ્પષ્ટ રાહ જોવાનું ટાળો: Cypress તત્વો દૃશ્યમાન અથવા ઇન્ટરેક્ટિવ બને તેની આપમેળે રાહ જુએ છે. જ્યાં સુધી બિલકુલ જરૂરી ન હોય ત્યાં સુધી સ્પષ્ટ રાહ જોવાનું (દા.ત., cy.wait()) ટાળો.
• વપરાશકર્તા પ્રવાહોનું પરીક્ષણ કરો: વ્યક્તિગત ઘટકોને બદલે વપરાશકર્તા પ્રવાહોનું પરીક્ષણ કરવા પર ધ્યાન કેન્દ્રિત કરો. આ તમને એ સુનિશ્ચિત કરવામાં મદદ કરશે કે તમારી એપ્લિકેશન વપરાશકર્તાના દૃષ્ટિકોણથી યોગ્ય રીતે કાર્ય કરે છે.
• નિયમિતપણે ટેસ્ટ ચલાવો: Cypress ટેસ્ટને તમારી CI/CD પાઇપલાઇનમાં એકીકૃત કરો અને વિકાસ પ્રક્રિયામાં વહેલી તકે બગ્સને પકડવા માટે તેમને નિયમિતપણે ચલાવો.

અદ્યતન Cypress તકનીકો

સ્ટબિંગ અને મોકિંગ

Cypress તમને નેટવર્ક વિનંતીઓ અને પ્રતિભાવોને સ્ટબ કરવાની મંજૂરી આપે છે, જે તમને વિવિધ દૃશ્યોનું અનુકરણ કરવા અને તમારી એપ્લિકેશનના ભૂલ હેન્ડલિંગનું પરીક્ષણ કરવા સક્ષમ બનાવે છે. આ બાહ્ય 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') નો ઉપયોગ કરીને ઇન્ટરસેપ્ટેડ વિનંતીની રાહ જોઈ શકો છો અને ચકાસી શકો છો કે તમારી એપ્લિકેશન મોક પ્રતિભાવને યોગ્ય રીતે હેન્ડલ કરે છે.

લોકલ સ્ટોરેજ અને કુકીઝ સાથે કામ કરવું

Cypress લોકલ સ્ટોરેજ અને કુકીઝ સાથે સંપર્ક કરવા માટે કમાન્ડ્સ પ્રદાન કરે છે. તમે તમારા ટેસ્ટમાં લોકલ સ્ટોરેજ અને કુકીઝ સેટ કરવા, મેળવવા અને સાફ કરવા માટે આ કમાન્ડ્સનો ઉપયોગ કરી શકો છો.

લોકલ સ્ટોરેજ આઇટમ સેટ કરવા માટે, તમે વિન્ડો ઑબ્જેક્ટને ઍક્સેસ કરવા માટે 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 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 નું પરીક્ષણ કરવું મુશ્કેલ હોઈ શકે છે, પરંતુ Cypress તેમની સાથે સંપર્ક કરવાની રીત પ્રદાન કરે છે. તમે IFrame લોડ થાય તેની રાહ જોવા માટે cy.frameLoaded() કમાન્ડનો ઉપયોગ કરી શકો છો, અને પછી IFrame ના ડોક્યુમેન્ટ ઑબ્જેક્ટ મેળવવા માટે cy.iframe() કમાન્ડનો ઉપયોગ કરી શકો છો.

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

Cypress અને કન્ટિન્યુઅસ ઇન્ટિગ્રેશન/કન્ટિન્યુઅસ ડિપ્લોયમેન્ટ (CI/CD)

તમારી CI/CD પાઇપલાઇનમાં Cypress ને એકીકૃત કરવું તમારી એપ્લિકેશનની ગુણવત્તા સુનિશ્ચિત કરવા માટે આવશ્યક છે. તમે તમારા CI/CD વાતાવરણમાં હેડલેસ મોડમાં Cypress ટેસ્ટ ચલાવી શકો છો. અહીં કેવી રીતે કરવું તે આપેલું છે:

1. Cypress ઇન્સ્ટોલ કરો: ખાતરી કરો કે Cypress તમારા પ્રોજેક્ટમાં ડિપેન્ડન્સી તરીકે ઇન્સ્ટોલ કરેલું છે.
2. CI/CD કન્ફિગર કરો: દરેક બિલ્ડ પછી Cypress ટેસ્ટ ચલાવવા માટે તમારી CI/CD પાઇપલાઇનને કન્ફિગર કરો.
3. Cypress હેડલેસલી ચલાવો: હેડલેસ મોડમાં Cypress ટેસ્ટ ચલાવવા માટે 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 ટેસ્ટ ચલાવશે. cypress-io/github-action એક્શન GitHub Actions માં Cypress ટેસ્ટ ચલાવવાની પ્રક્રિયાને સરળ બનાવે છે.

Cypress ટેસ્ટ ડીબગ કરવા

Cypress તમારા ટેસ્ટમાં સમસ્યાઓને ઓળખવા અને સુધારવા માટે ઉત્તમ ડીબગિંગ ટૂલ્સ પ્રદાન કરે છે. Cypress ટેસ્ટ ડીબગ કરવા માટેની કેટલીક ટીપ્સ અહીં આપેલી છે:

• Cypress ટેસ્ટ રનરનો ઉપયોગ કરો: Cypress ટેસ્ટ રનર તમારા ટેસ્ટ ચલાવવા અને ડીબગ કરવા માટે વિઝ્યુઅલ ઇન્ટરફેસ પ્રદાન કરે છે. તમે તમારા ટેસ્ટને એક સમયે એક કમાન્ડ દ્વારા આગળ વધારી શકો છો, એપ્લિકેશનની સ્થિતિનું નિરીક્ષણ કરી શકો છો અને વિગતવાર ભૂલ સંદેશાઓ જોઈ શકો છો.
• cy.pause() કમાન્ડનો ઉપયોગ કરો: cy.pause() કમાન્ડ તમારા ટેસ્ટના અમલને થોભાવી દે છે અને તમને બ્રાઉઝરના ડેવલપર ટૂલ્સમાં એપ્લિકેશનની સ્થિતિનું નિરીક્ષણ કરવાની મંજૂરી આપે છે.
• cy.debug() કમાન્ડનો ઉપયોગ કરો: cy.debug() કમાન્ડ પસંદ કરેલા તત્વને કન્સોલમાં પ્રિન્ટ કરે છે, જે તમને તેની ગુણધર્મો અને એટ્રીબ્યુટ્સનું નિરીક્ષણ કરવાની મંજૂરી આપે છે.
• બ્રાઉઝરના ડેવલપર ટૂલ્સનો ઉપયોગ કરો: બ્રાઉઝરના ડેવલપર ટૂલ્સ તમારી એપ્લિકેશન વિશે પુષ્કળ માહિતી પ્રદાન કરે છે, જેમાં DOM, નેટવર્ક વિનંતીઓ અને કન્સોલ લોગ્સ શામેલ છે.
• ભૂલ સંદેશાઓ કાળજીપૂર્વક વાંચો: Cypress વિગતવાર ભૂલ સંદેશાઓ પ્રદાન કરે છે જે તમને ભૂલના કારણને ઓળખવામાં મદદ કરી શકે છે. ભૂલ સંદેશ અને સ્ટેક ટ્રેસ પર ધ્યાન આપો.

Cypress વિરુદ્ધ અન્ય ટેસ્ટિંગ ફ્રેમવર્ક

જ્યારે Cypress એક શક્તિશાળી એન્ડ-ટુ-એન્ડ ટેસ્ટિંગ ફ્રેમવર્ક છે, ત્યારે તે અન્ય લોકપ્રિય વિકલ્પો સાથે કેવી રીતે સરખામણી કરે છે તે સમજવું આવશ્યક છે. અહીં એક સંક્ષિપ્ત વિહંગાવલોકન છે:

• સેલેનિયમ: સેલેનિયમ વ્યાપકપણે ઉપયોગમાં લેવાતું ઓટોમેશન ટેસ્ટિંગ ફ્રેમવર્ક છે. જ્યારે તે લવચીક હોય અને બહુવિધ ભાષાઓને સપોર્ટ કરતું હોય, ત્યારે તેને સેટઅપ અને જાળવવું જટિલ હોઈ શકે છે. Cypress ખાસ કરીને જાવાસ્ક્રિપ્ટ-આધારિત એપ્લિકેશન્સ માટે સરળ અને વધુ ડેવલપર-ફ્રેન્ડલી અનુભવ પ્રદાન કરે છે.
• પપેટિયર: પપેટિયર એક Node લાઇબ્રેરી છે જે હેડલેસ ક્રોમ અથવા ક્રોમિયમને નિયંત્રિત કરવા માટે ઉચ્ચ-સ્તરનું API પ્રદાન કરે છે. તે સ્ક્રેપિંગ અને બ્રાઉઝર કાર્યોને સ્વચાલિત કરવા માટે ઉત્તમ છે પરંતુ એન્ડ-ટુ-એન્ડ ટેસ્ટિંગ માટે Cypress ની સરખામણીમાં વધુ મેન્યુઅલ રૂપરેખાંકનની જરૂર પડી શકે છે.
• પ્લેરાઇટ: પ્લેરાઇટ માઇક્રોસોફ્ટ દ્વારા વિકસિત અન્ય ક્રોસ-બ્રાઉઝર ઓટોમેશન ફ્રેમવર્ક છે. તે પપેટિયર સાથે સમાનતાઓ ધરાવે છે પરંતુ વ્યાપક બ્રાઉઝર સપોર્ટ પ્રદાન કરે છે. Cypress માં એક અનન્ય ટાઇમ-ટ્રાવેલિંગ ડીબગર અને વધુ સંકલિત ટેસ્ટિંગ અનુભવ છે.

ફ્રેમવર્કની પસંદગી તમારા પ્રોજેક્ટની વિશિષ્ટ જરૂરિયાતો અને આવશ્યકતાઓ પર આધારિત છે. Cypress આધુનિક વેબ એપ્લિકેશન્સ માટે એક ઉત્તમ પસંદગી છે જેને ઝડપી, વિશ્વસનીય અને ડેવલપર-ફ્રેન્ડલી એન્ડ-ટુ-એન્ડ ટેસ્ટિંગની જરૂર છે.

Cypress ના વાસ્તવિક-વિશ્વના ઉદાહરણો

ચાલો Cypress નો ઉપયોગ વિવિધ પ્રકારની વેબ એપ્લિકેશન્સનું પરીક્ષણ કરવા માટે કેવી રીતે કરી શકાય તેના કેટલાક વાસ્તવિક-વિશ્વના ઉદાહરણોનું અન્વેષણ કરીએ:

ઇ-કોમર્સ એપ્લિકેશનનું પરીક્ષણ કરવું

તમે ઇ-કોમર્સ એપ્લિકેશનમાં વિવિધ વપરાશકર્તા પ્રવાહોનું પરીક્ષણ કરવા માટે Cypress નો ઉપયોગ કરી શકો છો, જેમ કે:

• ઉત્પાદનો શોધવા
• કાર્ટમાં ઉત્પાદનો ઉમેરવા
• ચેકઆઉટ કરવું અને ઓર્ડર આપવો
• એકાઉન્ટ સેટિંગ્સનું સંચાલન કરવું

અહીં એક Cypress ટેસ્ટનું ઉદાહરણ આપેલું છે જે ચકાસે છે કે વપરાશકર્તા સફળતાપૂર્વક કાર્ટમાં ઉત્પાદન ઉમેરી શકે છે:

it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

સોશિયલ મીડિયા એપ્લિકેશનનું પરીક્ષણ કરવું

તમે સોશિયલ મીડિયા એપ્લિકેશનમાં વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓનું પરીક્ષણ કરવા માટે Cypress નો ઉપયોગ કરી શકો છો, જેમ કે:

• નવી પોસ્ટ બનાવવી
• પોસ્ટને લાઇક કરવી
• પોસ્ટ પર ટિપ્પણી કરવી
• અન્ય વપરાશકર્તાઓને ફોલો કરવા

અહીં એક Cypress ટેસ્ટનું ઉદાહરણ આપેલું છે જે ચકાસે છે કે વપરાશકર્તા સફળતાપૂર્વક નવી પોસ્ટ બનાવી શકે છે:

it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

બેંકિંગ એપ્લિકેશનનું પરીક્ષણ કરવું

બેંકિંગ એપ્લિકેશન્સ માટે, Cypress નો ઉપયોગ નિર્ણાયક કાર્યોના પરીક્ષણ માટે કરી શકાય છે જેમ કે:

• સુરક્ષિત રીતે લોગ ઇન કરવું
• એકાઉન્ટ બેલેન્સ તપાસવું
• ભંડોળ ટ્રાન્સફર કરવું
• લાભાર્થીઓનું સંચાલન કરવું

ભંડોળ ટ્રાન્સફરને ચકાસવા માટેનો એક ટેસ્ટ આના જેવો દેખાઈ શકે છે (સુરક્ષા માટે યોગ્ય સ્ટબિંગ સાથે):

it('Transfers funds successfully', () => {
  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')
})

નિષ્કર્ષ

Cypress એક શક્તિશાળી અને બહુમુખી એન્ડ-ટુ-એન્ડ ટેસ્ટિંગ ફ્રેમવર્ક છે જે તમને તમારી વેબ એપ્લિકેશન્સની ગુણવત્તા અને વિશ્વસનીયતા સુનિશ્ચિત કરવામાં મદદ કરી શકે છે. તેની ડેવલપર-ફ્રેન્ડલી API, શક્તિશાળી સુવિધાઓ અને ઉત્તમ પ્રદર્શન તેને વિશ્વભરના ડેવલપર્સ અને QA એન્જિનિયરોમાં લોકપ્રિય પસંદગી બનાવે છે. આ માર્ગદર્શિકામાં દર્શાવેલ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને, તમે અસરકારક Cypress ટેસ્ટ લખી શકો છો જે તમને વિકાસ પ્રક્રિયામાં વહેલી તકે બગ્સને પકડવામાં અને તમારા વપરાશકર્તાઓને ઉચ્ચ-ગુણવત્તાવાળા સોફ્ટવેર પહોંચાડવામાં મદદ કરશે.

જેમ જેમ વેબ એપ્લિકેશન્સનો વિકાસ થતો રહેશે, તેમ તેમ એન્ડ-ટુ-એન્ડ ટેસ્ટિંગનું મહત્વ વધતું જશે. Cypress ને અપનાવવાથી અને તેને તમારી વિકાસ વર્કફ્લોમાં એકીકૃત કરવાથી તમને વધુ મજબૂત, વિશ્વસનીય અને વપરાશકર્તા-મૈત્રીપૂર્ણ વેબ અનુભવો બનાવવાની શક્તિ મળશે.