identifying the web element in cypress

Question

I am very new to java script and cypress web automation. I have been trying automate a practice site and and I am stuck at finding element locator for the below button in the web page. Can someone help me how can I create a cssSelector for the below web element? Attached the html. There are 2 sign in buttons in the page. I would like to uniquely identify the first sign in button. Pasted below the html sample:

<div _ngcontent-oxt-c19="" class="offset-sm-3 col-sm-9"><button _ngcontent-oxt-c19="" nbbutton="" status="primary" type="submit" _nghost-oxt-c16="" ng-reflect-status="primary" class="appearance-filled size-medium status-primary shape-rectangle transitions" aria-disabled="false" tabindex="0" css="1">Sign in</button></div>

<button _ngcontent-oxt-c19="" nbbutton="" status="primary" type="submit" _nghost-oxt-c16="" ng-reflect-status="primary" class="appearance-filled size-medium status-primary shape-rectangle transitions" aria-disabled="false" tabindex="0" css="1">Sign in</button>

<button _ngcontent-oxt-c19="" nbbutton="" status="primary" type="submit" _nghost-oxt-c16="" ng-reflect-status="primary" class="appearance-filled size-medium status-primary shape-rectangle transitions" aria-disabled="false" tabindex="0" css="1">Sign in</button> — Pintrest Man
– Pintrest Man, Commented Nov 18, 2021 at 13:04

Emmanuel Chikwendu Onah · Accepted Answer · 2021-11-18 13:14:20Z

1

Use:

cy.contains("Sign in");

this will search on the current document for an element with the text "Sign in". another best practice is to speak to your developers to always try to add data-testid="uniqueId" for special elements to be tested and this pattern of adding data-testid will help keep such elementLocator undeleted(because everyone will know this attribute is for testers only)

answered Nov 18, 2021 at 13:14

Emmanuel Chikwendu Onah

6086 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cypher_null Over a year ago

Also might want to add that cy.contains() always takes the first instance of an element in case there are multiple elements that fit. So in case you want to address the first button, this will work. If you want to address the 2nd one, you will need a completely different approach

Pintrest Man Over a year ago

Thanks Emmanuel. Asking developer to add a unique id has been the easiest way. However i would like to create from the existing DOM structure :)

Zaista · Accepted Answer · 2021-11-18 13:27:46Z

0

From your examples I can see that both buttons are identical, except that one is a child of div element. You can specify that in your selector:

cy.get('div button')

Or if you need something more specific you could add class names as well:

cy.get('div.offset-sm-3 button')

It doesn't need to be a direct parent, you can go higher up in the tree to find a suitable unique property to select.

answered Nov 18, 2021 at 13:27

Zaista

1,3429 silver badges19 bronze badges

1 Comment

Pintrest Man Over a year ago

Thanks Zaista. That helped. cy.get(('div.offset-sm-3 button') and then i used .find('Sign-in') to chain the statement .

Collectives™ on Stack Overflow

identifying the web element in cypress

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related