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


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';

  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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.