Automate Email Verification in Playwright using Microsoft Graph API & TypeScript

npm install @azure/identity @microsoft/microsoft-graph-client

import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';

export class GraphService {
  private graphClient: Client;

  constructor() {
    const tenantId = process.env.AZURE_TENANT_ID!;
    const clientId = process.env.AZURE_CLIENT_ID!;
    const clientSecret = process.env.AZURE_CLIENT_SECRET!;

    const credential = new ClientSecretCredential(tenantId, clientId, clientSecret);
    const authProvider = new TokenCredentialAuthenticationProvider(credential, {
      scopes: ['[https://graph.microsoft.com/.default](https://graph.microsoft.com/.default)'],
    });

    this.graphClient = Client.initWithMiddleware({ authProvider });
  }

  /**
   * Polls the inbox for an email matching specific subject criteria within a timeout.
   */
  async getLatestEmail(targetEmail: string, subjectContains: string, timeoutMs = 30000): Promise<string> {
    const startTime = Date.now();

    while (Date.now() - startTime < timeoutMs) {
      const response = await this.graphClient
        .api(/users/${targetEmail}/messages)
        .filter(contains(subject, '${subjectContains}'))
        .select('subject,body,receivedDateTime')
        .orderby('receivedDateTime desc')
        .top(1)
        .get();

      if (response.value && response.value.length > 0) {
        return response.value[0].body.content;
      }

      // Wait 3 seconds before polling again
      await new Promise((resolve) => setTimeout(resolve, 3000));
    }

    throw new Error(Email with subject containing "${subjectContains}" was not received within ${timeoutMs}ms.);
  }

  /**
   * Helper to extract links or OTP codes using regular expressions.
   */
  extractPattern(htmlContent: string, pattern: RegExp): string {
    const match = htmlContent.match(pattern);
    if (!match) {
      throw new Error(Pattern ${pattern} not found in the email content.);
    }
    return match[1] || match[0];
  }
}

import { test, expect } from '@playwright/test';
import { GraphService } from './graphService';

test.describe('Registration & Email Verification Flow', () => {
  const graphService = new GraphService();
  const testUserEmail = 'qa-automation@yourdomain.com';

  test('User registers and verifies OTP from email', async ({ page }) => {
    // 1. Trigger signup action in web app
    await page.goto('[https://example.com/register](https://example.com/register)');
    await page.fill('#email', testUserEmail);
    await page.click('#submit-btn');

    // 2. Fetch latest email and extract 6-digit OTP
    const emailBody = await graphService.getLatestEmail(testUserEmail, 'Your Verification Code');
    const otpCode = graphService.extractPattern(emailBody, /\b\d{6}\b/);

    // 3. Complete verification on page
    await page.fill('#otp-input', otpCode);
    await page.click('#verify-btn');

    // 4. Assert successful navigation
    await expect(page.locator('#dashboard')).toBeVisible();
  });
});