What is test.step() in Playwright and why should you use it?

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

test('complete checkout flow', async ({ page }) => {

  await test.step('Navigate to product page', async () => {
    await page.goto('/products/laptop');
    await expect(page.getByRole('heading', { name: 'Laptop Pro' })).toBeVisible();
  });

  await test.step('Add product to cart', async () => {
    await page.getByRole('button', { name: 'Add to Cart' }).click();
    await expect(page.locator('.cart-count')).toHaveText('1');
  });

  await test.step('Proceed to checkout', async () => {
    await page.getByRole('link', { name: 'View Cart' }).click();
    await page.getByRole('button', { name: 'Checkout' }).click();
    await expect(page).toHaveURL('/checkout');
  });

  await test.step('Fill shipping details', async () => {
    await page.getByLabel('Full Name').fill('John Doe');
    await page.getByLabel('Address').fill('123 Main St');
    await page.getByLabel('City').fill('New York');
    await page.getByLabel('Zip Code').fill('10001');
  });

  await test.step('Complete payment', async () => {
    await page.getByRole('button', { name: 'Place Order' }).click();
    await expect(page).toHaveURL('/order-confirmed');
    await expect(page.getByRole('heading')).toContainText('Order Confirmed');
  });
});

✓ complete checkout flow (4.2s)
  ✓ Navigate to product page (0.8s)
  ✓ Add product to cart (0.5s)
  ✓ Proceed to checkout (0.9s)
  ✓ Fill shipping details (1.2s)
  ✗ Complete payment (0.8s) ← Failure shows exactly here

const orderId = await test.step('Place order and get ID', async () => {
  await page.getByRole('button', { name: 'Place Order' }).click();
  const confirmText = await page.locator('.order-id').textContent();
  return confirmText; // Return values work!
});

console.log('Order ID:', orderId);

// pages/CheckoutPage.ts
import { test } from '@playwright/test';

export class CheckoutPage {
  async fillShippingDetails(name: string, address: string) {
    return test.step('Fill shipping details', async () => {
      await this.nameInput.fill(name);
      await this.addressInput.fill(address);
    });
  }
}