How to test the HTML contents of an email

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:

That you have already create a basic automated test using our getting started guides.
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 i -D jsdom
# or
yarn add -D jsdompip install beautifulsoup4<dependency>
  <groupId>org.jsoup</groupId>
  <artifactId>jsoup</artifactId>
  <version>1.13.1</version>
</dependency>dotnet add package HtmlAgilityPackgem install nokogiri// Not required, skip to next stepgo 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 BeautifulSoupimport org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;using HtmlAgilityPack;require 'nokogiri'// Not required, skip to next stepimport (
"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"
}

HTML content of an email

Before you begin

Accessing the HTML content

Extracting from the HTML

Install an HTML library

Import the library in your code

Find the target element

See also