Documentation: Generating Time-Based OTP with Playwright

This guide provides instructions for generating a Time-Based One-Time Password (TOTP) in Playwright tests using the otp-device-sync service. You can either generate TOTPs through the HTTP API or use the otp-device-sync JavaScript library. Both options have distinct advantages depending on your requirements and test setup.

Choosing Between HTTP API and JavaScript Library

1. HTTP API
   • Best For: Simple Playwright test setups without additional dependencies.
   • Advantages:
     • Works directly with request functionality in Playwright.
     • Simple to set up and configure, making it ideal for quick, lightweight testing.
   • Usage: Sends a request to retrieve the TOTP code from the API endpoint.
2. JavaScript Library
   • Best For: Scenarios where Playwright tests require additional library functions and logging capabilities.
   • Advantages:
     • Provides a reusable function with integrated error handling.
     • Offers detailed logging, which is useful for debugging and monitoring OTP generation.
   • Usage: Import getTimeBasedCode from otp-device-sync and use it directly in the test.

Option 1: Using the HTTP API in Playwright

Example Code

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

test('Generate TOTP via HTTP API', async ({ request }) => {
  const API_BASE_URL = process.env.API_BASE_URL;
  const userLabel = 'testUser';
  const issuerService = 'testService';
  const registeredKey = 'YOUR_REGISTERED_KEY';

  const response = await request.get(`${API_BASE_URL}/retrieve/totp`, {
    params: {
      label: userLabel,
      issuer: issuerService,
      registeredKey,
    }
  });

  if (response.ok()) {
    const { code } = await response.json();
    console.log(`Generated TOTP: ${code}`);
    expect(code).toBeDefined();
  } else {
    const errorText = await response.text();
    console.error(`Error generating TOTP: ${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 getTimeBasedCode from otp-device-sync to generate the TOTP within Playwright.

Example Code

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

test('Generate TOTP via JavaScript Library', async () => {
  const userLabel = 'testUser';
  const issuerService = 'testService';
  const registeredKey = 'YOUR_REGISTERED_KEY';

  try {
    const otpCode = await getTimeBasedCode(userLabel, issuerService, { registeredKey, verbose: true });
    console.log(`Generated TOTP: ${otpCode}`);
    expect(otpCode).toBeDefined();
  } catch (error) {
    console.error(`Error generating TOTP: ${error.message}`);
    throw error;
  }
});

Key Points

• HTTP API:
  • Great for setups that favor simple HTTP requests with minimal dependencies.
  • Directly integrated with Playwright’s request capabilities for efficient response handling.
• JavaScript Library:
  • Provides encapsulated functions with options for logging and error handling.
  • Reduces code repetition by reusing the TOTP generation function from otp-device-sync.

Conclusion

Use the HTTP API for a straightforward approach that leverages Playwright's request methods. Opt for the JavaScript library if you want a more robust setup with reusable functions and enhanced logging. Both methods are suitable for handling 2FA flows within Playwright tests.