Cypress + plop.email

Verify emails in your Cypress E2E tests. Use cy.request() to fetch and assert on email content.

Cypress Documentation

Features

Custom Commands

Create reusable cy.getEmail() and cy.waitForEmail() commands.

Chainable API

Fluent assertions that fit Cypress patterns.

Retry Built-in

Leverage Cypress retry-ability for email polling.

Dashboard Integration

Email test results visible in Cypress Dashboard.

Setup

# Install Cypress
npm install cypress --save-dev

# Add to cypress.config.ts
export default defineConfig({
  e2e: {
    env: {
      PLOP_API_KEY: process.env.PLOP_API_KEY,
      PLOP_API_URL: 'https://api.plop.email/v1',
    },
  },
});

Custom Command Setup

Add a reusable command for fetching emails.

Custom Command Setuptypescript
// cypress/support/commands.ts
Cypress.Commands.add('getLatestEmail', (toAddress: string) => {
  return cy.request({
    method: 'GET',
    url: `${Cypress.env('PLOP_API_URL')}/messages/latest`,
    headers: {
      Authorization: `Bearer ${Cypress.env('PLOP_API_KEY')}`,
    },
    qs: { to: toAddress },
  }).its('body');
});

// Usage in test
describe('Email Verification', () => {
  it('sends confirmation email', () => {
    const testEmail = `test+${Date.now()}@in.plop.email`;

    cy.visit('/signup');
    cy.get('[name="email"]').type(testEmail);
    cy.get('form').submit();

    cy.wait(2000);
    cy.getLatestEmail(testEmail).then((email) => {
      expect(email.subject).to.include('Confirm');
    });
  });
});

Polling for Email Arrival

Retry until email arrives with custom timeout.

Polling for Email Arrivaltypescript
// cypress/support/commands.ts
Cypress.Commands.add('waitForEmail', (toAddress: string, options = {}) => {
  const { timeout = 10000, interval = 1000, subject } = options;

  const fetchEmail = () => {
    return cy.request({
      method: 'GET',
      url: `${Cypress.env('PLOP_API_URL')}/messages/latest`,
      headers: {
        Authorization: `Bearer ${Cypress.env('PLOP_API_KEY')}`,
      },
      qs: { to: toAddress },
      failOnStatusCode: false,
    });
  };

  return cy.wrap(null, { timeout }).should(() => {
    return fetchEmail().then((response) => {
      if (response.status !== 200) {
        throw new Error('Email not yet received');
      }
      if (subject && !response.body.subject.includes(subject)) {
        throw new Error('Email subject does not match');
      }
      return response.body;
    });
  });
});

// Usage
cy.waitForEmail(testEmail, { subject: 'Reset', timeout: 15000 });

Tips

  • Define custom commands in cypress/support/commands.ts
  • Use cy.intercept() to stub email sending in unit tests
  • Add TypeScript types for custom commands in cypress.d.ts
  • Run email tests in a separate spec file for better organization

Related Integrations

Start testing with Cypress

Add email verification to your Cypress tests in minutes.