How to extract a link from a confirmation email in Mailslurp using cypress?

Question

I was trying to extract a link to proceed with user registration using Cypress and Mailslurp. For that, I wrote the following code:

let inboxId;
let emailAddress;

describe('sign up', () => {
    beforeEach(() => {
        
        cy.viewport(1920, 1080);
    })

    it('receive sign up link', () => {
        cy.visit('/signup');
        cy.createInbox().then(inbox => {
            // verify a new inbox was created
            assert.isDefined(inbox)
      
            // save the inboxId for later checking the emails
            inboxId = inbox.id
            emailAddress = inbox.emailAddress;

            cy.get('#email-input').type(emailAddress);
            cy.get('.bg-gray-100 > .p-button').click();
        })
    })

    it('extract the confirmation link and extract the code', () => {
        cy.waitForLatestEmail(inboxId).then(email => {
            const emailHTML = email.body;
            const regexLink = /<a href="([^"]+)">/;
            const match = emailHTML.match(regexLink);
            const link = match[0];
            cy.visit(link);
        });
    });

})

But the constant 'const link' returns a null value

I was expecting to receive the link to continue the register link

Answer 1

Considering the place where the error occurs this is most likely caused by the regex not matching. Your regex matches for example <a href="www.example.com"> but not <a href="www.example.com" target="_blank"> or if the link has any id, classes or other properties.

Try changing your regex to const regexLink = /<a href="([^"]+)".*>/;. You'll also need to change your link to const link = match[1]; since match[0] is the entire string matched, not the first capturing group.

Answer 2

You could use a library like jsdom and parse the html so you correctly get back all links like this:

const dom = new JSDOM(email.body);
const link = dom.window.document.querySelector('a');

However, you could also avoid having to find links yourself with regex or a dom library. I use Mailosaur at my company for this, which extracts links from email for you so you don't have to worry about this.

From their documentation here:

 it('Gets a Password Reset email', () => {
      cy.mailosaurGetMessage(serverId, {
        sentTo: testEmail
      }).then(email => {
        expect(email.subject).to.equal('Reset your password');
        passwordResetLink = email.text.links[0].href;
      })
    })

So your code would look like this:

   

 it('extract the confirmation link and extract the code', () => {
            cy.mailosaurGetMessage(serverId, {
            sentTo: emailAddress
          }).then(email => {
                const link = email.text.links[0].href;
                cy.visit(link);
            });
        });

Secondly, you also don't need to create an inbox or an email address and call their API, you can just make up addresses as simple as concatenating a string. I hope that helps you.