Cypress basics: Check attributes, value and text

by Filip Hric, April 12, 2021

4 min read


Hey! Welcome to another episode of Cypress basics. You can check out some other articles on my blog where I provide step by step explanations of some Cypress basics + some extra tips on how you can take things one step further. So far, I wrote about:

Get element text

To get proper attributes of an element, it’s good to understand some basics of different HTML elements. Let me give you an example. Let’s say we have two elements:

<div>Please type in your name:</div>
<input type="text"></input>

During my test, I’m going to fill the input field and then check if the text has correct text inside. With both of these elements, you can see the text on page. But if I want to "check text" on these elements, I need to use slightly different approach with each:

cy
  .get('div')
  .should('have.text', 'Please type in your name:')

cy
  .get('input')
  .type('Rick Sanchez')
  .should('have.value', 'Rick Sanchez')

The difference here is, that our div element contains a certain text, but input elements in HTML are used for inserting value. I strongly suggest checking out W3Schools docs to explore different types of input form fields.

Get attribute

You may be in a situation where you need to check your links. In that case, getting your href attribute from anchor element would be useful. Let’s say we have a following link:

<a href="https://docs.cypress.io">Read the docs!</a>

To check the href attribute, you can write a test like this:

cy
  .get('a')
  .invoke('attr', 'href')
  .should('eq', 'https://docs.cypress.io')

In addition, you can test if the link is actually valid, by making an http request to it:

cy
  .get('a')
  .invoke('attr', 'href')
  .then(href => {

    cy
      .request(href)
      .its('status')
      .should('eq', 200);

});

Invoke properties

By using .invoke('prop'), you can access many different properties from selected element. The whole list of that properties can be found in Chrome DevTools. To access them, click on the given element and open properties panel.

As you can see, there are tons of options. For example, we can use .invoke() command to look into whether checkbox element is checked.

cy
  .get('input')
  .invoke('prop', 'checked')
  .then(state => {

    console.log(`checkbox is ${state ? 'checked' : 'not checked'}`)

  });

Remember how we tested the value of a certain input? With .invoke() we can pass the value of that input to another function, like this:

cy
  .get('input')
  .type('Rick Sanchez')
  .invoke('val')
  .then(val => {

    const inputValue = val;

  });

In the past, I had a bad input element in my app that would re-render during my test and delete my input in the test. I would write a special "type and check" command that would retry if the input would not work properly.

Cypress.Commands.add('typeAndCheck', { prevSubject: true }, (subject, input) => {

  cy
    .wrap(subject)
    .type(input);

  cy
    .wrap(subject)
    .then(($subj) => {
      if ($subj[0].value !== input) {

        cy
          .wrap(subject)
          .clear({ force: true })
          .typeAndCheck(input);

      }
    });

});

This is definitely very hacky solution. I’d recomment checking out this great blog on identifying code smells (as the described situation is definitely one!) or looking into Gleb Bahmutov’s blog about the topic of when can a test start typing.

The other interesting thing about .invoke() val is that by passing a second argument to this function will enable you to change the value and (kinda) simulate pasting a text to an textarea. I wrote about this in a recent blog for egghead.io, so give that a read. The simple example goes something like this:

cy
  .get("input")
  .invoke('val', 'paste this text')

Hope you like this. If you did, you can subscribe to a newsletter to get notified about a new article every week. You can also follow me on Twitter or LinkedIn.

See you next week!



🎉 My new course is out! 🎉

Have you ever used cy.intercept() command in Cypress? It’s awesome! I teach you all about how to use it to test edge cases win this short course. Only on egghead.io!

Cypress course intercept