playwright-reporter-demo/product-detail.spec.ts at main · checkly/playwright-reporter-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { test, expect } from '@playwright/test';

test.describe('Product Detail @monitor', () => {
  const BASE = process.env.ENVIRONMENT_URL || '';
  test.beforeEach(async ({ request }) => {
    // Clear cart to avoid stale badge counts from parallel tests
    await request.delete(`${BASE}/api/cart`);
  });
  test('clicking a record card opens the detail modal', async ({ page }) => {
    await page.goto(`${BASE}/`);
    await expect(page.getByTestId('record-card').first()).toBeVisible();

    await page.getByTestId('record-card').first().click();

    const modal = page.getByTestId('record-modal');
    await expect(modal).toBeVisible();
    await expect(page.getByTestId('modal-title')).not.toBeEmpty();
  });

  test('modal displays all record details', async ({ page }) => {
    await page.goto(`${BASE}/`);
    await expect(page.getByTestId('record-card').first()).toBeVisible();

    await page.getByTestId('record-card').first().click();

    await expect(page.getByTestId('modal-title')).not.toBeEmpty();
    await expect(page.getByTestId('modal-artist')).not.toBeEmpty();
    await expect(page.getByTestId('modal-genre')).not.toBeEmpty();
    await expect(page.getByTestId('modal-description')).not.toBeEmpty();
    await expect(page.getByTestId('modal-price')).toContainText('$');
    await expect(page.getByTestId('modal-year')).not.toBeEmpty();
    await expect(page.getByTestId('modal-rating')).toContainText('★');
    await expect(page.getByTestId('modal-stock')).toContainText('stock');
  });

  test('close button dismisses the modal', async ({ page }) => {
    await page.goto(`${BASE}/`);
    await expect(page.getByTestId('record-card').first()).toBeVisible();

    await page.getByTestId('record-card').first().click();
    await expect(page.getByTestId('record-modal')).toBeVisible();

    await page.getByTestId('modal-close').click();
    await expect(page.getByTestId('record-modal')).not.toBeVisible();
  });

  test('clicking outside the modal dismisses it', async ({ page }) => {
    await page.goto(`${BASE}/`);
    await expect(page.getByTestId('record-card').first()).toBeVisible();

    await page.getByTestId('record-card').first().click();
    await expect(page.getByTestId('record-modal')).toBeVisible();

    await page.getByTestId('record-modal').click({ position: { x: 10, y: 10 } });
    await expect(page.getByTestId('record-modal')).not.toBeVisible();
  });

  test('add to cart from modal updates the cart badge', async ({ page }) => {
    await page.goto(`${BASE}/`);
    await expect(page.getByTestId('record-card').first()).toBeVisible();

    await page.getByTestId('record-card').first().click();
    await page.getByTestId('modal-add-to-cart').click();

    const badge = page.getByTestId('cart-badge');
    await expect(badge).toBeVisible();
    await expect(badge).toContainText('1');
  });
});