13 የሳይፕረስ ምሳሌዎች

በመጨረሻው ጽሁፍ ላይ ሳይፕረስ ምን እንደሆነ, አርክቴክቸር, የመጫን ሂደቱን እና ለመጫን የሚያስፈልጉትን ቅድመ-ሁኔታዎች አይተናል. ነገር ግን ፈተናዎቻችንን መፃፍ ከመጀመራችን በፊት ሳይፕረስን መጫን አለብን። ጠቅ ያድርጉ እዚህ ሳይፕረስን ለመጫን ዝርዝር እርምጃዎችን ለማግኘት.

የሳይፕረስ ምሳሌ

ይህ ጽሑፍ ስለ የሳይፕረስ ምሳሌየJSON ምሳሌዎች፣ ተለዋዋጮች እና ተለዋጭ ስሞች፣ እና የሙከራ ጉዳዮችን እንዴት እንደሚጽፉ። ስለዚህ እንጀምር።

የሳይፕረስ ምሳሌ
የሳይፕረስ ምሳሌ

ዝርዝር ሁኔታ

ሳይፕረስ JSON ምሳሌ

መጀመሪያ ላይ የሳይፕረስ ፈተና ሯጭን ስንከፍት ሀ cypress.json የማዋቀር ፋይል ተፈጥሯል። በፕሮግራሙ ወይም አውቶማቲክ ኮድ ውስጥ እንዲተገበሩ የሚረዱ አንዳንድ ንብረቶችን ለመተግበር እና ለማቆየት የሚያስችል መንገድ የሚያቀርበውን ቅንጣቢ ማከማቸት እንወዳለን። በተመሳሳይ፣ሳይፕረስ እንደ ውቅረት ባህሪያት የምናቀርባቸውን ማናቸውንም እሴቶች ለማከማቸት JSON ፋይል አለው።

እስቲ አንዳንዶቹን እንመልከት በእኛ ሳይፕረስ JSON ውስጥ ማዋቀር የምንችላቸው ምሳሌዎች ፋይል.

ሳይፕረስ አስቀድሞ አንዳንድ ነባሪ የውቅር እሴቶች ተመድቧል። በፍላጎታችን መሰረት ልናበጅላቸው የምንችላቸው ብዙ አማራጮች አሉ። ለምሳሌ ፣ እኛ ማቅረብ እንችላለን baseURL በእኛ ውስጥ ያለው ንብረት cypress.json ፋይል. ስለዚህ፣ ስክሪፕቱን በምናሄድ ቁጥር ቤዝዩአርኤል ተዘጋጅቶ ያስነሳል።

አማራጭነባሪ እሴቶችመግለጫ
ቤዝ ዩአርኤልባዶይህ አማራጭ እንደ ሀ ዩ አር ኤል ቅድመ ቅጥያ ለ cy.ጥያቄ() or ሳይ.መጎብኘት() ትዕዛዞች.
ለፋይል ለውጦች ይመልከቱእውነተኛይህ አማራጭ በነባሪነት እንደ እውነት ተቀናብሯል። ፋይሎቹን ለለውጦች ይመለከታቸዋል እና ማናቸውም ማሻሻያዎች ሲደረጉ እንደገና ያስጀምራቸዋል።

ቤዝURLን ያስተካከልነው እና በእኛ ውስጥ የፋይል ለውጥ ንብረቶችን የምንመለከትበት ቅጽበታዊ እይታ ከዚህ በታች አለ። Cypress.json ፋይል.

ማስታወሻ፡ በሳይፕረስ ውቅረት ውስጥ ያሉትን አማራጮች ሁሉ በኋላ እንደ የተለየ ርዕስ እንነጋገራለን።

የሳይፕረስ ምሳሌ
cypress.json ፋይል

ሳይፕረስ ክፈት

ቀደም ሲል የሳይፕረስ ፕሮጀክት እንዴት መፍጠር እንደሚቻል አይተናል። እዚህ የሳይፕረስ ፈተናን ሯጭ እንዴት መክፈት እና ማስፈጸም እንደሚቻል እናያለን። እንግዲያውስ እንዝለቅ!

