Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress

Sa tutorial na ito, tatalakayin namin nang detalyado ang Cypress Automation Framework. Sasakupin namin kung ano ang Cypress, kung paano ito naiiba mula sa iba pang mga framework ng pagsubok, arkitektura ng Cypress, at ang pamamaraan ng pag-install sa artikulong ito. Ang Cypress ay isang kapanapanabik na paksa at nakakatuwang malaman din. Magsimula na tayo!

Framework ng Awtomatikong Cypress

Ang Cypress Automation Framework ay isang purong tool sa pagsubok na nakabatay sa Javascript na pangunahing nakatuon sa pagsubok sa harap sa mga modernong aplikasyon sa web. Sa Cypress, ang mga application ay madaling subukan sa visual interface upang saksihan ang pagpapatupad ng pagsubok. Kaya, ang Cypress ay dumating bilang isang biyaya para sa parehong mga developer at inhinyero ng QA sa pamamagitan ng paggawa ng madali sa pagsulat ng script at pagpapatupad ng pagsubok. Bilang karagdagan, nagmumula ito sa isang natatanging runner ng pagsubok, na ginagawang madali ang pagmamanipula ng DOM at direktang tumatakbo sa Browser.

Talaan ng nilalaman

Ano ang Cypress?

Ang Cypress ay mas mabilis, mas mahusay at nagbibigay ng tumutukoy na pagsubok na tumatakbo sa isang browser. Ang Cypress ay pangunahing ihinahambing sa Selenium, ngunit ito ay ganap na naiiba. Ang Cypress ay hindi tumatakbo sa tuktok ng Selenium, na nangangahulugang ito ay ganap na malaya. Sa halip, tumatakbo ang Cypress sa tuktok ng Mocha, na kung saan ay muli isang balangkas na pagsubok na mayaman sa Javascript. Ito ay katugma sa Chai Assertion Library lamang, na maaaring ma-access ang isang malawak na hanay ng mga assertions ng BDD at TDD.

Pangunahing nakatuon ang Cypress sa tatlong magkakaibang uri ng pagsubok. Ang mga ito ay mga pagsubok na End-to-End, Mga pagsubok sa unit, at mga pagsubok sa Pagsasama. Maaaring magpatupad ang Cypress ng anumang mga pagsubok na maaaring tumakbo sa isang browser. Bilang karagdagan, ito ay kasama ng magkakaibang mga kakayahan sa pagpapatawa at pagpapatunay na nakakaakit patungo sa pagsubok sa harap.

Ang mga browser na sinusuportahan ng Cypress ay ang Chrome, Firefox, Edge, Electron, at Brave. Bukod dito, ang pagsubok sa cross-browser ay madaling makamit sa Cypress. Sa wakas, kahit na ang Cypress ay sumusuporta lamang sa Javascript, maaari rin itong isulat sa Typescript, pangunahing isinulat sa Javascript.

Pag-aautomat ng Cypress

Ang Cypress ay isang tool na buksan ang mapagkukunan na may isang libreng Runner ng pagsubok ngunit mayroong pagpepresyo para sa mga koponan at negosyo kung saan ka singil nila para sa Dashboard. Gayunpaman, ang Dashboard ay libre hanggang sa ilang sukat, maliban kung magdagdag ka ng mga karagdagang tampok tulad ng pagtuklas ng Flake, suporta sa Email, pagsasama ni Jira, at marami pa.

Pangunahing ginagamit ang Cypress upang i-automate ang mga script sa web (maaaring i-automate ang anumang tumatakbo sa isang browser). Hindi ito maaaring tumakbo sa katutubong mga mobile app ngunit maaaring i-automate ang ilan sa mga pagpapaandar ng mga mobile application kung ang mga iyon ay binuo sa isang browser.

Mga tampok

