Documentation: Retrieving OTP Sent by Email with Playwright

This guide provides instructions for retrieving an OTP sent by email in Playwright tests using the otp-device-sync service. You can retrieve the OTP by making a request to the HTTP API or using the otp-device-sync JavaScript library. Each approach has unique advantages depending on your testing requirements and setup.

Choosing Between HTTP API and JavaScript Library

1. HTTP API
   • Best For: Simple setups where you want to minimize dependencies and handle requests directly in Playwright.
   • Advantages:
     • Easily integrates with Playwright’s request feature.
     • Provides flexibility in request handling and custom configuration.
   • Usage: Send a request to retrieve the email OTP from the API endpoint.
2. JavaScript Library
   • Best For: More complex setups or when using multiple features of otp-device-sync.
   • Advantages:
     • Offers a straightforward function call with built-in error handling and verbose logging.
     • Reduces code duplication by using an encapsulated function.
   • Usage: Import getMailComponents from otp-device-sync to retrieve the OTP email components directly.

Option 1: Using the HTTP API in Playwright

Example Code

const { test, expect } = require('@playwright/test');

test('Retrieve OTP sent by email via HTTP API', async ({ request }) => {
  const API_BASE_URL = process.env.API_BASE_URL;
  const user = 'testEmail@example.com';
  const service = 'testService';
  const registeredKey = 'YOUR_REGISTERED_KEY';

  const response = await request.get(`${API_BASE_URL}/retrieve/email`, {
    params: {
      user,
      service,
      registeredKey,
    }
  });

  if (response.ok()) {
    const data = await response.json();
    console.log(`Retrieved OTP Code: ${data.code}`);
    expect(data.code).toBeDefined();
  } else {
    const errorText = await response.text();
    console.error(`Error retrieving email OTP: ${errorText}`);
    throw new Error(errorText);
  }
});

Option 2: Using the JavaScript Library in Playwright

Setup

1. Install the Library:
   • Run npm install otp-device-sync in your Playwright project directory.
2. Import and Use the Library:
   • Use getMailComponents from otp-device-sync to retrieve the OTP email components directly in your Playwright test.

Example Code

const { test, expect } = require('@playwright/test');
const { getMailComponents } = require('otp-device-sync');

test('Retrieve OTP sent by email via JavaScript Library', async () => {
  const user = 'testEmail@example.com';
  const service = 'testService';
  const registeredKey = 'YOUR_REGISTERED_KEY';

  try {
    const { code, text, html } = await getMailComponents(user, service, { registeredKey, verbose: true });
    console.log(`Retrieved OTP Code: ${code}`);
    expect(code).toBeDefined();
  } catch (error) {
    console.error(`Error retrieving email OTP: ${error.message}`);
    throw error;
  }
});

Key Points

• HTTP API:
  • Ideal for quick integrations using Playwright’s request capabilities.
  • Allows full control over HTTP response handling and timeout configurations.
• JavaScript Library:
  • Simplifies code by providing a reusable function for retrieving OTP emails.
  • Includes options for verbose logging and error handling for enhanced debugging.

Conclusion

Use the HTTP API if you want direct control over request handling within Playwright. Opt for the JavaScript library if you prefer a simpler function call with built-in error handling. Both methods are well-suited for handling email OTPs in Playwright, enabling seamless 2FA flows in your end-to-end tests.