Cypress Test Signups With Temporary Email Deterministically

Testing signups with temporary email in Cypress often becomes flaky when waiting for verification emails. This is usually because the process relies on polling an inbox and hoping the email arrives within an arbitrary timeout. You can make this deterministic by integrating a tool that provides a dedicated, accessible inbox for your test accounts.

Deterministic Cypress Test Signups with Temporary Email

The core issue with flaky Cypress test signups is the unpredictable delivery of verification emails. Instead of polling a generic inbox or relying on a service that might delay or drop emails, you need a direct channel. This means using a temporary email service that exposes its inbox contents in a way your Cypress tests can query. When you use FakeSignup, its integrated inbox displays incoming emails immediately. This allows your tests to locate the OTP or verification link without arbitrary waits, leading to stable and repeatable test runs.

Installing and Opening the Extension

To get started, you need the FakeSignup Chrome extension. This tool handles both form filling and provides the accessible temporary email inbox.

Install the extension: Click this link to install FakeSignup on the Chrome Web Store: FakeSignup on the Chrome Web Store
Open the extension: Once installed, click the extension icon in your browser toolbar. A side panel will open. This panel is your temporary inbox. You can use it to generate new email addresses and view incoming emails.

Fetching the Temporary Email Address

Your Cypress tests need to know which temporary email address to use. The FakeSignup extension can generate this for you.

Generate Email in Extension: Within the FakeSignup side panel, click the "New Email" button. This generates a unique, disposable email address.
Copy the Email Address: Copy the generated email address. You'll paste this into the signup form in your Cypress test.

Store in Cypress: In your Cypress test file, you can assign this email address to a variable. For example:

let tempEmail;

beforeEach(() => {
  // This assumes you've manually generated and copied an email
  // or you'll integrate a method to get it programmatically if supported.
  tempEmail = 'your-generated-email@example.com';
});

it('should verify signup with OTP', () => {
  cy.visit('/signup');
  cy.get('input[name="email"]').type(tempEmail);
  cy.get('input[name="password"]').type('TestPassword123!');
  cy.get('button[type="submit"]').click();

  // Now, wait for the OTP in the FakeSignup inbox
  // ... (details in next section)
});

Note: For full automation, you would typically run the FakeSignup extension in headless mode alongside your Cypress tests. This requires specific configuration or using its premium "Full Auto" feature to programmatically get new email addresses.

Extracting OTP or Verification Links

This is where deterministic testing shines. Instead of waiting for an email to arrive and then parsing it, you query the FakeSignup extension's inbox directly.

Access the Inbox: After submitting the signup form, your Cypress test needs to check the FakeSignup inbox.
Query for New Emails: The FakeSignup extension's inbox, visible in its side panel, contains the emails sent to your temporary address. Your test will look for an email from the expected sender with a subject line indicating an OTP or verification.

Parse the Email Content: Once the email is found, extract the OTP code or the verification link from its body.

Here's a conceptual example of how you might interact with the FakeSignup inbox within Cypress:

// Assuming FakeSignup's inbox is accessible via a custom command or direct DOM interaction
// (This is a simplified example; actual implementation depends on how the extension exposes data)

it('should verify signup with OTP', () => {
  const signupEmail = 'testuser@fakesignup.com'; // Use an email generated by FakeSignup
  cy.visit('/signup');
  cy.get('input[name="email"]').type(signupEmail);
  cy.get('input[name="password"]').type('SecureP@ssw0rd');
  cy.get('button[type="submit"]').click();

  // Custom command to fetch OTP from FakeSignup's inbox
  cy.getOtpFromFakeSignupInbox(signupEmail, 'Your Verification Code').then((otp) => {
    cy.get('input[name="otp"]').type(otp);
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard'); // Or your success page
  });
});

The cy.getOtpFromFakeSignupInbox command would be a custom Cypress command you define. This command would interact with the FakeSignup extension's UI (or its underlying mechanism if exposed) to find the email and extract the OTP. The key is that this lookup is a direct query, not a timed wait.

Saving Test Account Credentials

For repeated testing scenarios, like testing login flows or password resets, you'll want to save the credentials of the accounts created.

After a successful signup and email verification, your test can store the generated email address and the password used. This data can be saved locally in Chrome's localStorage or sessionStorage within the context of your test environment. This allows subsequent tests to log in directly without needing to go through the signup and verification process again, significantly speeding up your test suite. Saved accounts can remain in Chrome local storage for the duration of your testing session or longer, depending on your configuration.

Handling Verification Links

Some signup processes don't use OTPs but instead send a verification link. The same deterministic approach applies.

Submit Signup Form: Fill out the signup form with a FakeSignup email address.
Locate Verification Email: Query the FakeSignup inbox for the email containing the verification link.

Extract and Click Link: Parse the email body to find the URL. Use Cypress to navigate directly to that URL. This bypasses the need for any manual clicking or timed waits.

it('should verify signup with a magic link', () => {
  const signupEmail = 'magiclinkuser@fakesignup.com';
  cy.visit('/signup');
  cy.get('input[name="email"]').type(signupEmail);
  cy.get('input[name="password"]').type('AnotherSecureP@ss!');
  cy.get('button[type="submit"]').click();

  // Custom command to find and return the magic link
  cy.getMagicLinkFromFakeSignupInbox(signupEmail, 'Verify your email').then((verificationLink) => {
    cy.visit(verificationLink); // Navigate directly to the verification URL
    cy.url().should('include', '/welcome'); // Or your post-verification page
  });
});

By treating email verification not as an asynchronous event to be waited for, but as a piece of data to be fetched, you can build much more reliable Cypress test signups with temporary email.