HTML content of an email

Learn how to work with the HTML content found within your emails

HTML and text content within an email Most email sent today is HTML-based, however an email may also contain a plain text alternative for older mail clients. Learn how to work with text content of an email.

Before you begin

The examples shown below are based on two key assumptions:

  1. That you have already create a basic automated test using our getting started guides.
  2. You have a chosen assertion library that you will use to test the values shown below.

Accessing the HTML content

An email’s HTML body can be accessed via the html.body property of a message.

console.log(message.html.body) // "<html><head ..."
print(message.html.body) # "<html><head ..."
System.out.println(message.html().body()); // "<html><head ..."
Console.WriteLine(message.Html.Body); // "<html><head ..."
puts(message.html.body) # "<html><head ..."
print($message->html->body); // "<html><head ..."
fmt.Println(message.Html.Body) // "<html><head ..."

Mailosaur also automatically extracts certain content for you, such as links and images.

Extracting from the HTML

You may wish to work with individual elements within your email’s HTML content. This is useful for extracting key pieces of data, such as account verification codes.

Install an HTML library

To extract content from the body of an email, you will need to use an HTML library in your tests. Each language has alternative libraries to those shown here, but this should get you started.

First, install a library for the language you are working with:

npm install jsdom --save-dev
pip install beautifulsoup4
<dependency>
  <groupId>org.jsoup</groupId>
  <artifactId>jsoup</artifactId>
  <version>1.13.1</version>
</dependency>
dotnet add package HtmlAgilityPack
gem install nokogiri
// Not required, skip to next step
go get github.com/PuerkitoBio/goquery

Import the library in your code

Next, reference the library in your code:

const { JSDOM } = require('jsdom')
from bs4 import BeautifulSoup
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;
using HtmlAgilityPack;
require 'nokogiri'
// Not required, skip to next step
import (
"github.com/PuerkitoBio/goquery"
)

Find the target element

In this example, we want to extract the verification code from the HTML below:

<div>
  <h1>To activate your account, enter this code:</h1>
  <p class="verify-code">542163</p>
</div>

To do this, we pass the email’s HTML body into our library, then find the element we need and access the 6-digit access code within:

const dom = new JSDOM(message.html.body);

const el = dom.window.document.querySelector('.verify-code');
const verificationCode = el.textContent;

console.log(verificationCode); // "542163"
dom = BeautifulSoup(message.html.body, 'html.parser')

el = dom.find('.verify-code')
verification_code = el.text

print(verification_code) # "542163"
Document doc = Jsoup.parse(message.html().body());

Elements elements = doc.getElementsByTag(".verify-code");
String verificationCode = elements.get(0).text();

System.out.println(verificationCode); // "542163"
var doc = new HtmlDocument();
doc.LoadHtml(message.Html.Body);

// Find element using xpath
var node = doc.DocumentNode.SelectSingleNode("//*[contains(@class, 'verify-code')]")

var verificationCode = node.InnerText;

Console.WriteLine(verificationCode); // "542163"
@doc = Nokogiri::HTML(message.html.body)
el = @doc.css(".verify-code")

verification_code = el.text

puts verification_code # "542163"
$doc = new DOMDocument();
$doc->loadHTML($message->html->body);

$cssClass = 'verify-code';
$xpath = new DomXPath($doc);
$matches = $xpath->query("//*[contains(concat(' ', normalize-space(@class), ' '), ' $cssClass ')]");

$verificationCode = $matches[0]->textContent;

print($verificationCode); // "542163"
htmlBytes := strings.NewReader(email.Html.Body)
doc, _ := goquery.NewDocumentFromReader(htmlBytes)

sel := doc.Find(".verify-code")
for i := range sel.Nodes {
single := sel.Eq(i)
verificationCode := single.Text()
fmt.Print(verificationCode) // "542163"
}