tests: update screenshots for CI runs

apps/core/playwright.config.ts

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

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

@@ -3,10 +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 expect(page.getByRole('heading', { name: 'Blog', exact: true })).toBeVisible();
+  await page.getByRole('heading', { name: 'Blog', exact: true }).waitFor();
 
-  await expect(
-    page.getByRole('heading', { name: 'Blog', exact: true }).locator('..'),
-  ).toHaveScreenshot();
+  // Act
+  const blogPostCard = page.getByRole('listitem').filter({ hasText: 'Your first blog post!' });
+
+  // Assert
+  await expect(blogPostCard).toHaveScreenshot();
 });

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

@@ -4,7 +4,8 @@ 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 page.getByLabel('Choose options').waitFor();
+  await page.waitForLoadState('networkidle');
 
   await expect(page.getByLabel('Choose options')).toHaveScreenshot();
 });

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

@@ -3,19 +3,21 @@ import { expect, test } from '@playwright/test';
 const testAccountEmail = process.env.TEST_ACCOUNT_EMAIL || '';
 const testAccountPassword = process.env.TEST_ACCOUNT_PASSWORD || '';
 
-test('Tabs', async ({ page }) => {
+test('tabs', async ({ page }) => {
+  // Arrange
   await page.goto('/');
-
-  await page.getByLabel('Login').click();
-  await expect(page.getByLabel('Email')).toBeVisible();
-
+  await page.getByRole('link', { name: 'Login' }).click();
+  await page.getByRole('heading', { name: 'Log In', level: 2 }).waitFor();
   await page.getByLabel('Email').fill(testAccountEmail);
   await page.getByLabel('Password').fill(testAccountPassword);
   await page.getByRole('button', { name: 'Log in' }).click();
-  await expect(page.getByRole('heading', { name: 'My Account' })).toBeVisible();
+  await page.getByRole('heading', { name: 'My Account', level: 1 }).waitFor();
+  await page.getByRole('link', { name: 'Orders' }).click();
+  await page.getByRole('heading', { name: 'Orders', level: 2 }).waitFor();
 
-  await page.getByRole('link', { name: 'Account settings' }).click();
-  await expect(page.getByLabel('Account Tabs')).toBeVisible();
+  // Act
+  const accountTabs = page.getByRole('tablist', { name: 'Account Tabs' });
 
-  await expect(page.getByLabel('Account Tabs')).toHaveScreenshot();
+  // Assert
+  await expect(accountTabs).toHaveScreenshot();
 });