Maraming mga kamangha-manghang mga tampok na magagamit sa Cypress na tumayo mula sa anumang iba pang tool na awtomatiko. Dito, talakayin natin ang ilan sa mga pangunahing tampok, at magpapakilala kami sa ibang mga bahagi sa paglaon kapag nagsimula kaming magsulat ng aming mga kaso sa pagsubok!

  1. Awtomatikong naghihintay - Ang Cypress ay may kalamangan ng awtomatikong paghihintay. Hindi na namin kakailanganing magdagdag ng lakas na paghihintay at pagtulog para sa paghihintay para sa DOM na makuha ang elemento. Awtomatikong naghihintay ang Cypress para sa anumang pakikipag-ugnay sa mga elemento at pagpapatupad ng mga assertion. Kaya, ang mga pagsubok ay mabilis!
  2. Oras ng paglalakbay - Nakukuha ng Cypress ang mga screenshot sa panahon ng pagpapatupad ng pagsubok. Maaari naming tingnan ang mga resulta nang biswal sa real-time sa pamamagitan lamang ng pag-hover sa mga naipatupad na utos sa Dashboard. Sa ganitong paraan, mas madaling i-debug ang mga pagsubok
  3. Mga pagsubok sa pag-debug - Maaaring i-debug ng Cypress ang mga pagsubok mula sa mga tanyag na tool tulad ng mga tool ng Developer. Ang mga error ay nababasa, at ang mga stack ay madaling masusubaybayan.
  4. Matigil ang mga kahilingan - Ang Cypress ay may mga pagpipilian upang kumpirmahin at kontrolin ang pag-uugali ng pag-andar, mga tugon sa network, o mga timer na ginagamit ng mga stubs at spies.
  5. Patuloy na Pagsasama - Ang Cypress ay hindi nakasalalay sa anumang iba pang mga karagdagang serbisyo sa CI. Gayunpaman, sa pagpapatakbo ng utos para sa pagsubok, madaling ma-access ang pagsasama.

Pabula tungkol kay Cypress

Mayroong isang alamat na ang Cypress ay maaaring tumakbo lamang sa Javascript-friendly na mga web application. Gayunpaman, maaaring subukan ng Cypress ang anumang mga application ng web na itinayo kasama ang Django, Ruby on Rails, Laravel, atbp Bilang karagdagan, sinusuportahan ng Cypress ang anuman sa mga wika ng pagprograma tulad ng PHP, Python, Ruby, C #, atbp. Gayunpaman, nagsusulat kami ng aming mga pagsubok sa Javascript ; lampas doon, gumagana ang Cypress sa anumang aplikasyon.

Mga Bahagi ng Cypress

Mayroong dalawang pangunahing bahagi sa Cypress. Sila ay Runner ng Pagsubok at Tapalodo.

Saypres
Runner ng Cypress Test
Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Tampok ng Pagsubok ng Cypress

Runner ng Pagsubok - Nagbibigay ang Cypress ng natatanging runner ng pagsubok na ito, kung saan maaaring matingnan ng gumagamit ang mga utos sa panahon ng pagpapatupad at aplikasyon sa ilalim ng pagsubok.

Mayroong ilang mga subcomponent sa ilalim ng Test runner. Sila ay

  1. Log ng Utos - Ito ay isang visual na representasyon ng test suite. Maaari mong makita ang mga utos na naisakatuparan sa pagsubok, mga detalye ng assertion, at mga block ng pagsubok.
  2. Menu ng Katayuan sa Pagsubok - Ipinapakita ng menu na ito ang bilang ng mga kaso ng pagsubok na naipasa o nabigo at ang oras na ginugol para sa pagpapatupad.
  3. Preview ng URL - Ito ay magbibigay sa iyo ng impormasyon tungkol sa URL na iyong sinusubukan upang subaybayan ang lahat ng mga path ng URL.
  4. Sukat ng Viewport - Maaari mong itakda ang laki ng viewport ng app para sa pagsubok ng iba't ibang mga tumutugong layout
  5. Preview ng App - Ipinapakita ng seksyon na ito ang mga utos na tumatakbo sa real-time. Dito maaari mong gamitin ang Devtools upang i-debug o siyasatin ang bawat base.

Dashboard: Nagbibigay ang Cypress Dashboard ng kakayahang i-access ang mga pagsubok na naitala. Sa serbisyo ng Dashboard, maaari nating masaksihan ang bilang ng mga nakapasa, nabigo, o nilaktawan na mga pagsubok. Gayundin, maaari nating tingnan ang mga snapshot ng mga nabigong pagsubok sa pamamagitan ng paggamit ng cy. utos ng screenshot (). Maaari mo ring saksihan ang video ng buong pagsubok o ang clip ng mga nabigong pagsubok.

Arkitektura ng Cypress

Karamihan sa mga tool sa pagsubok ay tumatakbo sa server sa labas ng Browser at nagsasagawa ng mga utos sa network. Ngunit, tumatakbo ang Cypress sa Browser kung saan tumatakbo din ang application. Sa ganitong paraan, maaari nitong ma-access ang lahat ng mga elemento ng DOM at lahat sa loob ng Browser.

Tumatakbo ang Node server sa likod ng Cypress sa panig ng client. Sa gayon, ang node server at Cypress ay nakikipag-ugnayan sa bawat isa, sinamahan at isakatuparan ang mga gawain upang suportahan ang pagpapatupad. Dahil may access ito sa parehong harap at likod na dulo, ang pagtugon sa aplikasyon nang real-time sa panahon ng pagpapatupad ay mahusay na nagagawa at maaari ring magsagawa ng mga gawain na kahit na tumakbo sa labas ng Browser.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Arkitektura ng Cypress

