vendredi 11 octobre 2019

Find multiple elements within certain element in Cypress

Code:

<div class="title">
  <button data-testid="tg-menu" class="hitbox-border">
    <img src="asldij">
  </button>
  <div class="menu" data-testid="menu-list">
    <button class="text-left" data-testid="option-1">
      <span>Menu Option 1</span>
    </button>
    <button class="text-left" data-testid="option-2">
      <span>Menu Option 2</span>
    </button>
    <div class="row">
      <div class="flex-grow">
        <hr class="lightgrey-border">
      </div>
      <div class="flex-grow">
        <hr class="lightgrey-border">
      </div>
    </div>
    <button class="text-left" data-testid="option-3">
      <span>Menu Option 3</span>
      </button>
  </div>
</div>

Tool: Cypress

I have code similar to above and want to do couple of things easily without using -- Class Names when selecting elements.

I can do it as cy.get('[data-testid="menu-list"]').children('button') but wanted to get it similar to xpath - contains...as above example is simple but some of the things are more difficult in dom.

Questions:

  1. Find All the Button Names under menu list.

    Is there one line cy.get() I can use similar to By.xpath(//div[@data-testid='menu-list']//button[contains(@data-testid,'option-')]) ?

  2. Is there easy way to translate selenium xpath to cypress...

Note: I know there is extension for xpath for cypress not sure if performance wise it is good or not.

Aucun commentaire:

Enregistrer un commentaire