Найти несколько элементов внутри определенного элемента в Cypress - PullRequest
Новая
       35

Найти несколько элементов внутри определенного элемента в Cypress

0 голосов
/ 11 октября 2019

Код: 

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

Инструмент: Cypress

У меня есть код, аналогичный приведенному выше, и я хочу легко выполнить несколько действий без использования - Имена классов при выборе элементов.

Я могу сделать это как cy.get ('[data-testid = "menu-list"]'). Children ('button'), но хотел получить его похожим на xpath - содержит ... как показано вышепросто, но некоторые вещи сложнее в дом.

Вопросы:

  1. Найти все имена кнопок в списке меню.

    Есть ли одна строка cy.get (), которую я могу использовать аналогично By.xpath (//div[@data-testid='menu-list']//button[contains(@data-testid,'option-')])?

  2. Есть ли простой способ перевести xpath селена вcypress ...

Примечание: я знаю, что есть расширение для xpath для кипариса, не уверенный, хороша ли производительность или нет.

1 Ответ

0 голосов
/ 14 октября 2019

  1. AFAIK Нельзя использовать что-то вроде contains в селекторе css (это то, что использует cy.get). Однако вы можете получить все кнопки и вызвать на них each, чтобы получить значение data-testid Например:

    cy.get ('[data-testid = "menu-list"]').children ('button'). each (btn => cy.log (btn.getAttribute ("data-testid")))

В случае, если у вас есть кнопки, их data-testid атрибут не начинается с option-, и вы хотите отфильтровать их, я бы предложил иметь 2 разных атрибута данных: один для фильтрации, который не должен быть уникальным (например, data-testid='option'), а другойтот, который содержит интересное значение (например, data-value='1')

Расширение cypress-xpath - единственный известный мне способ использования xpath с Cypress. Относительно производительности у меня нет никаких данных. Я полагаю, что это медленнее, чем cy.get с css selector, как в Selenium. Но я также считаю, что в большинстве случаев это бессмысленно. Как и при любом вопросе о производительности, лучшим ответом является выполнение ваших собственных измерений в контексте, который вам подходит.
...