Nakikipag-ugnay din ang Cypress sa layer ng network at kinukuha ang mga utos sa pamamagitan ng pagbabasa at pagbabago ng trapiko sa web. Sa wakas, nagpapadala ang Cypress ng mga kahilingan sa HTTP at mga tugon mula sa node server sa Browser. Dahil ang Cypress ay tumatakbo sa layer ng network, nakakatulong itong baguhin ang code na maaaring makagambala sa pag-automate ng web browser. Ang komunikasyon sa pagitan ng Node server at Browser ay sa pamamagitan ng WebSocket, na nagsisimula sa pagpapatupad matapos masimulan ang proxy.

Kinokontrol ng Cypress ang lahat ng mga utos na tumatakbo sa at labas ng mga browser. Dahil naka-install ito sa isang lokal na makina, direkta itong nakikipag-ugnay sa operating system upang magrekord ng mga video, kumuha ng mga snapshot, maa-access ang layer ng network, at gumaganap nang madali ang mga pagpapatakbo ng file system. Maaaring ma-access ng Cypress ang lahat mula sa DOM, mga object sa window, lokal na imbakan, layer ng network, at DevTools.

I-install ang Cypress

Tatalakayin ng seksyong ito ang proseso ng pag-install na kailangang sundin bago isulat ang aming mga kaso sa pagsubok. Mayroong dalawang magkakaibang paraan upang i-download ang Cypress. Sila ay

  1. I-install sa pamamagitan ng npm
  2. Direktang pag-download

Bago namin mai-install ang Cypress, maaaring kailanganin namin ng ilang paunang mga kinakailangan upang simulan ang pag-install sa pamamagitan ng npm. Tingnan natin ang mga ito nang detalyado.

Mga pre-requisite

Kakailanganin namin ang ilang mga paunang kinakailangan bago isulat ang aming mga kaso sa pagsubok.

  • Tulad ng tinalakay sa itaas, tumatakbo ang Cypress sa isang node server; samakatuwid kakailanganin naming i-install ang Node.js.
  • Gayundin, upang isulat ang aming mga kaso sa pagsubok, kailangan namin ng isang editor ng code o IDE.

Sa halimbawang ito, gagamitin namin ang Visual Studio Code. Kaya sumisid tayo sa mga detalye.

Pag-install ng Node.js sa Mac

Dito, tatalakayin namin ang mga hakbang upang i-download ang Node.js sa Mac. Mag-navigate sa https://nodejs.org/en/download/. Mapupunta ka ngayon sa pahina ng pag-download.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Node package sa macOs

1. Mag-click sa macOS Installer. Sa pag-click, Maaari kang makahanap ng isang file ng package na na-download sa ibaba. Mag-click sa pkg file upang mai-install ang Node.js

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Pagpapakilala ng installer

2. Kapag na-click mo ang .pkg file, magbubukas ang installer ng Node. Ang seksyon ng pagpapakilala ay nagbibigay sa iyo ng mga bersyon ng Node.js at npm. Mag-click sa Magpatuloy

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Sumasang-ayon sa Lisensya
Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Payagan ang Pag-access sa Installer

3. Mag-click sa Sumang-ayon na Button at pagkatapos ay Magpatuloy. Lilitaw ang isang pop-up upang payagan ang pag-access sa iyong mga file sa folder ng Pag-download. Mag-click sa Ok.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Piliin ang Patutunguhan

4. Sa seksyong ito, maaari mong piliin ang patutunguhan kung saan dapat i-download ang Node.js. Muli, maaari kang pumili ayon sa iyong puwang ng system. Narito pipiliin ko ang default na lokasyon.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Uri ng Pag-install
Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Ipasok ang Username at Password upang mai-install

5. Mag-click sa pindutang I-install. Sa sandaling mag-click ka, isang pop-up na humihiling sa iyong system password ay lilitaw. Ipasok ang iyong password at mag-click sa I-install ang Software.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Buod ng Pag-install

6. Hurray! Na-install namin ang Node.js at npm package. Mag-click sa Isara upang matapos ang pag-install.

Pag-install ng Visual Studio Code sa Mac

Matagumpay naming na-install ang Node.js. Ngayon ay i-install namin ang aming code editor ng Visual Studio Code. Ang VS code ay isang malakas na tool na mayroong lahat ng mga built-in na pag-andar ng Javascript. Kaya sumisid tayo sa mga hakbang sa pag-install ng Visual Studio Code.

