Testing email verification

The Membrane signup flow includes email verification, which can be tricky to write automated end-to-end tests for. With Membrane programmable email and HTTP endpoints plus Playwright end-to-end testing, the process is smooth.

We reliably test our full signup flow——email verification and all——hourly on a cron and on CI whenever we push to GitHub.

TL;DR

We have a Playwright e2e test, signup.spec.ts, and a Membrane program, pete/verify-email that work in tandem.

1. Playwright signs up as a test user, triggering a verification email
2. We forward the verification email to our Membrane program's email address
3. The Membrane program extracts the verification URL and stores it in state
4. Playwright fetches that link from the program's endpoint
5. Playwright navigates to the URL then completes the signup process

Here's the Playwright code (steps 1, 4, and 5 above):

test("Signup", async ({ page, request }) => {
  await page.goto("https://membrane.io");
  await page.getByText("LAUNCH").click();
  await page.getByText("Sign up").click();

  // Step 1
  const username = `test+${Date.now()}@membrane.io`;
  await page.fill("[name=email]", username);
  await page.fill("[name=password]", process.env.PASSWORD);
  await page.getByText("Continue").click();

  // Step 4
  const PROGRAM_EMAIL = "https://example-endpoint-123.hook.membrane.io";
  const res = await request.get(PROGRAM_EMAIL);
  const verifyUrl = await res.text();

  // Step 5
  await page.goto(verifyUrl);
  await page.getByText("Continue").click();
  await expect(page.getByText("HELLO WORLD")).toBeVisible();
});

And here's the code for pete/verify-email (steps 3 and 4):

import { state } from "membrane";

state.link = "";

// Step 3
export async function email({ from, subject, text, html }) {
  const match = html.match(/https:\/\/auth\.membrane\.io\/u\/email-verification\?ticket=\w+#/);
  if (match) {
    const link = match[0];
    state.link = link;
  }
}

// Step 4
export async function endpoint() {
  let attempts = 0;

  // Wait for the email to come through
  while (attempts < 12) {
    if (state.link) {
      const link = state.link;
      state.link = ""; // reset for next run
      return link;
    }

    await sleep(1);
    ++attempts;
  }
}

Full breakdown

Steps 1, 2: Sign up, trigger verification email

The Playwright test signs up as a test user with a timestamped email address like test+1743603888462@membrane.io.

If you haven't seen the test+ gmail syntax before, it's a handy way to create many new accounts with the same root email address. Emails sent to test+whatever@membrane.io get forwarded to the test@membrane.io inbox.

Step 2: Forward verification email

I added a Gmail filter that forwards all emails from noreply@membrane.io with the subject line "Please verify your email" to the email address of a Membrane program I wrote, pete/verify-email.

Every program in Membrane has its own email address that can send and receive email. Setting up a forwarding filter is easy, so your Membrane programs can run arbitrary code on any email you receive. We call this programmable email.

Step 3: Extract and save verification link

The pete/verify-email program exports an email action to handle all incoming emails. That function parses the body of the email to extract the verification URL, which it stores in program state.

Membrane's durable programs come in handy when you just need to store a bit of state like this without wiring up a database (although you can!).

Step 5: Fetch verification link

The Playwright test fetches the verification URL from the HTTP endpoint of pete/verify-email. The exported endpoint action waits for state to be populated with the verification link from the previous step, then it responds to the Playwright request.

Membrane programs each come with their own unique endpoint URL, which makes it easy to fetch data externally.

Step 6: Complete signup

The Playwright test navigates to the verification URL, which redirects to the set-username phase of signup then loads the IDE.

Make it your own

If this or a similar automation would be useful to your engineering team, give it a try! We'd be happy to answer any questions——email us at contact@membrane.io.

- Pete Millspaugh (pete@membrane.io)