ሳይፕረስን በ npm በኩል ከጫኑት፣ በ./node_modules ማውጫ ውስጥ ተጭኗል። ስለዚህ የእኛን መክፈት እንችላለን የሳይፕረስ ሙከራ ሯጭ የ npm ትዕዛዝ በማለፍ ከ ዘንድ ሥር የእኛ የፕሮጀክት ማውጫ.

ሳይፕረስን ከሚከተሉት መንገዶች በአንዱ መክፈት እንችላለን

1. የመንገዱን ሙሉ ትዕዛዝ በመስጠት

./node_modules/.bin/cypress open

2. አቋራጩን በመጠቀም ለ npm bin

$(npm bin)/cypress open

3. npx በመጠቀም

እዚህ npx የሚደገፈው በ npm> v5.2 ብቻ ነው፣ ወይም በተናጠል መጫን እንችላለን።

npx cypress open

4. ክር በመጠቀም

yarn run cypress open

አሁን በእኛ ተርሚናል ውስጥ ሙሉውን የመንገድ ትዕዛዝ በማለፍ ሳይፕረስን እንዴት እንደሚከፍት እንመለከታለን.

1. በቁጥር 1 ላይ ከላይ የተጠቀሰውን ትዕዛዝ ማለፍ አለብዎት, እና በተርሚናል ውስጥ የሚከተለውን ማየት ይችላሉ.

ተርሚናል ውስጥ ሳይፕረስ በመክፈት ላይ

2. ከአፍታ በኋላ የሳይፕረስ ቴስት ሯጭ ሲጀመር እናያለን እና ከዚህ በታች እንደሚታየው የሙከራ ሯጩን ማየት እንችላለን። የፈተና ሯጭ ከጀመረ በኋላ አንዳንድ የናሙና ፈተና ጉዳዮችን ማየት ይችላሉ። ሳይፕረስ በፕሮጀክት ስርወ ውስጥ የሙከራ ጉዳዮችን በመሠረታዊ አቀማመጥ እና በመፃፍ የሚረዳን የሙከራ አቃፊ ፈጥሯል።

በTest Runner ውስጥ ያሉ የምሳሌ ፋይሎች

አሁን ወደ ቪኤስ ኮድ እንመለስ። በመጀመሪያ፣ አንዳንድ ሰዎች የተሞሉ የአቃፊ አወቃቀሮችን ማየት ይችላሉ። አሁን እያንዳንዱን የአቃፊውን መዋቅር እንከፋፍለን እና በዝርዝር እንመልከታቸው.

በሳይፕረስ ውስጥ የአቃፊ መዋቅር

እንደምናየው ሳይፕረስ በእኛ ኮድ አርታኢ ውስጥ የአቃፊ መዋቅር ፈጥሯል። በዝርዝር እንነጋገራለን.

