#javascript #cypress
Вопрос:
У меня есть таблица ниже, в которой показаны разные коэффициенты:
Что происходит, так это то, что пользователь выберет кнопку коэффициентов, чтобы добавить свой выбор в купон ставки. Однако все, что мне нужно сделать, это выбрать правильную кнопку. Я имею в виду, что для этого нужно выбрать первую доступную кнопку коэффициентов, а не кнопку коэффициентов, которая отключена или уже выбрана.
Итак, моя логика такова:
- Посмотрите в таблице коэффициентов, которую вы видите на изображении, и в строке таблицы, проверьте, не отключена ли кнопка и не выбрана ли она.
- Если вышесказанное верно, то возьмите имя выбранного объекта и сохраните его в качестве псевдонима, а затем нажмите на эту кнопку коэффициентов.
В настоящее время это мой код, но я не думаю, что он на 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();
})
})
Странные элементы:
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
Пример выбранной кнопки: она добавляет selected в класс для <a> тега
<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" "="">
отключено-это та же концепция, что и выше, но вместо selected добавит disabled
Комментарии:
1. Итак, эти тексты 10/11, 10/3-это кнопки, которые вы хотите проверить, отключены они или включены ? Также можете ли вы добавить html-код для описания того, как выглядит отключенная кнопка или уже выбранная кнопка?
2. @AlapanDas Да, это правильно. Я добавил пример html того, что происходит, когда выбрана кнопка. Он просто добавляет «выбранный» класс в <a> кнопки. Для инвалидов это та же концепция, но она будет «отключена».
Ответ №1:
Предполагая not(".disabled") и .not(".selected") работает выше, вы можете написать что-то вроде этого:
cy.get(".button__bet__odds").each(($ele, index) => {
if ($ele.not(":disabled") amp;amp; $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
})
Комментарии:
1. Привет, Алапан, я попробую, но у меня есть один вопрос, прежде чем я нажму кнопку, мне нужно сохранить значение имени выбора. Это делается для того, чтобы позже я мог проверить, добавлен ли выбор в купон для ставок. Вы можете видеть в моем примере в вопросе, который я вызываю для элемента, чтобы получить текст: ..
marketsList__market__titleВы знаете, как я должен добавить это в код? Надеюсь, это имеет смысл, если вы не возражаете обновить свой ответ, чтобы справиться с этим?2. Спасибо, Алапан, попробую это сделать и дам вам знать. Просто для моего понимания, поскольку я новичок в javascript, поэтому, если я посмотрю на ваш код, вы скажете, что для каждой кнопки с коэффициентами, если она не отключена или не выбрана, затем получите имя выбора на основе индекса соответствия между кнопкой и именем выбора. а затем нажмите на кнопку. И я предполагаю, что мне просто нужно добавить разрыв, чтобы вырваться из внешнего вида, если оператор if совпадает
3. Да, позиция индекса не выбранной/отключенной кнопки-это то, что нам нужно, тогда мы можем использовать тот же индекс для извлечения значения. Чтобы вырваться из
eachaddreturn false4. Ах, это возвращаемое значение false полезно, так как я видел ошибку компиляции, когда пытался сломаться. Просто запускаю его..
5. Потрясающе, это сработало, Алапан. Спасибо 🙂 Я надеялся, что, если вы не возражаете, у меня есть пара общих вопросов, которые я хотел бы задать о cypress (особенно об отладке). Могу ли я спросить вас об этом в разговоре через SO? Это просто для того, чтобы я мог проверить тест, имеет ли это смысл?