How to check if an element exists or not using Cypress?

Cypress is a tool that helps web developers and testers to make sure their websites work properly. It can check if a certain part of the website exists.

1. TestInfrastructure&End-to-EndTestingCloud
Howtocheckifanelement
existsornotusingCypress?

2. Cypressisatoolthathelpswebdevelopersandtesterstomakesure
theirwebsitesworkproperly.Itcancheckifacertainpartofthe
websiteexists.Thisishelpfulbecauseithelpstocatchproblems
beforeusersdo.Elementpresenceisoneofthefirstthingsyoushould
testwithCypressinyourproject.Inthisarticle,wewilllookathowto
testifanelementexistsornot.Also,ifitexists,howdoyoucheck
whetheritisvisibleornot?.
WhatareCypressElements?
●ElementsinwebapplicationsrefertoindividualHTMLelements
thatmakeupawebpage’sstructureandcontent.
●Examplesofelementsincludebuttons,textboxes,links,and
images,eachwiththeirownattributeslikeid,class,andstyle.
●TheseattributescanbeusedtointeractwithCSSorJavaScript
selectors.
●Elementsareimportantbecausetheydefineapage’sstructure
andbehavior.
●Byselectingandinteractingwithelements,youcancreate
automatedteststoensurethatthewebapplicationbehavesas
expectedforallusers.

3. ●InCypress,elementsaretheHTMLelementsofyourwebsite
thatyouwishtointeractwithortest.
●Tointeractwithortesttheseelements,simplyselectthemusing
aselectorsimilartoCSS.
WhyElementExistenceMattersin
Cypress?
Awebsiteislikeapuzzlewithinteractivepiecessuchasbuttonsand
forms.Testinginvolvesensuringthatthesepiecesareinthecorrect
placeandfunctioningproperly.Checkingifanelementexistsis
importantbecausedifferentpartsofawebsitecanchangebasedon
useractions.
Forinstance,a“Submit”buttonmayappearafterfillingoutaform,so
it’snecessarytocheckifitshowedup.Thishelpsidentifyissues
beforeusersencounterthem,allowingforsmootherexperiences.

4. HowtoVerifytheexistenceofan
elementusingCypress?
Cypressprovidesseveralmethodstoverifytheexistenceofelements
onawebpage.Let’sdiveintoeachapproachandunderstandhowto
implementthemeffectively.
1.cy.get()Method
Thecy.get()methodinCypressisusedtoselectandretrieveelements
onthepagebasedonvariousselectorssuchasclassnames,IDs,
attributes,andmore.Toverifyifanelementexists,developerscanuse
theshould()commandalongwiththecy.get()method.
Usingthe.should(‘exist’)assertionwithcy.get()ensuresthatthe
selectedelementispresentonthepage.

5. 2.cy.contains()Method
Thecy.contains()methodisusedtofindanelementbasedonitstext
content.Thismethodcanalsobeutilizedtocheckifanelementwith
specific textexistsonthepage.
3.cy.find()Method
Thecy.find()methodisusefulwhendealingwithnestedelements
withinaparentelement.Itallowsyoutosearchforelementswithin
thecontextofanotherelement,ensuringmorefocusedsearches.

6. 4.cy.get().should()withCustomAssertions
Cypressenablesdeveloperstocreatecustomassertionsusingthe
cy.should()method.Thisisparticularlyusefulwhenyouwantto
implementmorespecific checksbeyondjustelementexistence.
5.Using.should()withTimeout
Sometimes,elementsmightloadasynchronouslyorwithaslight
delay.Insuchcases,youcanusethe.should()assertionwitha
timeouttoensurethatCypresswaitsfortheelementtoappear.

7. ConditionalTestingwithCypress:
ConditionaltestinginCypressistheactofintegratingconditional
logicintoyourtestscriptstomakedecisionsandperformactions
basedonspecific conditionsoroutcomesduringthetestexecution.
Thismethodenablesyoutodesignmoreflexibleandadaptabletests
thatcanhandlevariousscenariosandrespondaccordingly.Cypress
offersarangeofcommandsandAPIsthatyoucanutilizetoachieve
effectiveconditionaltesting.Thefollowingisanillustrationofhow
Cypresscanbeusedforconditionaltesting.
Example-1

8. Inthisexample,thetestscriptvisitsawebpageandperforms
conditionaltestingonanelement’sexistenceaswellasthetitleofthe
page.Dependingonwhethertheconditionsaremetornot,thescript
logscorrespondingmessagestotheCypresstestingrunner’soutput.
Cypressprovidesafluentandintuitivesyntaxforperforming
conditionaltestingwithinyourtestscripts.Youcanuseassertions,
promises,andregularJavaScriptlogictobuildcomplexconditions
andactionsbasedontheresultsofthoseconditions.
ConditionaltestinginCypress,similartoothertestingframeworks,
helpsyoucreatemoreversatileandeffectiveteststhatcanadaptto

9. differentscenarios,makingyourtestingprocessmorerobustand
reliable.
Example2:
Inthiscodesnippet,Cypressfirstensurestheexistenceofthebutton
elementusing.should(‘exist’).Itthenretrievestheelementusing
.then(),andthesubsequentconditionalcheckdetermineswhetherthe
buttonexists.Iftheconditionismet,indicatingthebutton’spresence,
Cypressclicksthebuttonusingcy.wrap(button).click().Ifthecondition
fails,theelseblockfacilitatestheexecutionofanalternativeaction.
Real-WorldApplicationsofElementExistenceChecks:

10. Let’sthinkaboutsomeeverydaysituationswherecheckingelement
existenceissuperhelpful:
1.FormSuccessMessage
Afteruserssubmitaform,asuccessmessagemightappear.Using
Cypress,youcancheckifthatmessageshowsup,makingsureusers
knowtheirformwassubmittedsuccessfully.
2.MenuNavigation
Youhaveadropdownmenuthatappearswhenusershoverovera
button.Youwanttoconfirm thatthemenuappearswhenusersdo
thathoveraction.
3.ResponsiveDesign
Differentelementsmightappearordisappearonmobileversus
desktopversionsofyoursite.YoucanuseCypresstoensurethat
theseelementsshowuporhideasintended.
4.UserAccessControl

11. Certainbuttonsorlinksmightonlybevisibletocertaintypesofusers.
Cypresshelpsyouverifythattheseelementsareshowntotheright
people.
Conclusion:
Webtestingisnolongeradifficultandtime-consumingtask,thanksto
toolslikeCypress.The“ifelementexists”capabilityencapsulatesthe
essenceofconditionaltesting,enablingdevelopersandtestersto
craftteststhatcloselymimicrealuserinteractions.Thisfunctionality
notonlysimplifies testingbutalsoencouragesamorethoughtful
approachtoapplicationbehaviour.ByleveragingCypress’sintuitive
commandsandpowerfulassertions,developerscanstreamlinetheir
testsuites,reduceredundancy,andbuildmorerobustweb
applications.So,embracethepowerofCypressandembarkona
journeytoelevatethequalityofyourwebdevelopmentprojects.
Source:Thisblogwasoriginallypublishedat
https://testgrid.io/blog/how-to-check-if-an-element-exists-or-not-using-
cypress/