በሳይፕረስ ምሳሌ ውስጥ ያሉ ማህደሮች
  1. ግጥሚያዎች - የቋሚው አቃፊ የማይለዋወጥ እና በፕሮጀክቱ ውስጥ እንደገና ጥቅም ላይ ሊውል የሚችል ውሂብ ይዟል። አንድ ምርጥ ልምምድ በፈተናዎቻችን ውስጥ ሃርድኮር ዳታ (እንደ ምስክርነቶች፣ የፈተና መልእክቶች) አይደለም። በምትኩ፣ በJSON፣ CSV ወይም HTML ፋይል እናገኛቸዋለን። የውሂብ ፋይሎቻችንን በቋሚ አቃፊ ስር መፍጠር አለብን። ይህንን ፋይል በመጠቀም በፈተና ውስጥ እንገባለን። cy.ቋሚ ትዕዛዝ.
  2. ማስተባበር - በዚህ ፎልደር ስር ብዙውን ጊዜ ልዩ ፋይል ብለን የምንጠራቸውን ትክክለኛ የሙከራ ጉዳዮችን እንጽፋለን። በውህደት አቃፊው ውስጥ፣ በፕሮጀክታችን መስፈርቶች መሰረት ብዙ ማህደሮችን እና ብዙ የሙከራ ፋይሎችን በእያንዳንዱ አቃፊ ስር መፍጠር እንችላለን። እንዲሁም ከአንዳንድ ምሳሌዎች ጋር የተዘጋጁ አንዳንድ ነባሪ ዝርዝር ፋይሎችን ማየት ይችላሉ።
  3. ተሰኪዎች – የፕለጊንስ ማህደር የሳይፕረስን የውስጥ የስራ ባህሪ እንድትነካ፣ እንድትደርስ እና እንድታስተካክል የሚያስችሉህን ፋይሎች ይዟል። በተሰኪዎች፣ የኮድዎ መዋቅር እያንዳንዱን ክፍል (ከመፈጸሙ በፊት ወይም በኋላ) ቀጥተኛ መዳረሻ ያላቸውን የፍተሻ ትዕዛዞችን ለማስፈጸም የሚረዳውን ብጁ ኮድ መጻፍ ይችላሉ። በነባሪ, ሳይፕረስ በዚህ መንገድ ላይ ተሰኪዎችን ይፈጥራል cypress/plugin/index.js
  4. ድጋፍ - በድጋፍ አቃፊው ስር መደበኛ ወይም እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ዘዴዎችን ለማቅረብ የሚረዱን ፋይሎች አሉን። ከእያንዳንዱ ዝርዝር አሂድ በፊት ሳይፕረስ የድጋፍ ማህደርን ይሰራል። ስለዚህ የድጋፍ ፋይሉን በእያንዳንዱ ሌላ ልዩ ፋይል ውስጥ ማስገባት አስፈላጊ አይደለም. ይህ አቃፊ በሁሉም ሌሎች ልዩ ፋይሎች ላይ ጥቅም ላይ የሚውሉ ተደጋጋሚ ዘዴዎችን ወይም ዓለም አቀፍ ተግባራትን ለመጨመር ትክክለኛው ቦታ ነው።
  5. መስቀለኛ ሞጁሎች - ይህ አቃፊ እኛ የጫንናቸው ሁሉንም የ npm ጥቅሎችን ይይዛል። የመስቀለኛ መንገድ ሞጁሎች ማንኛውንም የመስቀለኛ መንገድ ፕሮጀክት ለማሄድ ጠቃሚ ናቸው። በሳይፕረስ ፕሮጄክታችን ውስጥ ያሉት ሁሉም ተግባራት የተፃፉት በእኛ መስቀለኛ ሞጁሎች አቃፊ ውስጥ ነው። በመስቀለኛ ሞጁሎች ውስጥ ምንም አይነት ፋይሎችን አንቀይርም።
  6. ሳይፕረስ.json - በእኛ ውስጥ ብዙ አወቃቀሮችን ማከል እንችላለን ሳይፕረስ.json ፋይል. ለምሳሌ፣ በሳይፕረስ ውቅር ፋይል ውስጥ ያሉትን ነባሪ አማራጮች ለመሻር የአካባቢ ተለዋዋጮችን፣ ቤዝዩአርኤልን፣ የጊዜ ማብቂያዎችን ወይም ሌሎች አማራጮችን ማከል እንችላለን።

ተለዋዋጮች እና ተለዋጭ ስሞች

በሳይፕረስ ውስጥ ያሉትን ተለዋዋጮች እና ተለዋጭ ስሞች በዝርዝር እንነጋገራለን ።

