fix: Update tests

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

@@ -37,7 +37,7 @@ jobs:
           VERCEL_PROTECTION_BYPASS: ${{ secrets.VERCEL_PROTECTION_BYPASS_STORYBOOK }}
         run: |
           cd apps/core
-          npx playwright test tests/visual-regression/packages/components/ --project=tests-chromium
+          npx playwright test tests/visual-regression/components/ --project=tests-chromium
 
       - uses: actions/upload-artifact@v4
         if: failure()

apps/core/playwright.config.ts

@@ -5,7 +5,12 @@ config();
 
 export default defineConfig({
   testDir: './tests',
-  fullyParallel: true,
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.02,
+    },
+  },
+  fullyParallel: !!process.env.CI,
   reporter: 'html',
   use: {
     baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,

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

@@ -3,23 +3,29 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('accordion expanded', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SHOP_ALL);
 
+  // Act
   const accordion = page
     .locator('div[data-state="open"]')
     .filter({ has: page.getByRole('button', { name: 'Brand', expanded: true }) });
 
+  // Assert
   await expect(accordion).toHaveScreenshot();
 });
 
 test('accordion closed', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SHOP_ALL);
 
+  // Act
   await page.getByRole('button', { name: 'Brand', expanded: true }).click();
 
   const accordion = page
     .locator('div[data-state="closed"]')
     .filter({ has: page.getByRole('button', { name: 'Brand', expanded: false }) });
 
+  // Assert
   await expect(accordion).toHaveScreenshot();
 });

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

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+
+import routes from '~/tests/routes';
+
+test('badge with icon', async ({ page }) => {
+  // Arrange
+  await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
+  await page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }).waitFor();
+  await page.getByRole('button', { name: 'Add to Cart' }).click();
+
+  // Act
+  const badge = page.getByRole('link', { name: 'Cart Items 1' });
+
+  // Assert
+  await expect(badge).toHaveScreenshot();
+});

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

@@ -3,11 +3,13 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('blog post card', async ({ page }) => {
+  // Arrange
   await page.goto(routes.BLOG);
-
   await page.getByRole('heading', { name: 'Blog', exact: true }).waitFor();
 
+  // Act
   const blogPostCard = page.getByRole('listitem').filter({ hasText: 'Your first blog post!' });
 
+  // Assert
   await expect(blogPostCard).toHaveScreenshot();
 });

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

@@ -3,11 +3,14 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('breadcrumbs', async ({ page }) => {
+  // Arrange
   await page.goto(routes.BATH_LUXURY);
 
+  // Act
   const breadcrumb = page.getByLabel('Breadcrumb');
 
-  await expect(breadcrumb).toBeVisible();
+  await breadcrumb.waitFor();
 
+  // Assert
   await expect(breadcrumb).toHaveScreenshot();
 });

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

@@ -3,28 +3,40 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('Primary button', async ({ page }) => {
+  // Arrange
   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();
+  // Act
+  const button = page.getByRole('button', { name: 'Add to cart' });
+
+  await button.waitFor();
+
+  // Assert
+  await expect(button).toHaveScreenshot();
 });
 
 test('Secondary button', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SHOP_ALL);
-  await expect(page.getByRole('button', { name: 'Update price' })).toBeVisible();
 
-  await expect(page.getByRole('button', { name: 'Update price' })).toHaveScreenshot();
+  const button = page.getByRole('button', { name: 'Update price' });
+
+  await button.waitFor();
+
+  // Assert
+  await expect(button).toHaveScreenshot();
 });
 
 test('As a child', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
-  await expect(
-    page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }),
-  ).toBeVisible();
+  await page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }).waitFor();
 
+  // Act
   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.getByText('Shipping cost').waitFor();
 
+  // Assert
   await expect(page.getByRole('button', { name: 'Add' }).first()).toHaveScreenshot();
 });

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

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

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

@@ -12,10 +12,16 @@ test.skip('Disabled checked checkbox', async () => {});
 test.skip('Checkbox with error variant', async () => {});
 
 test('Checked checkbox with label', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SHOP_ALL);
-  await page.getByLabel('Common Good1 products').click();
 
-  await expect(page.getByLabel('Common Good1 products')).toHaveScreenshot();
+  // Act
+  const checkbox = page.getByLabel('Common Good1 products');
+
+  await checkbox.click();
+
+  // Assert
+  await expect(checkbox).toHaveScreenshot();
 });
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test';
+
+test('Footer', async ({ page }) => {
+  // Arrange
+  await page.goto('/');
+
+  // Act
+  const footer = page.locator('section').filter({ hasText: 'CategoriesShop' });
+
+  await footer.waitFor();
+
+  // Assert
+  await expect(footer).toHaveScreenshot();
+});

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

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

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

@@ -3,15 +3,27 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('Gallery image', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
-  await expect(page.getByRole('figure').locator('img')).toBeVisible();
 
-  await expect(page.getByRole('figure').locator('img')).toHaveScreenshot();
+  // Act
+  const gallery = page.getByRole('figure').locator('img');
+
+  await gallery.waitFor();
+
+  // Assert
+  await expect(gallery).toHaveScreenshot();
 });
 
 test('Gallery thumbnail image', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
-  await expect(page.getByLabel('Thumbnail navigation')).toBeVisible();
 
+  // Act
+  const thumbnail = page.getByLabel('Thumbnail navigation');
+
+  await thumbnail.waitFor();
+
+  // Assert
   await expect(page.getByLabel('Thumbnail navigation')).toHaveScreenshot();
 });

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

@@ -3,23 +3,32 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('Input with placeholder', async ({ page }) => {
+  // Arrange
   await page.goto(routes.SAMPLE_ABLE_BREWING_SYSTEM);
-  await expect(
-    page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }),
-  ).toBeVisible();
+  await page.getByRole('heading', { level: 1, name: '[Sample] Able Brewing System' }).waitFor();
+
+  // Act
   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.getByText('Shipping cost').waitFor();
   await page.getByRole('button', { name: 'Add' }).first().click();
-  await expect(page.getByLabel('Suburb/city')).toBeVisible();
 
-  await expect(page.getByLabel('Suburb/city')).toHaveScreenshot();
+  const input = page.getByLabel('Suburb/city');
+
+  await input.waitFor();
+
+  // Assert
+  await expect(input).toHaveScreenshot();
 });
 
 test('Input error state', async ({ page }) => {
+  // Arrange
   await page.goto(routes.CONTACT_US);
-  await expect(page.getByRole('button', { name: 'Submit form' })).toBeVisible();
+  await page.getByRole('button', { name: 'Submit form' }).waitFor();
+
+  // Act
   await page.getByRole('button', { name: 'Submit form' }).click();
 
-  expect(await page.getByLabel('EmailRequired').screenshot()).toMatchSnapshot();
+  // Assert
+  await expect(page.getByLabel('EmailRequired')).toHaveScreenshot();
 });

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

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

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

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

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

@@ -3,8 +3,14 @@ import { expect, test } from '@playwright/test';
 import routes from '~/tests/routes';
 
 test('Pick list', async ({ page }) => {
+  // Arrange
   await page.goto(routes.FOG_LINEN_CHAMBRAY);
-  await expect(page.getByLabel('Pick List')).toBeVisible();
 
-  await expect(page.getByLabel('Pick List').locator('..')).toHaveScreenshot();
+  // Act
+  const pickList = page.getByLabel('Pick List');
+
+  await pickList.waitFor();
+
+  // Assert
+  await expect(pickList.locator('..')).toHaveScreenshot();
 });