Im trying to make some assertions in one of my React component with Cypress, but im getting the following error:
The output of the console.log is
And the code that i’m trying to use is
cy.getByDataTestAttribute("redeem-product-button").then(($buttons) => {
console.log($buttons);
$buttons.each(($button) => {
cy.wrap($button).should("not.be.disabled");
});
// cy.wrap($buttons[0]).click();
// $buttons.each(($button) => {
// cy.wrap($button).should("have. e 2wrq2", "disabled");
// });
});
// commands.ts
Cypress.Commands.add("getByDataTestAttribute", (dataTestAttribute, ...args) => {
return cy.get(`[data-cy=${dataTestAttribute}]`, ...args);
});
// button.tsx
<Button
data-cy="redeem-product-button"
colorScheme={"brand.default"}
bg={ableToRedeem ? "brand.default" : "neutrals.500"}
_hover={{ bg: ableToRedeem ? "brand.default" : "neutrals.600" }}
disabled={redeemProductState.loading || !ableToRedeem}
padding="24px"
borderRadius={"16px"}
marginTop="16px"
width="100%"
onClick={() => redeemProduct(id, cost)}
color={ableToRedeem ? "white" : "brand.900"}
> // ...
Also, i was using this custom command in other tests in the same file and im not having any trouble with that. But i tried also with
cy.get('[data-cy="redeem-product-button"]')
>Solution :
You can directly do like this:
cy.get('[data-cy="redeem-product-button"]').each(($ele) => {
cy.wrap($ele).should('not.be.disabled')
})

