How to test the appearance of emails with Mailosaur

What are email previews?

Whether you are sending emails as part of a marketing campaign or in order to welcome new customers to your product, it is very difficult to know exactly what your email will look like to everyone who will receive it.

Email previews are screenshots of your email taken on a wide array of email clients, using physical devices including PC, Mac and mobile.

Test a design using standalone HTML

When creating or modifying the HTML content of an email, you can quickly test the appearance in various email clients by creating a "design" in Mailosaur.

Follow these steps to create design:

Navigate to the Designer via the main menu
Click New Design to create a new design for your email.
Name your design and click Create.
Once in the design editor, paste the HTML you wish to test on the left-hand side of the screen.
Select the Screenshots tab on the right and click Generate Screenshots.
Select the email clients you wish to test and click Generate Screenshots again.
Your screenshots will be ready to view in moments

Using a test email address to check an email designed elsewhere

When the email you want to check already exists in another system, such as your own product or your email marketing solution, it is often easier to send a copy of the email to Mailosaur using a test email address.

To do this, follow these steps:

Select Servers from the main menu, and select one of your existing inboxes.
In the top-right of the inbox you should see an option to copy an email address to your clipboard.
Use this email address to send the email from whichever system has it (note: many email marketing solutions have an option to "send a test email").
Once the email arrives in your inbox, click on it to open the email viewer.
Select "Generate Emails Previews" from the email viewer.
Select the email clients you want to preview your email in and click Generate.
Your screenshots will be ready to view in moments

Creating an end-to-end test using the API

You can generate email previews within the Mailosaur Dashboard as described above, but you can also create end-to-end email tests using the API:

// Fetch the email to generate previews for
const email = await mailosaur.messages.get('SERVER_ID', {
    sentTo: 'TEST_EMAIL_ADDRESS'
});

// Generate a preview for Outlook 2021
const result = await mailosaur.messages.generatePreviews(email.id, {
    previews: [
        { emailClient: 'OL2021' }
    ]
});

// Download the generated screenshot
const file = await mailosaur.files.getPreview(result.items[0].id);
fs.writeFileSync('screenshot.png', file);// Fetch the email to generate previews for
cy.mailosaurGetMessage('SERVER_ID', { sentTo: 'TEST_EMAIL_ADDRESS' })
    .then(email => (
        // Generate a preview for Outlook 2021
        cy.mailosaurGenerateEmailPreviews(email.id, {
            previews: [{
                emailClient: 'OL2021'
            }]
        })
    ))
    .then(result => {
        return cy.mailosaurDownloadPreview(result.items[0].id);
    .then(file => {
        // Download the generated screenshot
        fs.writeFileSync('screenshot.png', file)
    });from mailosaur.models import SearchCriteria, PreviewRequest, PreviewRequestOptions, MailosaurException

# ...

# Fetch the email to generate previews for
criteria = SearchCriteria()
criteria.sent_to = "TEST_EMAIL_ADDRESS"
email = mailosaur.messages.get("SERVER_ID", criteria)

# Generate a preview for Outlook 2021
request = PreviewRequest("OL2021")
options = PreviewRequestOptions([request])
result = mailosaur.messages.generate_previews(email.id, options)

# Download the generated screenshot
file = mailosaur.files.get_preview(result.items[0].id)
f = open("screenshot.png", 'wb')
f.write(file)
f.close()// Fetch the email to generate previews for
SearchCriteria criteria = new SearchCriteria();
criteria.withSentTo("TEST_EMAIL_ADDRESS");

MessageSearchParams params = new MessageSearchParams();
params.withServer("SERVER_ID");
Message email = client.messages().get(params, criteria);

// Generate a preview for Outlook 2021
PreviewRequest request = new PreviewRequest("OL2021");
PreviewRequestOptions options = new PreviewRequestOptions();
options.withPreviews(Arrays.asList(request));
PreviewListResult result = client.messages().generatePreviews(email.id(), options);

// Download the generated screenshot
byte[] bytes = client.files().getPreview(result.items().get(0).id());
Files.write(Paths.get("screenshot.png"), bytes);// Fetch the email to generate previews for
var email = mailosaur.Messages.Get("SERVER_ID", new SearchCriteria()
{
    SentTo = "TEST_EMAIL_ADDRESS"
});

// Generate a preview for Outlook 2021
PreviewRequest request = new PreviewRequest("OL2021");
PreviewRequestOptions options = new PreviewRequestOptions(
    new List<PreviewRequest>() {
        request
    }
);
PreviewListResult result = mailosaur.Messages.GeneratePreviews(email.Id, options);

// Download the generated screenshot
byte[] bytes = mailosaur.Files.GetPreview(result.Items[0].Id);
File.WriteAllBytes("screenshot.png", file);# Fetch the email to generate previews for
criteria = Mailosaur::Models::SearchCriteria.new
criteria.sent_to = "TEST_EMAIL_ADDRESS"
email = mailosaur.messages.get("SERVER_ID", criteria)

# Generate a preview for Outlook 2021
request = Mailosaur::Models::PreviewRequest.new('OL2021')
options = Mailosaur::Models::PreviewRequestOptions.new([request])
result = mailosaur.messages.generate_previews(email.id, options)

# Download the generated screenshot
file = mailosaur.files.get_preview(result.items[0].id)
File.open("screenshot.png", 'wb') { |fp| fp.write(file) }// Fetch the email to generate previews for
$criteria = new SearchCriteria();
$criteria->sentTo = 'TEST_EMAIL_ADDRESS';
$email = $mailosaur->messages->get('SERVER_ID', $criteria);

// Generate a preview for Outlook 2021
$request = new PreviewRequest('OL2021');
$options = new PreviewRequestOptions(array($request));
$result = $mailosaur->messages->generatePreviews($email->id, $options);

// Download the generated screenshot
$file = $mailosaur->files->getPreview($result->items[0]->id);
$f = fopen('screenshot/png', "w") or die("Unable to open file!");
fwrite($f, $file);
fclose($f);// Fetch the email to generate previews for
email, _ := m.Messages.Get(&MessageSearchParams{
    Server: "SERVER_ID",
}, &SearchCriteria{
    SentTo: "TEST_EMAIL_ADDRESS",
})

// Generate a preview for Outlook 2021
request := &PreviewRequest{EmailClient: "OL2021"}
options := &PreviewRequestOptions{Previews: []*PreviewRequest{request}}
result, _ := m.Messages.GeneratePreviews(email.Id, options)

// Download the generated screenshot
file, _ := m.Files.GetPreview(result.Items[0].Id)
var err = os.WriteFile("screenshot.png", file, 0644)
if err != nil {
  // handle error
}

HTML content of an email

How to test the text content of email or SMS