Playwright Email Testing: A Real End-to-End Tutorial (No Mocks)

Most "email testing" advice ends at stubbing the send call. You assert that your app tried to send a message, and the test goes green. That leaves the interesting half untested: whether the message actually left your infrastructure, whether the template rendered, and whether the six-digit code inside it matches the one your backend is willing to accept. This walks through the other approach — driving a real signup flow in Playwright , letting a real email get delivered to a real inbox, then reading it back over an API and typing the code into the page. No mail server to run, no shared QA mailbox to clean up. The shape of the problem A verification-email test has four moving parts: an address that is unique to this test run, the browser flow that triggers the send, a way to read the message that arrives, code extraction and the assertion. Steps 1 and 3 are the ones people get wrong, and they get them wrong in the same way: by sharing one mailbox across the suite. The moment two tests run in parallel, one of them reads the other's email. So the rule is one inbox per test , provisioned on the fly and thrown away afterwards. The inbox helper Any disposable-inbox API with a REST interface works here. I'll use MoeMail 's because it's open source and the free tier is enough for a CI suite — the shape is the same anywhere, so swap the base URL and the auth header if you use something else. // inbox.ts const API = ' https://moemail.app/api ' const KEY = process . env . MAIL_KEY ! export type Inbox = { id : string ; email : string } export async function createInbox ( ttlMs = 3 _600_000 ): Promise < Inbox > { const res = await fetch ( ` ${ API } /emails/generate` , { method : ' POST ' , headers : { ' X-API-Key ' : KEY , ' Content-Type ' : ' application/json ' }, // Omit `name` and a random local part is generated for you — which is // exactly what you want, so parallel tests can never collide. body : JSON . stringify ({ expiryTime : ttlMs , domain : ' moemail.app ' }), }) if