Check if element has href if it does it shouldn't be empty Cypress.io

Question

Tring to do an if statement in cypress that finds all a tag's on the page and if they have a href then it shouldn't be empty.

This is what I've got so far:

cy.get("a").each($el => {
    cy.wrap($el)
     .should("have.attr", "href")
     .and("include", "/");
});

However this checks everything even if it doesn't have a href.

Answer 1

An updated version of Justin Smith's answer that removes the unnecessary callback.

Just to illustrate the readability of Cypress chained commands.

Remove the noise, just use chaining

cy.get('Selector for the anchor tag')      // sets <a> as the subject
  .should('have.attr', 'href')             // changes subject to href attribute
  .should('not.be.empty')                  // now test the href
  .and('contain', 'foo');                  // also test another criteria here

Note, this pattern has nothing to do with Cypress 7, it has been available for many previous versions.

---

Checking all hrefs

The question actually asks for a way to check all tags on the page .

For example,

<a></a>                      -- should ignore
<a href="/foo"></a>          -- should pass
<a href="/"></a>             -- should pass
<a href=""></a>              -- should fail

One way is to be more selective in the cy.get() by moving the .should("have.attr", "href") predicate inside the element selector.

cy.get("a[href]")                           // get all <a> that have an href
  .each($el => {                            // test individually
    cy.wrap($el.attr('href'), {log:false})  // here we need to cy.wrap
      .should("include", "/")               // because subject needs to change
  })                                      

Cypress log

1	get	a[href]	3	pass
2	assert	expected / to include /		pass
3	assert	expected /foo to include /		pass
4	assert	expected '' to include /		fail

Answer 2

This is an updated version of T Gurung's answer.

cy.get('Selector for the anchor tag')
  .should("have.attr", "href")
  .should("not.be.empty")
  .and("contain", "foo");

Answer 3

You can say there should be no A elements with a blank href

cy.get('a').get('[href=""]').should('length',0);

or

cy.get('a').get('[href=""]').should('not.exist');

You can also say there should be no A elements that do not have a href tag if need be, I was not sure if this was a requirement

cy.get('a:not([href])').should('not.exist');

Answer 4

You can do like this:

cy.get('Selector for the anchor tag')
     .should('have.attr', 'href')
     .then((href) => {
        expect(href).should('not.be.empty')  //To assert, not to be empty
        expect(href).to.contain('foo')   //If you want to assert for something specific to be there
     })

Answer 5

I have read comment of Zauni and try it out.

Cypress ^10.3.1

cy.get({selector}).wrap('href').should('not.be.empty');

Work perfectly.