ሳይፕረስን ስንረዳ እና ስንማር፣ ነገሩን ለመረዳት አስቸጋሪ ሊሆንብን ይችላል። ያልተመሳሰለ ኤፒአይ ተፈጥሮ በሳይፕረስ ውስጥ። ነገር ግን ወደፊት ብዙ ምሳሌዎችን እንደምናየው, ኬክ ይሆናል. ብዙ ዘመናዊ አሳሾች ያልተመሳሰሉ ኤፒአይዎችን ይጠቀማሉ፣ እና የኮር መስቀለኛ መንገድ ሞጁሎች እንኳን ባልተመሳሰል ኮድ ይፃፋሉ። በተጨማሪም ፣ ያልተመሳሰለ ኮድ በጃቫስክሪፕት ኮድ ውስጥ በሁሉም ቦታ አለ። ስለዚህ, በሳይፕረስ ውስጥ የመመለሻ ዋጋዎችን እንመለከታለን.

በሳይፕረስ ውስጥ እሴቶችን መመለስ

ሁሉም የሳይፕረስ ትዕዛዞች ናቸው። ተሰልፏል ና ሩጫ አልተመሳሰልም።. ስለዚህ, እኛ ከማንኛውም የመመለሻ ዋጋዎች ጋር መመደብ ወይም መገናኘት አይችሉም ከማንኛውም የሳይፕረስ ትዕዛዞች. ተመሳሳይ የሆነ ትንሽ ምሳሌ እንመለከታለን.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

ዝግቶች

ከላይ በተጠቀሰው ትዕዛዝ በኩል የአዝራሩን ባህሪያት ማግኘት አንችልም. በምትኩ፣ .ከዚያን ()ን በመጠቀም የሳይፕረስ ትዕዛዞችን መስጠት እንችላለን። እነዚህን እንጠራቸዋለን መዘጋት.

ከዛ()

.ከዚያ () ከቀዳሚው ትዕዛዝ የሚወጣውን ክር ለመድረስ ያግዝዎታል. ከተረዱት ቤተኛ ተስፋዎች, እሱ በተመሳሳይ መንገድ ነው .ከዚያ () ከሳይፕረስ ጋር ይሰራል. እንዲሁም በ .ከዛ () ውስጥ የተለያዩ ትዕዛዞችን መክተት እንችላለን። እያንዳንዱ የጎጆ ትእዛዝ በ loop ውስጥ የቀደመውን ትዕዛዝ መድረስ ይችላል። ይህንንም በምሳሌ እንመለከታለን።

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

እንጠቀማለን ዝግቶች ከዚህ በላይ ባለው ምሳሌ ውስጥ የቀደመውን ትዕዛዝ ማጣቀሻ በ loop ውስጥ እንድንይዝ ያስችለናል ።

ተለዋዋጮች

ብዙውን ጊዜ ለተለዋዋጭ እሴት ለመመደብ እንወዳለን። ነገር ግን በሳይፕረስ ውስጥ, እምብዛም እንጠቀማለን const, var, እና let. መዝጊያዎችን በምንጠቀምበት ጊዜ የተመረቱትን ነገሮች ወደ ተለዋዋጭ ሳንመደብላቸው መድረስ እንችላለን።

ነገር ግን ተለዋዋጭ ልናውጅ የምንችልባቸው አንዳንድ ሁኔታዎች አሉ ጊዜ የ የእቃው ሁኔታ ይለወጣል (ተለዋዋጭ እቃዎች). ለምሳሌ አንድን ነገር ካለፈው እሴቱ ጋር ማወዳደር ከፈለግን ከሚቀጥለው እሴት ጋር ለማነፃፀር ወደ ተለዋዋጭ እንገልፃቸዋለን። ለዚህ አንድ ምሳሌ እንመልከት.

<button>increment</button>

You clicked button <span id="num">0</span> times

እዚህ፣ ቁጥሩ 0 ያለው ስፋት ቁልፉን በተጫንን ቁጥር እየጨመረ ይሄዳል። ስለዚህ የአዝራሩ ነገር በማንኛውም ጊዜ ሁኔታውን የመቀየር ዝንባሌ ይኖረዋል።

አሁን ይህንን በሳይፕረስ ኮድ ውስጥ ለተለዋዋጭ እንዴት መመደብ እንደምንችል እንይ።

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

