Cypress can't identify attributes of a Chakra UI element

Question

I'm trying to use Cypress to test that a Chakra UI Heading element has the correct text and styling. I'm getting a passing test when I assert what the text should be, but I can't seem to get Cypress to identify the attributes of the element. Here is the Chakra UI element:

<Heading data-test="signup-header" as="h1" size="lg">Sign Up</Heading>

And here is my Cypress test:

describe("Sign Up flow", () => {
  it("Tests the sign up feature", () => {
    // Verifies page location
    cy.visit("/signup");
    cy.getDataTest("signup-header")
      .should("have.text", "Sign Up")
      .should("have.attr", "as");
  });
});

When I run the test, the text assertion passes, but the attribute assertion returns the following error:

AssertionError: Timed out retrying after 4000ms: expected '<h1.chakra-heading.css-1jb3vzl>' to have attribute 'as'
    at Context.eval (webpack://interviewguru/./cypress/e2e/signup.cy.js:7:7)

I also tried writing the test like this but was met with the same error:

describe("Sign Up flow", () => {
  it("Tests the sign up feature", () => {
    // Verifies page location
    cy.visit("/signup");
    cy.getDataTest("signup-header")
      .should("have.text", "Sign Up")
      .invoke("attr", "as")
      .should("eq", "h1");
  });
});

Any insights would be greatly appreciated! I'm new to automation testing and a bit stumped.

Answer 1

This code snippet is source code,

<Heading data-test="signup-header" as="h1" size="lg">Sign Up</Heading>

but in the running page the DOM will look something like the following

<h1 class="chakra-heading css-r3x9fh" data-test="signup-header">Sign Up</h1>

because the as="h1" attribute is a compile-time instruction to output a <h1> element for this heading.

---

You can play with the code on this page Heading - change visual size to see what is compiled, by looking in the dev console.

---

Cypress can only work with the compiled version of the element, which means you would want to test the effect of the compilation process (i.e that the tagName property is correct)

cy.getDataTest('signup-header')
  .should('have.text', 'Sign Up')
  .and('have.prop', 'tagName', 'H1')  // tagName is always capitalized