Tatalakayin namin dito ang mga hakbang upang mag-download ng VS code sa Mac. Una, mag-navigate sa https://code.visualstudio.com/download upang mapunta sa pahina ng pag-download ng VS code.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Pag-install ng VS Code sa Mac

1. Mag-click sa icon ng Mac. Maaari mong makita ang isang pakete na nai-download sa ibaba.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Naka-install na Package sa zip

2. Mag-click sa na-download na file upang i-unzip ang package. Kapag na-zip na, mahahanap mo ang Visual Studio Code sa iyong Mga Pag-download sa Finder.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
VS Code sa Mga Pag-download

3. Hurray! Na-download namin ang aming Code editor. Mag-click sa icon upang buksan ang Visual Studio Code.

Paglikha ng isang bagong proyekto sa Cypress

Makikita natin ngayon kung paano lumikha ng isang bagong proyekto ng node sa aming Visual Studio Code. Kapag nag-click ka sa icon ng VS code, makakarating ka sa Welcome page. Susunod, mag-click sa folder na Magdagdag ng Workspace upang lumikha ng isang bagong folder.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Paglikha ng bagong proyekto

Kapag nag-click ka sa folder, makakakuha ka ng isang pop-up na humihiling na magdagdag ng isang bagong folder. Ngayon mag-click sa lokasyon na nais mong idagdag ang workspace. Susunod, mag-click sa Bagong Folder at Idagdag ang pangalan ng Folder bilang CypressProject at i-click ang Buksan.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Bagong Paglikha ng folder

Ngayon ay lumikha kami ng isang folder para sa aming pagsubok sa Cypress. Bago namin simulang isulat ang aming mga pagsubok, dapat naming i-install ang package.json file. Bago i-install, ipaalam sa amin na malaman kung ano ang package.json file.

Ano ang file ng Package.json?

Ang Package.json ay binubuo ng lahat ng mga pakete ng npm sa isang file, karaniwang matatagpuan sa ugat ng proyekto. Karaniwan itong matatagpuan sa direktoryo ng ugat ng proyekto ng Node.js. Hawak ng file na ito ang lahat ng naaangkop na metadata na kinakailangan para sa proyekto. Ibinibigay nito ang lahat ng impormasyon sa npm at tumutulong sa pagkilala sa proyekto at hawakan ang mga dependency. Naglalaman ang file ng Package.json ng impormasyon tulad ng pangalan ng proyekto, mga bersyon, lisensya, mga dependency, at marami pa.
Ngayon naiintindihan na namin kung ano ang package.json file. Kaya, simulan natin ang mga hakbang upang i-download ang file sa aming Visual Studio code.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Buksan ang Terminal

1. Upang maipatupad ang aming mga utos, kailangan naming buksan ang Terminal. Sa tuktok ng VS code, mag-click sa Pandulo. Kapag bumukas ang dropdown, mag-click sa Bagong Terminal.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
I-install ang file ng package.json

2. Kapag bumukas ang terminal, i-type ang utos sa ibaba sa direktoryo ng proyekto at pindutin ang Enter.

npm init

3. Kapag pinindot mo ang Enter, maaari mong makita ang tiyak na impormasyon na ipinakita. Maaari mong i-type ang kinakailangang mga detalye sa Terminal at pindutin ang Enter upang makuha ang lahat ng mga patlang.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Mga detalye ng proyekto
  • Pangalan ng package: Maaari kang magbigay ng anumang pangalan sa iyong package. Iniwan ko itong blangko dahil paunang namamalagi sa pangalan ng folder na nilikha namin.
  • bersyon: Ibinibigay nito ang impormasyon ng bersyon ng npm. Maaari mong laktawan ito at pindutin ang Enter.
  • paglalarawan: Dito, maaari kang magbigay ng isang piraso ng karagdagang impormasyon sa package. Kung kinakailangan, maaari mong i-type ang paglalarawan at pindutin muli ang Enter.
  • Pasukan: Kinakatawan nito ang entry point ng application. Dahil paunang namamayan ito ng index.js, maaari nating laktawan ang patlang na ito at pindutin ang Enter.
  • Utos ng pagsubok: Utos na ibinigay upang patakbuhin ang pagsubok. Dito hindi kinakailangan na magbigay ng anumang mga utos, ngunit kung kinakailangan, tiyak na maaari kang magbigay ng anumang utos.
  • Repositorya ng Git: Kinakailangan ng patlang na ito ang landas sa git repository. Maaari mong iwanang blangko din ang patlang na ito.
  • Mga Keyword: Mga natatanging keyword upang makatulong na makilala ang proyekto. Maaari mo ring laktawan ang patlang na ito.
  • may-akda: Karaniwan ito ang username ng tao. Maaari mong idagdag ang iyong pangalan at pindutin ang Enter.
  • Lisensya: Ang paunang lisensya ay na-populate na ng ISC. Maaari kang magpatuloy sa pamamagitan ng pagpindot sa Enter.
  • 4. Kapag pinindot mo ang Enter, hihiling ng Terminal para sa kumpirmasyon sa pamamagitan ng listahan ng lahat ng mga ibinigay mong detalye. Uri Oo at pindutin muli ang Enter.
Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Pagkumpirma ng paglikha ng package.json