ቁልፉን በተጫንን ቁጥር span ሁኔታውን እየቀየረ ስለሆነ፣ አሁን ያለውን እና የቀድሞ ሁኔታውን ለማነፃፀር ለተለዋዋጭ ልንሰጠው እንችላለን። ተለዋዋጭ በሆኑ ነገሮች ላይ ብቻ ተለዋዋጮችን እና መጠቀምን እንፈልጋለን const ጥሩ አካሄድ ነው።

ተለዋጭ ስሞችን

ቀደም ሲል, በሳይፕስ ውስጥ ምን አይነት ተለዋዋጮች እና ውሱንነት አይተናል. ይህንን ገደብ ለማሸነፍ ተለዋጭ ስሞች ወደ ስዕሉ ይመጣሉ. አሊያስ በሳይፕረስ ውስጥ ካሉት ኃይለኛ ግንባታዎች አንዱ ነው። ይህንንም በምሳሌዎች በዝርዝር እንመለከታለን።

በአጠቃላይ፣ ተለዋጭ ስም (Alases) እንደ ተለዋዋጭነት ለመስራት ሊረዳዎት ይችላል። ሆኖም፣ ከተለዋዋጭ ይልቅ ተለዋጭ ስም ሊረዳን የሚችልባቸው አንዳንድ የአጠቃቀም አጋጣሚዎች አሉ።

1. DOM ኤለመንቶችን እንደገና ተጠቀም

የ DOM አባሎችን ስም እና በኋላ እንደገና ለመጠቀም ልናገኛቸው እንችላለን። ተለዋጭ ስሞችም ገደቦችን ያሸንፋሉ ከዛ() ትዕዛዝ.

2. አውድ ማጋራት።

በቀላል ትርጉም፣ አውድ መጋራት ነገሩን በመንጠቆቹ እና በፈተናዎቹ መካከል መጋራት ነው። አውድ ለመጋራት ዋናው የአጠቃቀም ጉዳይ ማስተናገድ ነው። cy.fixture - በፋይል ውስጥ ቋሚ የውሂብ ስብስብ መጫን ነው.

ተለዋጭ ስሞችን እንዴት ማግኘት ይቻላል?

ተለዋጭ ስሞችን እንዴት ማግኘት እንደሚቻል እዚህ እናያለን። እኛ እንጠቀማለን .as() ኤለመንቱን ለበኋላ ጥቅም እንዲሰጥ ትእዛዝ። የሚፈለገው መለኪያ የ ተለዋጭ ስም. ተለዋጭ ስም በ ውስጥ እንደ ማጣቀሻ ጥቅም ላይ ይውላል cy.get() or cy.wait() በመጠቀም @ ቅድመ ቅጥያ።

ተለዋጭ ስሞችን እንዴት ማግኘት እንደሚቻል አንድ ምሳሌ እንመለከታለን።

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

በመጀመሪያው መስመር የተጠቃሚ_መግቢያ መታወቂያውን ከDOM እያገኘን ነው። ከዚያ እንጠቀማለን .as() እና በስም የተጠቃሚ ስም ማወጅ. በሁለተኛው መስመር የእኛን ተለዋጭ ስም እያገኘን ነው። @ ምልክት እና ማከናወን ዓይነት ድርጊት.

የሳይፕረስ ሙከራ ምሳሌ

የመጀመሪያውን የሙከራ መያዣችንን በሳይፕረስ መፃፍ እንጀምራለን. በጣም ቀላል እና ቀላል ነው. ከዚያ በፊት ግን የሳይፕረስ ፈተናን አወቃቀሮችን እንመለከታለን።

መሰረታዊ የሳይፕረስ ግንባታዎች

