Playwright e2e passing locally but failing on live

Question

I am facing a weird issue i just wrote this end to end test which is passing locally but failing when it come to deploy.

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

// navigate to the page, before each test
test.beforeEach(async ({ page }) => {
  await page.goto('/home');
});

// screenshot of initial state
test('load page - fetch data', async ({ page }, testInfo) => {
  await expect(page.getByTestId('loading')).toBeDefined();
  await page.waitForSelector('[data-testid="card-thedataloaded"]', { state: 'visible' });
  await snapshot(page, testInfo, 'Home - Basic');
});

I tried different function given by Playwright like toBeDefined() but it works fine on local environment but fails when i tried to deploy it

Answer 1

toBeDefined() in your case is always true, because it ensures that expect(value) is not undefined.

Try to use expect with timeout to check your app's load state. Loading element is unreliable and can be displayed differently locally and remotely.

// screenshot of initial state
test('load page - fetch data', async ({ page }, testInfo) => {
  await expect(page.getByTestId("cardard-thedataloaded")).toBeVisible({ timeout: 15_000 });
  await snapshot(page, testInfo, 'Home - Basic');
});