# Mailto HREF link

📺 Watch this recipe explained in the video Test Mailto HREF Anchor Links (opens new window).

  href="mailto:[email protected]?subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"
  >Send an email</a

Let's use this utility function to parse mailto:... string

// string parameter s is like "mailto:...?param1=...&param2=..."
// where each parameter is URL-encoded
function parseMailto(s) {
  const [start, params] = s.split('?')
  const recipient = start.split(':')[1]
  const result = { recipient }
  params.split('&').forEach((param) => {
    const [key, encoded] = param.split('=')
    result[key] = decodeURIComponent(encoded)
  return result

We cannot click on the link, since in most cases it will launch an external application registered with the operating system that handles sending an email (like Outlook).

Tip: You can the browser from opening the email client by registering from the test itself a "click" event handler.

// we can click, but it does nothing
  .invoke('on', 'click', (e) => {
    console.log('stop the default browser behavior')

Instead, trust the operating system and the email standards. If the mailto link is correct, the browser and your email program should work with it. The test can confirm the <A> HREF attribute is present, parse the attribute value, and confirm each parameter of the email to send has the expected value.

  .should('have.attr', 'href')
  // yields the value of the "href" attribute
  .should('match', /^mailto:/)
  // parse the URL into recipient, subject, body fields
  .should('deep.equal', {
    recipient: '[email protected]',
    subject: 'The subject of the email',
    body: 'The body of the email',