如何根据 cypress/javascript 中的条件选择元素

Question

我在下面有一个表格，显示了不同的赔率：

发生的情况是，用户将选择一个赔率按钮以将他们的选择添加到投注单。但是，我需要做的是选择正确的按钮。我的意思是它需要选择第一个可用的赔率按钮，而不是选择已禁用或已选择的赔率按钮。

所以我的逻辑是这样的：

• 查看您在图像和表格行中看到的赔率表，检查该按钮是否未被禁用且未被选中。
• 如果上述情况属实，则取选择的名称并将其存储为别名，然后单击该赔率按钮。

目前这是我的代码，但我认为它不是 100% 正确的，它正在选择一个赔率按钮，但不确定它是否会检查该按钮是否在行中被禁用或选中。目前它正在选择第一个赔率按钮，但这是因为当前没有选择或禁用任何按钮（而且它是一个实时站点，因此无法操纵该站点以适应场景）。

这是与上图匹配的 HTML：

<div class="featuredOutright__content featuredOutright__content--primary">
   <ul class="featuredOutright__markets">
      <li id="betBundle__4192262052__wrapper" class="featuredOutright__selection">
         <div class="marketsList__image" id="betBundle__4192262052__sportIcon">
            <i class="icon-football"></i>
         </div>
         <div class="marketsList__detail">
            <i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
            <div class="marketsList__market__title" id="betBundle__4192262052__marketTitle">
               Club Brugge KV to score over 0.5 goals in each half
               <a class="marketsList__market__matchName textLink" href="#/soccer/event/20213522" id="betBundle__4192262052__eventLink">
               Club Brugge KV - KV Oostende
               </a>
            </div>
         </div>
         <div class="marketsList__was">
            <p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192262052__previousPrice">
               5/6
            </p>
         </div>
         <div class="marketsList__amount selectionBlock">
            <a id="event-selection-4192262052" eventid="event-selection-20213522" title="Club Brugge KV to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice   button__bet eventSelection--link" "="">
               <i class="icon-tick"></i>
               <em class="button__bet__odds">10/11</em>
               <div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
            </a>
         </div>
      </li>
      <li id="betBundle__4192270554__wrapper" class="featuredOutright__selection">
         <div class="marketsList__image" id="betBundle__4192270554__sportIcon">
            <i class="icon-football"></i>
         </div>
         <div class="marketsList__detail">
            <i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
            <div class="marketsList__market__title" id="betBundle__4192270554__marketTitle">
               US Lecce to score over 0.5 goals in each half
               <a class="marketsList__market__matchName textLink" href="#/soccer/event/20213510" id="betBundle__4192270554__eventLink">
               Benevento - Lecce
               </a>
            </div>
         </div>
         <div class="marketsList__was">
            <p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192270554__previousPrice">
               3/1
            </p>
         </div>
         <div class="marketsList__amount selectionBlock">
            <a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice   button__bet eventSelection--link" "="">
               <i class="icon-tick"></i>
               <em class="button__bet__odds">10/3</em>
               <div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
            </a>
         </div>
      </li>
      <li id="betBundle__4196565633__wrapper" class="featuredOutright__selection">
         <div class="marketsList__image" id="betBundle__4196565633__sportIcon">
            <i class="icon-tennis"></i>
         </div>
         <div class="marketsList__detail">
            <i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
            <div class="marketsList__market__title" id="betBundle__4196565633__marketTitle">
               A Zverev and F Auger Aliassime to win the first set of the match
               <a class="marketsList__market__matchName textLink" href="#/tennis/outrights/20405610" id="betBundle__4196565633__eventLink">
               Odds Boost - Tennis
               </a>
            </div>
         </div>
         <div class="marketsList__was">
            <p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4196565633__previousPrice">
               7/1
            </p>
         </div>
         <div class="marketsList__amount selectionBlock">
            <a id="event-selection-4196565633" eventid="event-selection-20405610" title="A Zverev and F Auger Aliassime to win the first set of the match" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice   button__bet eventSelection--link" "="">
               <i class="icon-tick"></i>
               <em class="button__bet__odds">9/1</em>
               <div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
            </a>
         </div>
      </li>
   </ul>
</div>

这是我的步骤定义和元素类：

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";
import OddsSelectionElements from '../elements/oddsSelectionElements';

const oddsSelectionElements = new OddsSelectionElements();

When ("User selects an available bet bundle selection", () => {

  oddsSelectionElements.featuredSelectionRow()
  .within(() => {
    oddsSelectionElements.oddsButton().first().not(".disabled");
    oddsSelectionElements.oddsButton().first().not(".selected");
    oddsSelectionElements.marketListTitle().first().invoke("text").as("betBundleTitle");
    oddsSelectionElements.oddsButton().first().click();
  })
})

OddsSelectionElements：

class OddsSelectionElements {

    oddsButton() {
        return cy.get('.button__bet__odds')
    }

    featuredSelectionRow() {
        return cy.get('.featuredOutright__selection')
     }
 
     marketListTitle() {
         return cy.get('.marketsList__market__title')
     }
}

export default OddsSelectionElements

选择按钮示例：在类中为<a> 标签添加selected

 <a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice   button__bet eventSelection--link selected" "="">

disabled 与上面的概念相同，但 selected 将添加 disabled

Answer 1

假设not(".disabled") 和.not(".selected") 在上面工作，你可以这样写：

cy.get(".button__bet__odds").each(($ele, index) => {
  if ($ele.not(":disabled") && $ele.not(":selected")) {
    cy.get("marketsList__market__title").eq(index).invoke("text").as("someText")
    cy.wrap($ele).click()
    return false
  }
})

//Access someText
cy.get("@someText").then((someText) => {
  cy.log(someText) //Access someText here
})