feat(functional): Add visual regression tests using latest deploys

fix: update workflows yml

.changeset/unlucky-foxes-hug.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Migrate visual regression tests

.github/workflows/playwright-visual-regression.yml

@@ -9,7 +9,7 @@ jobs:
     name: Run Visual Regression Tests
     timeout-minutes: 30
     runs-on: macos-14
-    if: ${{ contains(fromJson('["Production – catalyst-storybook", "Preview – catalyst-storybook"]'), github.event.deployment_status.environment) }}
+    if: ${{ contains(fromJson('["Production – catalyst-latest", "Preview – catalyst-latest"]'), github.event.deployment_status.environment) }}
 
     steps:
       - name: Checkout code
@@ -37,7 +37,7 @@ jobs:
           VERCEL_PROTECTION_BYPASS: ${{ secrets.VERCEL_PROTECTION_BYPASS_STORYBOOK }}
         run: |
           cd apps/core
-          npx playwright test tests/visual-regression/reactant/components/ --project=tests-chromium
+          npx playwright test tests/visual-regression/packages/components/ --project=tests-chromium
 
       - uses: actions/upload-artifact@v4
         if: failure()

apps/core/playwright.config.ts

@@ -6,7 +6,7 @@ config();
 export default defineConfig({
   testDir: './tests',
   expect: {
-    toHaveScreenshot: { maxDiffPixels: 100 },
+    toHaveScreenshot: { maxDiffPixels: 500 },
   },
   fullyParallel: true,
   reporter: 'html',

apps/core/tests/routes.ts

@@ -0,0 +1,13 @@
+export default {
+  SHOP_ALL: '/shop-all',
+  SAMPLE_ABLE_BREWING_SYSTEM: '/sample-able-brewing-system',
+  ORBIT_TERRARIUM_LARGE: '/orbit-terrarium-large',
+  BLOG: '/blog',
+  BATH_LUXURY: '/bath/towels/luxury',
+  QUICK_ADD_77: '/shop-all/?showQuickAdd=77',
+  QUICK_ADD_93: '/?showQuickAdd=93',
+  CONTACT_US: '/contact-us',
+  LOGIN: '/login',
+  FOG_LINEN_CHAMBRAY: '/fog-linen-chambray-towel-beige-stripe/',
+  PARFAIT_JAR: '/1-l-le-parfait-jar',
+};

apps/core/tests/visual-regression/packages/components/accordion.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+const divStateOpen = 'div[data-state="open"]';
+const divStateClosed = 'div[data-state="closed"]';
+
+test('accordion expanded', async ({ page }) => {
+  await page.goto(routes.SHOP_ALL);
+
+  await expect(page.locator(divStateOpen).first()).toHaveScreenshot();
+});
+
+test('accordion closed', async ({ page }) => {
+  await page.goto(routes.SHOP_ALL);
+  await page.getByRole('button', { name: 'Brand' }).click();
+  await page.waitForLoadState('networkidle');
+  await page.locator(divStateClosed).first().waitFor({ state: 'visible' });
+
+  await expect(page.locator(divStateClosed).first()).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/badge.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('badge with icon', async ({ page }) => {
+  await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
+  await expect(
+    page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }),
+  ).toBeVisible();
+  await page.getByRole('button', { name: 'Add to Cart' }).first().click();
+  await page.getByRole('link', { name: 'Cart Items 1' }).click();
+  await expect(page.getByRole('heading', { level: 1, name: 'Your cart' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Cart Items 1' })).toHaveScreenshot();
+
+  await page.getByRole('button', { name: 'Remove item from cart' }).first().click();
+  await expect(page.getByRole('heading', { name: 'Your cart is empty' })).toBeVisible();
+});

apps/core/tests/visual-regression/packages/components/blog-post-card.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('blog post card', async ({ page }) => {
+  await page.goto(routes.BLOG);
+  await expect(page.getByRole('heading', { name: 'Blog', exact: true })).toBeVisible();
+
+  await expect(
+    page.getByRole('heading', { name: 'Blog', exact: true }).locator('..'),
+  ).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/breadcrumbs.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('breadcrumbs', async ({ page }) => {
+  await page.goto(routes.BATH_LUXURY);
+  await expect(page.getByLabel('Breadcrumb')).toBeVisible();
+
+  await expect(page.getByLabel('Breadcrumb')).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/button.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Primary button', async ({ page }) => {
+  await page.goto(routes.ORBIT_TERRARIUM_LARGE);
+  await expect(page.getByRole('button', { name: 'Add to cart' })).toBeVisible();
+
+  await expect(page.getByRole('button', { name: 'Add to cart' })).toHaveScreenshot();
+});
+
+test('Secondary button', async ({ page }) => {
+  await page.goto(routes.SHOP_ALL);
+  await expect(page.getByRole('button', { name: 'Update price' })).toBeVisible();
+
+  await expect(page.getByRole('button', { name: 'Update price' })).toHaveScreenshot();
+});
+
+test('As a child', async ({ page }) => {
+  await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
+  await expect(
+    page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: 'Add to Cart' }).first().click();
+  await page.getByRole('link', { name: 'Cart Items 1' }).click();
+  await expect(page.getByText('Shipping cost')).toBeVisible();
+
+  await expect(page.getByRole('button', { name: 'Add' }).first()).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/carousel.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+
+test('Carousel', async ({ page }) => {
+  await page.goto('/');
+  await page
+    .getByRole('region')
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
+    .getByRole('tablist', { name: 'Slides' })
+    .scrollIntoViewIfNeeded();
+
+  await expect(
+    page
+      .getByRole('region')
+      .filter({ has: page.getByRole('heading', { name: 'Featured products' }) }),
+  ).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/checkbox.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+test.skip('Disabled checkbox', async () => {});
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+test.skip('Disabled checked checkbox', async () => {});
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+test.skip('Checkbox with error variant', async () => {});
+
+test('Checked checkbox with label', async ({ page }) => {
+  await page.goto(routes.SHOP_ALL);
+  await page.getByLabel('Common Good1 products').click();
+
+  await expect(page.getByLabel('Common Good1 products')).toHaveScreenshot();
+});
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+test.skip('Checkbox with custom icon', async () => {});

apps/core/tests/visual-regression/packages/components/counter.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Counter default', async ({ page }) => {
+  await page.goto(routes.QUICK_ADD_77);
+  await expect(page.getByRole('spinbutton', { name: 'Number' })).toBeVisible();
+
+  await expect(page.getByRole('spinbutton', { name: 'Number' })).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/datepicker.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Date picker', async ({ page }) => {
+  await page.goto(routes.QUICK_ADD_77);
+  await expect(page.getByRole('dialog').getByPlaceholder('MM/DD/YYYY')).toBeVisible();
+
+  await expect(page.getByRole('dialog').getByPlaceholder('MM/DD/YYYY')).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/footer.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test('Footer', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('section').filter({ hasText: 'CategoriesShop' })).toBeVisible();
+
+  await expect(page.locator('section').filter({ hasText: 'CategoriesShop' })).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/form.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Form', async ({ page }) => {
+  await page.goto(routes.CONTACT_US);
+  await expect(page.getByRole('heading', { name: 'Contact Us' })).toBeVisible();
+
+  await expect(
+    page.getByRole('heading', { name: 'Contact Us' }).locator('..').locator('..'),
+  ).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/gallery.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Gallery image', async ({ page }) => {
+  await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
+  await expect(page.getByRole('figure').locator('img')).toBeVisible();
+
+  await expect(page.getByRole('figure').locator('img')).toHaveScreenshot();
+});
+
+test('Gallery thumbnail image', async ({ page }) => {
+  await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
+  await expect(page.getByLabel('Thumbnail navigation')).toBeVisible();
+
+  await expect(page.getByLabel('Thumbnail navigation')).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/input.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Input with placeholder', async ({ page }) => {
+  await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
+  await expect(
+    page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }),
+  ).toBeVisible();
+  await page.getByRole('button', { name: 'Add to Cart' }).first().click();
+  await page.getByRole('link', { name: 'Cart Items 1' }).click();
+  await expect(page.getByText('Shipping cost')).toBeVisible();
+  await page.getByRole('button', { name: 'Add' }).first().click();
+  await expect(page.getByLabel('Suburb/city')).toBeVisible();
+
+  await expect(page.getByLabel('Suburb/city')).toHaveScreenshot();
+});
+
+test('Input error state', async ({ page }) => {
+  await page.goto(routes.CONTACT_US);
+  await expect(page.getByRole('button', { name: 'Submit form' })).toBeVisible();
+  await page.getByRole('button', { name: 'Submit form' }).click();
+
+  expect(await page.getByLabel('EmailRequired').screenshot()).toMatchSnapshot();
+});

apps/core/tests/visual-regression/packages/components/label.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Label with input', async ({ page }) => {
+  await page.goto(routes.LOGIN);
+  await expect(page.getByText('Password', { exact: true })).toBeVisible();
+
+  await expect(
+    page.getByText('Password', { exact: true }).locator('..').locator('..'),
+  ).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/navigation-menu.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test('Navigation menu', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('navigation', { name: 'Main' })).toBeVisible();
+
+  await expect(page.getByRole('navigation', { name: 'Main' })).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/picklist.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Pick list', async ({ page }) => {
+  await page.goto(routes.FOG_LINEN_CHAMBRAY);
+  await expect(page.getByLabel('Pick List')).toBeVisible();
+
+  await expect(page.getByLabel('Pick List').locator('..')).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/radio-group.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Default radio group', async ({ page }) => {
+  await page.goto(routes.QUICK_ADD_77);
+  await expect(page.getByRole('radiogroup', { name: 'Radio' })).toBeVisible();
+
+  await expect(page.getByRole('radiogroup', { name: 'Radio' })).toHaveScreenshot();
+});
+
+test('Default radio group selected', async ({ page }) => {
+  await page.goto(routes.QUICK_ADD_77);
+  await expect(page.getByRole('radiogroup', { name: 'Radio' })).toBeVisible();
+  await page.getByLabel('1', { exact: true }).click();
+
+  await expect(page.getByRole('radiogroup', { name: 'Radio' })).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/rating.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Zero star rating', async ({ page }) => {
+  await page.goto(routes.FOG_LINEN_CHAMBRAY);
+  await expect(page.getByRole('paragraph').getByRole('img').first()).toBeVisible();
+
+  await expect(page.getByRole('paragraph').getByRole('img').first()).toHaveScreenshot();
+});
+
+test('Five start rating', async ({ page }) => {
+  await page.goto(routes.PARFAIT_JAR);
+  await expect(page.getByRole('paragraph').getByRole('img').first()).toBeVisible();
+  await expect(page.getByRole('paragraph').getByRole('img').first()).toHaveScreenshot();
+});
+
+test('Floating rating', async ({ page }) => {
+  await page.goto(routes.ORBIT_TERRARIUM_LARGE);
+  await expect(page.getByRole('paragraph').getByRole('img').first()).toBeVisible();
+
+  await expect(page.getByRole('paragraph').getByRole('img').first()).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/rectangle-list.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Rectangle list', async ({ page }) => {
+  await page.goto(routes.PARFAIT_JAR);
+  await expect(page.getByRole('radiogroup', { name: 'Size' })).toBeVisible();
+
+  await expect(page.getByRole('radiogroup', { name: 'Size' })).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/select.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Select default', async ({ page }) => {
+  await page.goto(routes.FOG_LINEN_CHAMBRAY);
+  await expect(page.getByRole('combobox')).toBeVisible();
+
+  await expect(page.getByRole('combobox')).toHaveScreenshot();
+});

apps/core/tests/visual-regression/packages/components/sheet.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('Sheet basic', async ({ page }) => {
+  await page.goto(routes.QUICK_ADD_93);
+  await expect(page.getByLabel('Choose options')).toBeVisible();
+
+  await expect(page.getByLabel('Choose options')).toHaveScreenshot();
+});