ሳይፕረስ ለሙከራ ጉዳዮች የሞቻ አገባብ ተቀብሏል እና ሞቻ የሚያቀርባቸውን ሁሉንም አማራጮች ይጠቀማል። ከዚህ በታች ለሙከራ ጉዳዮቻችን በጋራ ጥቅም ላይ የሚውሉ መሰረታዊ የሳይፕስ ግንባታዎች አሉ።

  • ይግለጹ() - ሁሉንም የፈተና ጉዳዮችን ወደ አንድ ትልቅ ፈተና ያዋህዳል እና አንድ ላይ ይቧድናቸዋል። ሁለት መለኪያዎችን ይወስዳል - የፈተናውን መግለጫ እና የመልሶ መደወል ተግባር.
  • እሱ() በእኛ () ብሎክ ውስጥ የግለሰብ ፈተና ጉዳዮችን እንጽፋለን ። ይህ እገዳ ደግሞ ሁለት መለኪያዎችን ይወስዳል - አንድ ሙከራ ምን እንደሚሰራ እና ሁለተኛው ግቤት የመልሶ መደወል ተግባር ነው።
  • በኋላ() - ይህ በፋይሉ ውስጥ ካሉት ሁሉም ሙከራዎች በኋላ ይፈጸማል።
  • ከእያንዳንዱ በኋላ () - ይህ ከእያንዳንዱ ግለሰብ ፈተና በኋላ ይከናወናል.
  • ከዚህ በፊት () - በፋይሉ ውስጥ ካሉት ሁሉም ሙከራዎች በፊት ይሰራል።
  • ከእያንዳንዱ () በፊት - ከእያንዳንዱ ግለሰብ ፈተና በፊት ይፈጸማል.

የሙከራ መያዣ እንዴት እንደሚፃፍ?

ከመጀመራችን በፊት የፈተና ጉዳይ ምን እንደሆነ ማወቅ፣ መፃፍ እና ለመሠረታዊ የፈተና ጉዳይ ምን ደረጃዎች እንዳሉ ማወቅ አለብን።

1. ቅድመ-ግዴታ - እኛ የምንፈትነው የመተግበሪያው ሁኔታ።

2. እርምጃ - በመተግበሪያው ላይ አንዳንድ እርምጃዎችን እናከናውናለን.

3. ማረጋገጫ - ተግባሮቻችንን በሚመለከት የተለወጠውን ባህሪ እናረጋግጣለን ወይም እናረጋግጣለን።

እንመለከታለን ላምዳጊክስ ለሙከራ ምሳሌዎቻችን ማመልከቻ. በተመሳሳዩ አሰራር ፣ የሚከተለውን ሁኔታ በራስ-ሰር ለማድረግ እናስባለን

1. ድር ጣቢያውን ይጎብኙ https://lambdageeks.com/

2. ርዕሱ መነሻ - Lambda Geeks መሆኑን ያረጋግጡ
ሳይፕረስ ይጠቀማል cy እንደ የእሱ ዓይነት ፍቺ. እኛ እንጨምረዋለን cy ማንኛውንም ዘዴዎች ለመጥራት ትእዛዝ.
በመጀመሪያ፣ በእኛ ኮድ አርታዒ ውስጥ አዲስ ፋይል እንፍጠር።

1. የተሰየመ አዲስ አቃፊ ይፍጠሩ ቅንጭብ ማሳያ በማዋሃድ አቃፊ ስር.

አዲስ እጥፋት መፍጠርr

2. በ Demo አቃፊ ስር, አዲስ ፋይል ይፍጠሩ ናሙና.js. የመጀመሪያውን የፈተና ጉዳያችንን በዚህ ፋይል ውስጥ እንጽፋለን።

አዲስ ፋይል መፍጠር

አሁን የሙከራ ጉዳዮቻችንን መጻፍ እንጀምር!

1. 1. በመጀመሪያ ደረጃ, በመጠቀም ገጹን እንጎበኘዋለን ይጎብኙ() ዘዴ በሳይፕረስ. ይህ ትዕዛዝ ወደምናቀርበው URL ይሄዳል። በመግለጫ () እና እሱ () ብሎክ ውስጥ እናከብራቸዋለን።

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. አፕሊኬሽኑ አንዴ ከተከፈተ በኋላ ርዕሱን በመጠቀም እናረጋግጣለን። get() ዘዴ በሳይፕረስ .get() ሁሉንም የሲኤስኤስ መምረጫዎችን ከDOM ያመጣል።

