Integration testing

Depending on your requirements, integration testing can be achieved in different ways:

1. Integrate your application with the Mailpit API (see API documentation).
2. Return a rendered HTML or text version of a message (see below).
3. Test your application’s handling of unexpected SMTP responses by invoking Mailpit’s Chaos feature.

Return a rendered text or HTML message part

To view either the HTML or text version of an email, append .html or .txt to the URL generated via the frontend. This would typically be something like http://localhost:8025/view/B79PgsotENzGwk4CCbAcAq.html or http://localhost:8025/view/B79PgsotENzGwk4CCbAcAq.txt.

The format is <Mailpit URL>/view/<ID>.(html|txt).

Please see this if you intend to embed the HTML message in an iframe.

Return the latest text or HTML message part

For convenience, you can also substitute the <ID> with latest to return the latest message instead, e.g., http://localhost:8025/view/latest.html or http://localhost:8025/view/latest.txt.

You can optionally apply a search filter to return the latest message matching a search by appending ?query=<search>, for example, http://localhost:8025/view/latest.html?query=from:user@example.com.

Cypress Mailpit Package

For those using Cypress for integration testing, there is a convenient Cypress Mailpit package available. This package allows you to easily interact with Mailpit within your Cypress tests, providing seamless integration and simplifying your testing workflows.

Embedding the HTML message in an iframe

If you are intending to embed the HTML message within an iframe, then append ?embed=1 to the URL (e.g., http://localhost:8025/view/B79PgsotENzGwk4CCbAcAq.html?embed=1) which will modify all links to open in target="_blank" and also set rel="noreferrer noopener" for security purposes.

In addition to this, a small snippet of JavaScript is added to the message to send the page height to its parent page via postMessage(), which contains the height of the page via the messageHeight property. This can be used by the parent page to adjust the iframe height, for example:

<iframe src="http://localhost:8025/view/B79PgsotENzGwk4CCbAcAq.html?embed=1" style="width: 100%" id="preview-html"></iframe>

<script type="application/javascript">
    window.addEventListener(
        "message",
        (event) => {
            // Check sender origin to be trusted
            // if (event.origin !== "http://example.com") { return }
            const data = event.data;
            if (data.messageHeight) {
                document.getElementById("preview-html").style.height = data.messageHeight + 50 + "px";
            }
        },
        false
    );
</script>

Edit this page