https://github.com/mailslurp/examples
{
"description": "Example of using emails with Cypress JS",
"scripts": {
"test": "cypress run",
"dev": "cypress open",
"postinstall": "cypress install"
},
"dependencies": {
"cypress": "^13.8.1",
"mailslurp-client": "^15.20.0"
}
}
const { defineConfig } = require('cypress')
module.exports = defineConfig({
defaultCommandTimeout: 30000,
requestTimeout: 30000,
viewportHeight: 800,
viewportWidth: 800,
videoCompression: false,
e2e: {
setupNodeEvents(on, config) {},
},
})
# Test Emails in Cypress JS
See [/cypress/integration/example.cy.js](/cypress/integration/example.spec.js) for usage.
**Note:** the test uses `mailslurp-client` and adds custom commands in the `support/commands.js` file.
## Setup
First get a MailSlurp API Key then install the dependencies:
`npm init -y`
`npm install --save mailslurp-client cypress`
## Run
To run these tests set the environment variable `CYPRESS_API_KEY` to your MailSlurp API Key.
```bash
CYPRESS_API_KEY="your-mailslurp-api-key" npm run test`
```
-include ../.env
node_modules:
npm install
docker:
docker build -t cypress --build-arg API_KEY=$(API_KEY) . && docker run cypress
dev: node_modules
CYPRESS_API_KEY=$(API_KEY) npm run dev
test: node_modules
CYPRESS_API_KEY=$(API_KEY) npm run test
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
//<gen>add_cypress_commands
import './commands'
//</gen>
// Alternatively you can use CommonJS syntax:
// require('./commands')
//<gen>cypress_client_add_command
const { MailSlurp } = require('mailslurp-client');
// set your api key with an environment variable `CYPRESS_API_KEY` or configure using `env` property in config file
// (cypress prefixes environment variables with CYPRESS)
const apiKey = Cypress.env('API_KEY')
const mailslurp = new MailSlurp({ apiKey });
Cypress.Commands.add("createInbox", () => {
return mailslurp.createInbox();
});
Cypress.Commands.add("waitForLatestEmail", (inboxId) => {
// how long we should hold connection waiting for an email to arrive
const timeoutMillis = 30_000;
return mailslurp.waitForLatestEmail(inboxId, timeoutMillis)
});
//</gen>
/**
* Test user sign-up using a new email address
*
* We will use the MailSlurp test authentication playground
*/
describe('Sign up', () => {
it('can load oauth demo site', () => {
cy.visit('https://playground.mailslurp.com');
cy.contains('Sign in to your account');
});
it('can click sign up link', () => {
cy.get('[data-test="sign-in-create-account-link"]').click();
cy.contains('Testable Sign Up Form');
});
const password = "test-password";
let inboxId;
let emailAddress;
let code;
it('can generate a new email address and sign up', () => {
// see commands.js custom commands
cy.createInbox().then(inbox => {
// verify a new inbox was created
assert.isDefined(inbox)
// save the inboxId for later checking the emails
inboxId = inbox.id
emailAddress = inbox.emailAddress;
// sign up with inbox email address and the password
cy.get('input[name=email]').type(emailAddress);
cy.get('input[name=password]').type(password);
cy.get('[data-test="sign-up-create-account-button"]').click();
});
});
it('can receive the confirmation email and extract the code', () => {
// wait for an email in the inbox
cy.waitForLatestEmail(inboxId).then(email => {
// verify we received an email
assert.isDefined(email);
// verify that email contains the code
assert.strictEqual(/verification code is/.test(email.body), true);
// extract the confirmation code (so we can confirm the user)
code = /([0-9]{6})$/.exec(email.body)[1];
});
});
it('can enter confirmation code and confirm user', () => {
assert.isDefined(code);
cy.get('[data-test="confirm-sign-up-confirmation-code-input"]').type(code);
cy.get('[data-test="confirm-sign-up-confirm-button"]').click();
});
it('can log in with confirmed account', () => {
cy.contains('Sign in to your account');
// fill out username (email) and password
cy.get('[data-test="username-input"]').type(emailAddress);
cy.get('[data-test="sign-in-password-input"]').type(password);
// submit
cy.get('[data-test="sign-in-sign-in-button"]').click();
});
it('shows the successful greeting', () => {
cy.contains("Welcome");
});
});