የሚለውን በመጠቀም ርዕሱን እየደረስን ነው። title() ዘዴ እና እኛ የቻይ ቤተ-መጽሐፍትን በመጠቀም በትእዛዙ መሠረት የመጀመሪያውን ግቤት በአጭሩ በማለፍ እናረጋግጣለን ። eq. ሁለተኛው መለኪያ የምንጠብቀው ሕብረቁምፊ ነው.

 cy.title().should('eq','Home - Lambda Geeks')

ፍጠን! በሁለት ቀላል ደረጃዎች የሳይፕረስ ፈተና መያዣችንን ጽፈናል።

የኛን የፈተና ጉዳይ ሙሉ ኮድ እነሆ

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});
የሳይፕረስ ምሳሌ: የመጀመሪያ ሙከራ ጉዳይ

የሳይፕረስ መግቢያ ምሳሌ

ሳይፕረስን በመጠቀም የመግቢያ ገጽን በራስ-ሰር እንዴት ማድረግ እንደሚቻል ምሳሌዎችን እናያለን። ቀደም ሲል እንዳየነው, በሳይፕረስ ውስጥ የሙከራ መያዣ መጻፍ ቀላል ነው. አሁን በጽሑፍ መስክ እና ማረጋገጫዎች ውስጥ ያሉትን እሴቶችን ወደ ማቀናበር እንሂድ።

1. ድህረ ገጹን እንጎበኛለን https://demo.applitools.com/ በመጠቀም cy.visit ትዕዛዝ.

 cy.visit('https://demo.applitools.com/')

2. የትእዛዝ አይነትን በመጠቀም የተጠቃሚ ስም በተጠቃሚ ስም መስክ ውስጥ ያስገቡ። የተጠቃሚ ስሙን እንደ ህብረቁምፊ በአይነቱ እንደ መለኪያ እናስተላልፋለን።

 cy.get('#username').type('test123')

3. በተመሳሳይ, የይለፍ ቃሉን ለማስገባት ተመሳሳይ ትዕዛዝ እንጽፋለን

 cy.get('#password').type('123')

4. አሁን, በመጠቀም የመግቢያ አዝራሩን ጠቅ እናደርጋለን click() ዘዴ በሳይፕረስ.

cy.get('#log-in').click();

5. ከገባን በኋላ በመተግበሪያው ገጽ ላይ እናርፋለን. ስለዚህ URL እንዳለው እናረጋግጣለን። /app በመጠቀም ቅጥያ .include() ቁልፍ ቃል በ chai. የመጀመሪያው መመዘኛ እኛ እያረጋገጥን ያለነው ቁልፍ ቃል ሲሆን ሁለተኛው ግቤት ደግሞ የሚጠበቀው ውጤት ነው።

cy.url().should('include', '/app')

በአምስት ቀላል ደረጃዎች ለመግቢያ ተግባር የተሟላ ኮድ ጽፈናል። ለማጣቀሻዎ ሙሉ ኮድ ከዚህ በታች አለ።

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});
የመግቢያ ሙከራ መያዣ

ሳይፕረስ እና ተደጋጋሚ ጥያቄዎችን በማስጀመር ላይ ላሉ የተለመዱ ችግሮች መፍትሄዎች

ሳይፕረስን ለመክፈት በምንሞክርበት ጊዜ የሚያጋጥሙን አንዳንድ የተለመዱ ችግሮች ሊኖሩ ይችላሉ። አንዳንድ የተለመዱ ጉዳዮችን እንነጋገራለን.

1. በክፍት ሳይፕረስ ትእዛዝ ወቅት የ'ሳይፕረስ' ትዕዛዝ ማግኘት አልተቻለም

