How do we automate OTP in Cypress and Playwright e2e tests with gmail tester?

In today's world of software development, end-to-end (E2E) testing is a crucial step to ensure the functionality of web applications across different scenarios. One common scenario is the user registration process, which often involves email verification using One-Time Passwords (OTPs). In this blog, we will explore how to automate OTP verification using the gmail-tester library in combination with Cypress and Playwright E2E tests.

What is gmail-tester?

gmail-tester is a Node.js library that provides a simple way to interact with Gmail accounts for testing purposes. It allows you to check and retrieve email messages directly from Gmail-powered accounts. This is particularly useful when you need to verify emails sent during the user registration process, password resets, or any other email-based interactions.

Setting Up gmail-tester

Before we dive into the details of automating OTP verification, let's go through the setup process for gmail-tester.

Install gmail-tester

Install via npm

npm install --save-dev gmail-tester

Install via yarn

yarn add --dev gmail-tester

Google Cloud Platform Setup: To access Gmail accounts, you need to set up OAuth2 authentication. Here are the steps to follow:
- Create a client ID and client secret in your Google Cloud Platform account. Choose "Desktop app" for the application type.
- Download the OAuth2 credentials file (credentials.json).
- Activate the Gmail API for your account.
- Place the credentials.json file in a safe and accessible directory.
Run the Initialization Script: Run the initialization script to generate an OAuth2 token and activate access to your Gmail account. Replace <path-to-credentials.json>, <path-to-token.json>, and <target-email> with the appropriate values.
```
node node_modules/gmail-tester/init.js <path-to-credentials.json> <path-to-token.json> <target-email>
```
Follow the prompts to grant permission and obtain the access token.

Automating OTP Verification

Now that we have set up gmail-tester, let's see how we can use it to automate OTP verification in E2E tests using Cypress and Playwright.

Cypress Configuration

In your Cypress project, create a configuration file (cypress.config.js) to integrate gmail-tester. This allows you to use the gmail-tester functions as custom Cypress tasks.

import { defineConfig } from "cypress";
import gmail from "gmail-tester";
 
// import your file from its location
const credentialPath = //path of createntials file;
const tokenPath = //path of gmail token file;
 
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      on("task", {
        "gmail:check": async (args) => {
          const { subject, to } = args;
          const email = await gmail.check_inbox(credentialPath, tokenPath, {
            subject: subject,
            to: to,
            include_body: true,
          });
          return email;
        },
      });
    },
  },
});

Cypress Test Script

Create a Cypress test script (e.g., spec.cy.js) to automate OTP verification using the retrieved email messages.

describe('OTP Verification:', () => {
  it('Automate OTP verification using `gmail-tester`', function () {
    cy.task('gmail:get-messages', {
      options: {
        from: 'sender@example.com', // Email sender
        subject: 'Your OTP Code', // OTP email subject
        include_body: true,
      },
    }).then((emails) => {
      assert.isAtLeast(
        emails.length,
        1,
        'Expected to find at least one OTP email, but none were found!'
      );
 
      const otpCode = extractOTPCode(emails[0].body.html);
      // Perform actions to enter OTP code on your application
      // ...
 
      // Continue with your E2E test assertions
      // ...
    });
  });
});

Playwright Test Script

Next, let's create a Playwright test script (e.g., spec.pw.js) to automate OTP verification using the retrieved email messages.

import { chromium } = from "playwright";
 
describe("OTP Verification:", () => {
  it("Automate OTP verification using `gmail-tester` and Playwright", async () => {
    const browser = await chromium.launch();
    const context = await browser.newContext();
 
    const page = await context.newPage();
    await page.goto("https://your-app-url.com");
 
    const emails = await page.evaluate(async () => {
      const response = await fetch("/path-to-emails-endpoint");
      const emails = await response.json();
      return emails;
    });
 
    expect(emails.length).toBeGreaterThanOrEqual(1);
 
    const otpCode = extractOTPCode(emails[0].body.html);
    // Perform actions to enter OTP code on your application using Playwright
    // ...
 
    // Continue with your E2E test assertions using Playwright
    // ...
 
    await browser.close();
  });
});

Conclusion

By combining the power of gmail-tester with both Cypress and Playwright, you can effectively automate OTP verification in your end-to-end tests. This robust approach ensures that your user registration and authentication processes are thoroughly tested, enhancing the quality and reliability of your web applications. Be sure to tailor the implementation to match your application's specific email content and formats.

With comprehensive testing in place, you can confidently deliver web applications that provide a seamless user experience across different scenarios, including email-based interactions and OTP verification.

How do we automate OTP using gmail tester in cypress & playwright e2e test