Ideal selector for Cypress automation Javascript

user_14985393 0
Viewed 35

I have this HTML code

<li class="menu-level-1">

    <a href="/Public/app/#/calendar">
        <i class="site-menu-icon material-icons">date_range</i>
        <span>
            Calendar
        </span>

    </a>
</li>

I don't know exactly what I need to select in CYPRESS for automation to press the calendar button. I don't have a unique css or id class so I can't isolate it from the rest of the menu items. I only have what is seen in this code.

cypress css-selectors javascript
2 Answers

I think you want to click the element <a href="/Public/app/#/calendar"> since it has the href.

There's lots of ways to target it, the one to use depends on what is unique on the page

cy.contains('a', 'Calendar').click()  // if the word Calendar only appears on this link

cy.get('a[href="/Public/app/#/calendar"]').click()  // specifies by the link itself

cy,get('i.site-menu-icon').parent().click()  // if the icon is the unique thing
user_169610060

You can use custom xpath like //*[text()="Calendar"]

If you have found many others on your web page, you can give an index like //*[text()="Calendar"][1] make sure here the index always starts with 1, not 0.

user_154051790
Related