Screencast API in Playwright 1.59

1.ts

// playwright.config.ts
export default defineConfig({
  use: {
    video: {
      mode: 'on',
      show: {
        actions: { position: 'top-left' },
        test: { position: 'top-right' },
      },
    },
  },
});

testcase.ts

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

test.beforeEach(async ({ page }) => {
  // Start recording a screencast of the test execution
  await page.screencast.start({ path: 'video.webm' });
  await page.screencast.showActions({ position: 'top' });
  await page.screencast.showOverlay('<div style="color: red">Demo Recording</div>');

  await page.goto('https://seleniumbase.io/coffee/');
});

test.afterEach(async ({ page }) => {
  // Stop recording the screencast after the test execution
  await page.screencast.stop();
});

const showChapter = async ({ page }: { page: any }, chapter: string, desc: string) => {
  await page.screencast.showChapter(chapter, {
    description: desc,
    duration: 1000,
  });
}


test('test', async ({ page }) => {
  await showChapter({ page }, 'Select items', 'Selecting items to add to cart');
  await page.locator('[data-test="Espresso"]').click();
  await page.locator('[data-test="Americano"]').click();
  await expect(page.getByLabel('Cart page')).toContainText('cart (2)');

  await showChapter({ page }, 'Checkout', 'Proceeding to checkout and filling out payment details');
  await page.getByRole('link', { name: 'Cart page' }).click();
  await expect(page.locator('[data-test="checkout"]')).toContainText('Total: $17.00');
  await page.locator('div').filter({ hasText: /^Americano$/ }).click();
  await expect(page.locator('#app')).toContainText('Americano');
  await expect(page.locator('#app')).toContainText('Espresso');

  await showChapter({ page }, 'Payment details', 'Filling out payment details on the checkout page');
  await page.locator('[data-test="checkout"]').click();
  await expect(page.getByRole('heading')).toContainText('Payment details');
  await expect(page.getByRole('textbox', { name: 'Name' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Email' })).toBeVisible();
  await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();

  await showChapter({ page }, 'Fill out form', 'Filling out the payment form with user details');
  await page.getByRole('textbox', { name: 'Name' }).click();
  await page.getByRole('textbox', { name: 'Name' }).fill('somkiat');
  await page.getByRole('textbox', { name: 'Email' }).click();
  await page.getByRole('textbox', { name: 'Email' }).fill('wrong email');
});