Nakagawa na kami ngayon ng isang package.json file. Maaari mong tingnan ang file sa iyong code editor kasama ang impormasyong ibinigay namin.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Nilikha ang file ng Package.json

Mga hakbang sa pag-install ng Cypress

Na-install namin ang lahat ng mga paunang kinakailangan para sa aming pag-download, node, at inisyal na npm ng Cypress. Tulad ng nabanggit sa itaas, mayroong dalawang paraan upang i-download ang Cypress.

I-download ang Cypress sa pamamagitan ng npm

Kailangan mong ipasa ang nabanggit na utos sa Terminal upang mai-install ang Cypress. Bilang karagdagan, kakailanganin mong ibigay ang utos sa direktoryo ng proyekto upang mai-install ang node at nabuo ang file ng package.json.

npm install cypress --save-dev
Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Utos sa Pag-install ng Cypress

Kapag naipasa mo na ang utos, mai-download nito ang lahat ng mga nauugnay na dependency na kinakailangan para sa proyekto. Sa pagsulat ng artikulong ito, ang pinakabagong bersyon ng Cypress ay 7.7.0. Maaaring magkakaiba ang bersyon sa oras na mag-download ka.

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang Cypress
Matagumpay na Pag-install ng Cypress

Sa pagtukoy sa imaheng nasa itaas, maaari mong makita na na-download namin ang Cypress. Maaari mong i-verify sa pamamagitan ng na-download na representasyon sa Terminal at ang pagdaragdag ng mga devDependencies sa package.json file.

Direktang pag-download

Maaari naming mai-download ang Cypress nang direkta mula sa kanilang CDN kung hindi mo ginagamit ang Node o npm package sa proyekto. Gayunpaman, ang pagtatala ng mga pagsubok sa Dashboard ay hindi posible sa pamamagitan ng direktang pag-download.

Maaari kang mag-download sa pamamagitan ng pag-click sa pag-download ng Cypress nang direkta mula rito link. Direktang i-download nito ang package. Kapag na-download na ang package, buksan ang zip file at i-double click. Tatakbo ang Cypress nang hindi nangangailangan ng anumang pag-install ng mga dependency. Ang pag-download na ito ay palaging kukuha ng pinakabagong bersyon batay, at ang platform ay awtomatikong matutukoy. Gayunpaman, ang pag-download ng Cypress sa pamamagitan ng npm ay inirerekumenda sa halip na isang direktang pag-download.

Para sa karagdagang post sa Teknolohiya, mangyaring bisitahin ang aming Pahina ng teknolohiya.

Tungkol kay Aishwarya Lakshmi

Cypress Automation Hakbang sa Hakbang: Cypress Architecture, I-install ang CypressIsa akong mahilig sa pagsubok at may halos 2+ taong karanasan sa domain ng pagsubok. Masigasig ako sa pagsubok at gustong galugarin ang mga bagong bagay sa aking larangan at ibahagi ang mga ito sa aking mga kapantay. Nasisiyahan ako sa pagsusulat ng mga blog sa panahon ng aking libreng oras sa pinakasimpleng ngunit mabisang paraan. Bilang isang tester, nais kong magkaroon ng mga bagay sa pagiging perpekto, kaya't hinihiling ko sa aking mga mambabasa na magkaroon ng perpektong pag-unawa sa teknolohiya. Pinananatili kong nai-update ang aking sarili sa mga bagong teknolohiya na nauugnay sa pagsubok at gumugugol ng oras sa pag-unawa sa mga ito. Natutuwa akong tulungan ang mga mag-aaral na maunawaan ang mga konsepto sa pagsubok.
Kumonekta tayo sa pamamagitan ng LinkedIn - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

1 naisip ang "Cypress Automation Step by Step: Cypress Architecture, Install Cypress"

  1. Pingback: Halimbawa ng Cypress: Buksan ang Cypress, Mga Variable, Unang Test Script - Lambda Geeks

Mga komento ay sarado.

en English
X