How to test email and SMS with Playwright
Learn how to test email and SMS messages in Playwright, using Mailosaur.
What is Playwright?
Playwright is a Node.js library that lets you automate modern web browsers. Playwright is made by Microsoft and is used as part of the Quality Assurance testing of Microsoft’s own service.
At this stage, we assume that you already know how to test with Playwright, however if you’re just getting started, check out the official Playwright guide, then come back here to start testing email and SMS!
What is Mailosaur?
Mailosaur is a service that captures email and SMS messages and lets you test them, both via it’s web dashboard and via the Mailosaur testing API.
If you don’t already have one, create a free account trial now, and send an email into Mailosaur first. Once you have this working, you’re ready to start testing!
Step 1 - Get what you need from Mailosaur
To write Mailosaur tests, you will need a Server ID, Server Domain, and an API key to test with.
These attributes can all be accessed via the API tab within the Mailosaur Dashboard.
For more information: Learn more about Server IDs & Domains or API Keys.
Step 2 - Create a Playwright test that triggers an email
First, you will need a test that causes an email to be sent - for example an account verification or, in this example, a password reset:
const playwright = require('playwright');
const assert = require('chai').assert;
(async () => {
const serverId = 'abcd1234';
const serverDomain = 'abcd1234.mailosaur.net';
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.mailosaur.com/password-reset');
await page.screenshot({ path: `password-request.png` });
// Make up an email address for this test
const randomString = new Date().getTime();
const testEmail = `${randomString}@${serverDomain}`;
// Request a password reset for our test email address
await page.fill('#email', testEmail);
await page.click('button[type="submit"]');
await page.screenshot({ path: `password-request-sent.png` });
await browser.close();
}
})();
Step 3 - Install the Mailosaur Node.js library
Because Playwright is JavaScript-based, you can easily couple it with the official Mailosaur Node.js library.
npm i -D mailosaur
# or
yarn add -D mailosaur
Step 4 - Use Mailosaur with Playwright
const playwright = require('playwright');
const assert = require('chai').assert;
const Mailosaur = require('mailosaur');
(async () => {
const apiKey = 'YOUR_API_KEY';
const mailosaur = new Mailosaur(apiKey);
const serverId = 'abcd1234';
const serverDomain = 'abcd1234.mailosaur.net';
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.mailosaur.com/password-reset');
await page.screenshot({ path: `password-request.png` });
// Make up an email address for this test
const randomString = new Date().getTime();
const testEmail = `${randomString}@${serverDomain}`;
// Request a password reset for our test email address
await page.fill('#email', testEmail);
await page.click('button[type="submit"]');
await page.screenshot({ path: `password-request-sent.png` });
// Search for the email
const email = await mailosaur.messages.get(serverId, {
sentTo: testEmail
});
assert.equal(email.subject, 'Set your new password for ACME Product');
await browser.close();
})();
Email not found in time?
By default, the get method only looks for emails that were received by Mailosaur within the last hour.
You can override this by setting receivedAfter, like so:
const email = await mailosaur.messages.get(serverId, {
sentTo: testEmail
}, {
// Find messages received since Jan 1st 2020.
// Note, this will be slower than the default, so we recommend
// you only use this during initial configuration/setup.
receivedAfter: new Date('2020-01-01T00:00:00Z')
});
Library reference
Check out all of the methods available to the Mailosaur Node.js library.
Common test cases
Now that you have a working project that fetches an email, you can use this to begin writing tests for various pieces of functionality.
Check out these guides on the most common test cases: