Documentation: Retrieving OTP Sent by SMS with Cypress

This guide provides instructions on retrieving a One-Time Password (OTP) sent by SMS within a Cypress test environment. You can retrieve the OTP using either the HTTP API or the JavaScript library provided by otp-device-sync. Each approach has its own advantages, and the best choice depends on your testing setup and needs.

Choosing Between HTTP API and JavaScript Library

1. HTTP API
   • Best For: Cases where you want minimal dependencies within your Cypress tests, or where your tests already use HTTP requests directly.
   • Advantages:
     • Lightweight and doesn’t require additional libraries in Cypress.
     • Good for integrating directly with the Cypress command chain using cy.request.
     • Allows you to control the timeout and network errors directly within the Cypress environment.
   • Usage: Make an HTTP request within Cypress to retrieve the OTP.
2. JavaScript Library
   • Best For: Cases where you prefer a simpler, programmatic approach, with functions provided directly by otp-device-sync.
   • Advantages:
     • Provides an easy-to-use function with built-in parameters and error handling.
     • Verbose logging option for debugging.
     • Reduces repetitive code by abstracting the request handling.
   • Usage: Import the library in Cypress and call the function to retrieve the OTP.

Option 1: Using the HTTP API in Cypress

Example Code

Cypress.Commands.add('getSMSOTP', (phone, from, registeredKey) => {
  const API_BASE_URL = Cypress.env('API_BASE_URL');

  return cy.request({
    method: 'GET',
    url: `${API_BASE_URL}/retrieve/sms`,
    qs: {
      phone,
      from,
      registeredKey,
    },
    failOnStatusCode: false,
    timeout: 300000 // 5 minutes
  }).then((response) => {
    if (response.status === 200) {
      return response.body.code;
    } else {
      throw new Error(`Error retrieving SMS OTP: ${response.body}`);
    }
  });
});

// Usage in a Cypress test
cy.getSMSOTP("+1234567890", "ServiceName", "YOUR_REGISTERED_KEY").then((otpCode) => {
  cy.log(`Retrieved SMS OTP: ${otpCode}`);
});

Option 2: Using the JavaScript Library in Cypress

Setup

1. Install the Library:
   • Run npm install otp-device-sync in your project directory to add the library to Cypress.
2. Import and Use the Function:
   • Use getSMSCode to retrieve the OTP directly within your Cypress test.

Example Code

import { getSMSCode } from 'otp-device-sync';

Cypress.Commands.add('getSMSOTP', (phone, from, registeredKey) => {
  return getSMSCode(phone, from, { registeredKey, timeout: 300000, verbose: true })
    .then((data) => {
      return data.code;
    })
    .catch((error) => {
      throw new Error(`Error retrieving SMS OTP: ${error.message}`);
    });
});

// Usage in a Cypress test
cy.getSMSOTP("+1234567890", "ServiceName", "YOUR_REGISTERED_KEY").then((otpCode) => {
  cy.log(`Retrieved SMS OTP: ${otpCode}`);
});

Key Points

• HTTP API:
  • Lightweight, good for minimizing dependencies.
  • Provides direct Cypress control over request parameters and handling.
• JavaScript Library:
  • Simplifies code and provides built-in error handling.
  • Can be more intuitive for those familiar with JavaScript functions.

Conclusion

Both the HTTP API and JavaScript library are effective for retrieving SMS OTPs in Cypress. Choose the HTTP API for direct control over HTTP requests or if you prefer not to add dependencies. Use the JavaScript library if you want a more programmatic approach with prebuilt handling for common options and error management.