英文:
Cypress assertion of two classes
问题
Here's the translated code snippet you provided:
cy.wrap(null).then(() => {
const $calculatorPayout = Cypress.$(".flex.flex-col.items-center.justify-center.h-[50px].w-10.border.border-solid.border-black-main");
const $usualPayout = Cypress.$('div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]').last();
if ($calculatorPayout.length > 0) {
expect($calculatorPayout).to.be.visible;
expect($calculatorPayout.text()).to.match(/^\d{3}\.\d{1}%$/);
} else {
expect($calculatorPayout).to.not.exist;
expect($usualPayout).to.be.visible;
expect($usualPayout.text()).to.match(/^(-|\d+\.\d{1}%)/);
}
})
I understand your issue. To ensure that the element in the "else" statement is properly recognized and you can invoke its text, you can handle it differently. You might want to wrap it in a conditional statement to ensure it's present before trying to access its text. Here's a modified version of your code:
cy.wrap(null).then(() => {
const $calculatorPayout = Cypress.$(".flex.flex-col.items-center.justify-center.h-[50px].w-10.border.border-solid.border-black-main");
const $usualPayout = Cypress.$('div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]').last();
if ($calculatorPayout.length > 0) {
expect($calculatorPayout).to.be.visible;
expect($calculatorPayout.text()).to.match(/^\d{3}\.\d{1}%$/);
} else {
expect($usualPayout).to.exist; // Check if the $usualPayout element exists
expect($usualPayout).to.be.visible;
expect($usualPayout.text()).to.match(/^(-|\d+\.\d{1}%)/);
}
})
This way, you first check if $usualPayout exists before trying to access its text, avoiding the issue you mentioned.
英文:
I have this code on Cypress
cy.wrap(null).then(() => {
const $calculatorPayout = Cypress.$(".flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main")
const $usualPayout = Cypress.$('div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]').last()
if ($calculatorPayout.length > 0) {
expect($calculatorPayout).to.be.visible;
expect($calculatorPayout.text()).to.match(/^\d{3}\.\d{1}%$/);
} else {
expect($calculatorPayout).to.not.exist;
expect($usualPayout).to.be.visible;
expect($usualPayout.text()).to.match(/^(-|\d+\.\d{1}%)/);
}
})
My main idea is that if the element with class=flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main exists, it should be visible and contain text with the given format.
Otherwise, if it doesn't exist, another element with class=div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"] should be present, and it should contain text with the mentioned format.
The issue is that, the element in the 'else' statement is considered as an object, most probably because of cy.wrap(null) in the beginning, and it cannot invoke its text, in order to assert that it has the format.
I need some ideas how can I change the code, so it can work properly
答案1
得分: 2
我使用了这个答案Cypress assert A or B，使用jQuery多重选择器来处理类似的情况。
所以在你的情况下，将两个选择器放在cy.get()中，你将获得异步重试的额外好处。
const calculatorPayoutSelector = '.flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main'
const usualPayoutSelector = 'div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]:last'
cy.get(calculatorPayoutSelector, usualPayoutSelector)
.then($el => {
expect($el).to.be.visible;
const re = $el.selector === calculatorPayoutSelector ? /^\d{3}\.\d{1}%$/)
: /^(-|\d+\.\d{1}%)/;
expect($el.text()).to.match(re)
}
这些选择器实在是糟糕，我建议改进它们。在生产质量的测试中使用太多样式类会让测试变得复杂。
英文:
I used this answer Cypress assert A or B using the jQuery multiple selector for something similar.
So in your case, put both selectors in a cy.get() and you will get async retry as a bonus.
const calculatorPayoutSelector = '.flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main'
const usualPayoutSelector = 'div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]:last'
cy.get(calculatorPayoutSelector, usualPayoutSelector)
.then($el => {
expect($el).to.be.visible;
const re = $el.selector === calculatorPayoutSelector ? /^\d{3}\.\d{1}%$/)
: /^(-|\d+\.\d{1}%)/;
expect($el.text()).to.match(re)
}
The selectors are simply awful, I would work on that. Too many styling classes to use in a production-quality test.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论