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>
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)
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.