Designing Resilience for Flaky External API Dependencies in UI Tests

🔥 Design Resilient Playwright Tests Against Flaky External APIs!

Is your UI automation failing intermittently due to unreliable third-party services like identity providers or payment gateways? Stop letting transient API errors break your CI/CD pipelines!

---

📌 Problem Statement
Modern applications rely heavily on external microservices, which can exhibit transient failures like HTTP 503 errors or high latency. Standard Playwright tests often fail immediately upon the first such hiccup, leading to frustrating false negatives and unstable test suites.

❌ Simple try/catch or Playwright's built-in assertion retries don't offer enough control for complex scenarios.
✅ We need a robust, custom retry mechanism with exponential backoff to handle these real-world service instabilities.

💡 Solution & Code Walkthrough
A production-grade solution involves encapsulating the flaky interaction within a reusable retryOperation utility. This function executes an asynchronous action, retrying with an exponentially increasing delay upon failure. This approach prevents overwhelming a recovering service while ensuring test stability.

// utils/retry.ts
/**
 * Executes an async operation with exponential backoff retries.
 * @param operation The async function to execute.
 * @param maxAttempts Max retry attempts (default: 5).
 * @param initialDelayMs Initial delay in ms (default: 1000).
 * @param factor Backoff factor (default: 2 for exponential).
 */
export async function retryOperation<T>(
  operation: () => Promise<T>,
  maxAttempts: number = 5,
  initialDelayMs: number = 1000,
  factor: number = 2
): Promise<T> {
  let attempts = 0;
  let currentDelay = initialDelayMs;

  while (attempts < maxAttempts) {
    try {
      return await operation();
    } catch (error: any) {
      attempts++;
      console.warn(`Attempt ${attempts} failed. Retrying in ${currentDelay}ms...`);
      if (attempts === maxAttempts) {
        console.error(`Operation failed after ${maxAttempts} attempts.`);
        throw error; // Re-throw the final error to fail the test
      }
      await new Promise(resolve => setTimeout(resolve, currentDelay)); // Wait
      currentDelay *= factor; // Exponential backoff
    }
  }
  throw new Error("Retry logic exhausted without success.");
}

Integrating into a Playwright Test:

// tests/flakyApi.spec.ts
import { test, expect } from '@playwright/test';
import { retryOperation } from '../utils/retry'; // Adjust path as needed

test('should complete workflow despite flaky external API', async ({ page }) => {
  await page.goto('https://yourapp.com/payment'); // Your app's URL

  await retryOperation(async () => {
    // 1. Simulate user interaction triggering the flaky API call
    await page.getByRole('button', { name: 'Process Payment' }).click();

    // 2. Crucial: Assert on the final, expected UI state.
    // A failed assertion here will trigger a retry.
    await expect(page.locator('.payment-status')).toHaveText('Payment successful');
  }, 5, 2000, 1.5); // 5 attempts, initial 2s delay, 1.5 backoff factor
});

• This pattern wraps the entire critical user interaction, including its subsequent UI assertion.
• If the assertion fails (due to API instability), retryOperation catches it and retries the whole interaction.

🔑 Key Takeaways
• Resilience First: Build UI tests that can withstand transient external service failures.
• Exponential Backoff: Essential for avoiding resource exhaustion and aiding service recovery.
• Abstraction: Isolate retry logic into reusable utilities for cleaner, more maintainable tests.
• Holistic Retry: Wrap the entire user interaction and its resulting UI state assertion for robustness.

❓ Quick Summary Q&A
Q: Why use exponential backoff instead of fixed delays?
A: It gives recovering services increasing time to stabilize, preventing overload.
Q: Where should the retry logic be placed?
A: In a dedicated utility function (retryOperation), separate from core test steps.

TAGS: playwright, testing, automation, api, resilience, sdet, javascript, typescript, webtesting

────────────────────────────────────────
Level up your engineering skills today!

────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
Practice real-world interview scenarios offline on the free QA Automation & SDET Prep app:

🤖 𝐆𝐨𝐨𝐠𝐥𝐞 𝐏𝐥𝐚𝐲 (𝐀𝐧𝐝𝐫𝐨𝐢𝐝):
https://play.google.com/store/apps/details?id=com.app.seleniuminterviewquestions&referrer=utm_source%3Ddevto%26utm_medium%3Darticle%26utm_campaign%3Dselenium_20260909

🍎 𝐀𝐩𝐩 𝐒𝐭𝐨𝐫𝐞 (𝐢𝐎𝐒):
https://apps.apple.com/app/id6786760948?pt=128640464&ct=devto_selenium_20260909&mt=8

────────────────────────────────────────
────────────────────────────────────────