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.

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.

• javascript
• cypress

• 1 How about modifying your initial selector - I haven't worked with Cypress, so I don't know exactly their selectors should/must be formed - to a[href]:empty which should select all <a> elements with a href attribute that match the :empty pseudo class (although white-space within the element prevents the :empty selector from matching), and then you simply need to work on those. Also, if you can post an minimal reproducible example sample of your code for those answering to work with it may help us to form answers. – David Thomas Commented Oct 30, 2018 at 14:02
• @DavidThomas tried that but doesn't let you use selectors like that – Kingsley Knight Commented Oct 30, 2018 at 14:07
• @DavidThomas removed the :empty selector and it worked thanks – Kingsley Knight Commented Oct 30, 2018 at 14:09
• Haven't tried it, so I won't post as an answer, but using the selector a[href] or a[href*=] should get you just the a elements that have an href attribute. then leave the rest the same. – Brendan Commented Oct 30, 2018 at 15:31
• If my answer below is not helpful, let me know what I missed and I will try to understand your needs and I will re-edit it. – Maccurt Commented Oct 31, 2018 at 12:12

5 Answers 5

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

Just to illustrate the readability of Cypress chained mands.

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

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");

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');

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
     })

I have read ment of Zauni and try it out.

Cypress ^10.3.1

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

Work perfectly.