Pintrest Man
Pintrest Man

Reputation: 3

identifying the web element in cypress

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>

Upvotes: 0

Views: 367

Answers (2)

Zaista
Zaista

Reputation: 1422

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.

Upvotes: 0

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)

Upvotes: 1

Related Questions