አንዴ ከተጫነ በኋላ, ከፕሮጄክቱ ማውጫ ስር ያለውን ክፍት የሳይፕስ ትዕዛዝ ማለፍ አለብን. ለምሳሌ, እርስዎ ሳይፕረስፕሮጀክት የሚባል ፕሮጀክት ፈጥረዋል; ማለፍ አለብህ npm init ወደ CypressProject አቃፊ በማሰስ ትእዛዝ ይስጡ። በተርሚናል ውስጥ ከታች ያለውን ትዕዛዝ በመስጠት ማሰስ ይችላሉ

cd CypressProject

አንዴ የፕሮጀክቱ መሰረት ከሆኑ በኋላ ያስተላልፉ npm init ጥገኞቹን ለማውረድ ትዕዛዝ.

አሁን ሳይፕረስን ለመክፈት አንዳንድ ሰዎች ወደ ማሰስ ይሞክራሉ። /node_modules አቃፊ እና ./bin እና ከዚያ የሳይፕስ ክፍት ትዕዛዙን ይለፉ. ሆኖም ግን, በዚህ መንገድ አይሰራም. ስለዚህ ይልቁንስ ሳይፕረስን ለመክፈት ከፕሮጀክት ማውጫ ስር ሙሉውን ክፍት ትዕዛዝ ይስጡ።

./node_modules/.bin/cypress open

እንዲሁም ስለ ሹልፉ ይጠንቀቁ '/'. ሁል ጊዜ ይህንን ያቅርቡ/' ሳይፕረስ ለመክፈት.

2. ሳይፕረስ በዚህ ላይ ስክሪፕቶችን ማስኬድ ስለተሰናከለ መጫን አይቻልም ስርዓት

ሳይፕረስን በመስኮቶች ውስጥ ሲጭኑ አንዳንድ ጊዜ ከላይ ያለውን ስህተት ሊያጋጥሙዎት ይችላሉ። በፀጥታ ልዩነት ምክንያት ነው. ከዚህ በታች ያለውን ትዕዛዝ በPowerShell ውስጥ በማለፍ ይህንን ስህተት መፍታት እንችላለን።

Set-ExecutionPolicy RemoteSigned

የማባዛት ደረጃዎች፡-

  • PowerShellን ይክፈቱ
  • ይህን ትዕዛዝ አሂድ Set-ExecutionPolicy RemoteSigned
  • ዓይነት Yes
  • አሁን በማለፍ ሳይፕረስን ይክፈቱ ./node_modules/.bin/cypress open. የሙከራ ሯጭ አሁን ይከፈታል።

በየጥ

1. በሳይፕረስ የሚደገፉት ኦፕሬቲንግ ሲስተሞች የትኞቹ ናቸው?

ሳይፕረስ ይደግፋል ማክ, የ Windows, እና ሊኑክስ ስርዓተ ክወናዎች.

2. ሳይፕረስ አውቶማቲክን በተንቀሳቃሽ ስልክ መተግበሪያዎች ውስጥ ይደግፋል?

ሳይፕረስ ቤተኛ በሆነ የሞባይል መተግበሪያ ላይ መሮጥ አይችልም። ነገር ግን እንደ Iconic Frameworks ባሉ አሳሽ ውስጥ የተፃፉ የሞባይል መተግበሪያዎችን መሞከር እንችላለን።

3. ሳይፕረስ በጃቫስክሪፕት ላይ የተመሰረቱ መተግበሪያዎችን ብቻ ይደግፋል ወይ?

አይ! ሳይፕረስ እንደ Ruby on Rails፣ Node፣ PHP፣ C # ባሉ ቋንቋዎች ከተፃፈ ከማንኛውም የድር አሳሽ ጋር መስተጋብር መፍጠር ይችላል። ግን ፈተናዎቻችንን በጃቫስክሪፕት እንጽፋለን። ያለበለዚያ ሳይፕረስ ከማንኛውም የፊት ፣ የኋላ ጫፍ ፣ ቋንቋ እና ማዕቀፍ ጋር መስተጋብር መፍጠር ይችላል።

ወደ ላይ ሸብልል