WebdriverIO
Learn how to test email workflows using Trivumo and WebdriverIO with Selenium.
WebdriverIO provides a clean API for browser automation while using Selenium WebDriver under the hood. Combined with Trivumo, you can reliably test email-based workflows including account verification, password resets, magic links, OTP authentication, and email content validation.
Install
npm install trivumo
npm install webdriverioCreate a Client
import { TrivumoClient } from "trivumo";
const trivumo = new TrivumoClient({
apiKey: process.env.TRIVUMO_API_KEY!,
domain: "sandbox.trivumo.com",
});Verify Email Signup Flow
Generate a unique email address, create an account, wait for the verification email, visit the verification link, and verify the account.
import { expect } from "@wdio/globals";
const email = trivumo.generateEmail();
const message = await trivumo.waitForMessageAfter(
async () => {
await browser.url(
"http://localhost:3000/signup"
);
await $("#email").setValue(email);
await $("#password").setValue(
"Password123!"
);
await $("button[type='submit']").click();
},
{
to: email,
subject: "Verify your account",
}
);
const verificationLink =
message.html.links[0].href;
await browser.url(verificationLink);
await expect(
$("*=Email verified")
).toBeDisplayed();Password Reset Flow
Trigger a password reset, wait for the reset email, extract the reset link, reset the password, and verify success.
import { expect } from "@wdio/globals";
const email = trivumo.generateEmail();
const message = await trivumo.waitForMessageAfter(
async () => {
await browser.url(
"http://localhost:3000/forgot-password"
);
await $("#email").setValue(email);
await $("button[type='submit']").click();
},
{
to: email,
subject: "Reset your password",
}
);
const resetLink =
message.html.links[0].href;
await browser.url(resetLink);
await $("#password").setValue(
"NewPassword123!"
);
await $("#confirmPassword").setValue(
"NewPassword123!"
);
await $("button[type='submit']").click();
await expect(
$("*=Password updated")
).toBeDisplayed();Magic Link Login
Request a magic login link, wait for the email, open the link, and verify the user is authenticated.
import { expect } from "@wdio/globals";
const email = trivumo.generateEmail();
const message = await trivumo.waitForMessageAfter(
async () => {
await browser.url(
"http://localhost:3000/login"
);
await $("#email").setValue(email);
await $("button[type='submit']").click();
},
{
to: email,
subject: "Your magic login link",
}
);
const magicLink =
message.html.links[0].href;
await browser.url(magicLink);
await expect(
$("*=Dashboard")
).toBeDisplayed();One-Time Password (OTP)
Request an OTP, extract the code from the email, submit it, and verify the user.
import { expect } from "@wdio/globals";
const email = trivumo.generateEmail();
const message = await trivumo.waitForMessageAfter(
async () => {
await browser.url(
"http://localhost:3000/otp"
);
await $("#email").setValue(email);
await $("button[type='submit']").click();
},
{
to: email,
subject: "Your verification code",
}
);
const otp =
message.html.codes[0] ??
message.text.codes[0];
await $("#otp").setValue(otp);
await $("button[type='submit']").click();
await expect(
$("*=Verification successful")
).toBeDisplayed();Validate Email Content
Validate the email subject, body content, and links.
const email = trivumo.generateEmail();
const message =
await trivumo.waitForMessage({
to: email,
subject: "Welcome",
});
await expect(
message.subject
).toEqual("Welcome");
await expect(
message.html.body
).toContain("Getting Started");
await expect(
message.html.links.some((link) =>
link.href.includes("/onboarding")
)
).toBe(true);Best Practice
Prefer waitForMessageAfter() when an email is triggered by a user action.
const message =
await trivumo.waitForMessageAfter(
async () => {
await $("button[type='submit']").click();
},
{
to: email,
subject: "Verify your account",
}
);It ensures only emails received after the action are considered, preventing false positives caused by previously received messages.