What is the difference between using slow mo and waitForLoadState in Playwright tests?

Answer

Slow mo vs waitForLoadState

Both slow mo and waitForLoadState can help make your @playwright/test tests more reliable, but they serve different purposes.

Slow mo slows down the execution of actions in the browser, which can be helpful for debugging timing issues. To use slow mo, set the slowMo option when launching the browser:

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

test.use({
  browserOptions: {
    slowMo: 100, // Slows down actions by 100ms
  },
});

waitForLoadState waits for a specific state of the page before continuing with the test. This can be useful when interacting with elements that haven't finished loading or rendering. Use waitForLoadState like this:

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

test('Wait for load state example', async ({ page }) => {
  await page.goto('https://ray.run');
  await page.waitForLoadState('domcontentloaded');
  // Continue with test actions
});

Slow mo is better for general timing issues, while waitForLoadState is more suitable for waiting on specific page load states. However, both methods can increase test run time and may not always solve the issues completely. Experiment with both to see which one works best for your particular scenario.