Documentation: Retrieving OTP Sent by SMS with Playwright

This guide provides instructions for retrieving an OTP sent by SMS in Playwright tests using the otp-device-sync service. You have two options: retrieving the OTP through the HTTP API or using the otp-device-sync JavaScript library. Each method has specific benefits depending on your test setup and requirements.

Choosing Between HTTP API and JavaScript Library

1. HTTP API
   • Best For: Tests that require minimal dependencies, with HTTP requests handled directly in Playwright.
   • Advantages:
     • Integrates seamlessly with Playwright’s request capabilities.
     • Offers straightforward setup and configuration, ideal for lightweight testing.
   • Usage: Send an HTTP request to retrieve the SMS OTP from the API endpoint.
2. JavaScript Library
   • Best For: Scenarios where you need reusable functions and additional logging or error handling.
   • Advantages:
     • Provides an encapsulated function call with built-in error handling and verbose logging.
     • Reduces redundancy in code by reusing the SMS OTP retrieval function from otp-device-sync.
   • Usage: Import getSMSCode from otp-device-sync and use it directly in your test.

Option 1: Using the HTTP API in Playwright

Example Code

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

test('Retrieve OTP sent by SMS via HTTP API', async ({ request }) => {
  const API_BASE_URL = process.env.API_BASE_URL;
  const phoneNumber = '1234567890';
  const service = 'testService';
  const registeredKey = 'YOUR_REGISTERED_KEY';

  const response = await request.get(`${API_BASE_URL}/retrieve/sms`, {
    params: {
      phone: phoneNumber,
      from: 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 SMS 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 getSMSCode from otp-device-sync to retrieve the OTP directly in your Playwright test.

Example Code

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

test('Retrieve OTP sent by SMS via JavaScript Library', async () => {
  const phoneNumber = '1234567890';
  const service = 'testService';
  const registeredKey = 'YOUR_REGISTERED_KEY';

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

Key Points

• HTTP API:
  • Ideal for simple test configurations with direct HTTP requests.
  • Provides full control over response handling, useful for custom timeouts and retries.
• JavaScript Library:
  • Simplifies test code by providing a reusable function for retrieving SMS OTPs.
  • Built-in error handling and verbose logging options for easier debugging.

Conclusion

Choose the HTTP API for a straightforward approach that leverages Playwright's request methods, or opt for the JavaScript library if you prefer a simple function call with logging and error handling. Both methods are effective for retrieving SMS OTPs in Playwright, ensuring smooth 2FA testing flows in your end-to-end tests.