feat(repo): Add component visual diffing tests (#6194)

Author: alexcarpenter

.changeset/floppy-taxis-change.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/playwright.config.ts

@@ -16,6 +16,8 @@ const baseURL = `http://localhost:${PORT}`;
  */
 export default defineConfig({
   testDir: './sandbox/integration',
+  /* Global setup for Clerk testing */
+  globalSetup: './sandbox/integration/global.setup.ts',
   /* Run tests in files in parallel */
   fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

packages/clerk-js/sandbox/integration/create-organization.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+import { signInWithEmailCode } from './helpers';
+
+const rootElement = '.cl-createOrganization-root';
+
+test('create organization', async ({ page }) => {
+  await signInWithEmailCode(page);
+  await page.goto('/create-organization');
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('create-organization.png');
+});

packages/clerk-js/sandbox/integration/create-organization.spec.ts-snapshots/create-organization-chromium-darwin.png

@@ -0,0 +1,23 @@
+import { clerkSetup } from '@clerk/testing/playwright';
+
+import { instanceKeys } from '../../../../integration/presets/envs';
+
+/**
+ * Global setup function for Playwright tests in the sandbox environment.
+ * Configures Clerk authentication keys from the sandbox instance and initializes
+ * the Clerk testing environment before running integration tests.
+ *
+ * @throws {Error} When sandbox instance keys are not found
+ */
+async function globalSetup(): Promise<void> {
+  const keys = instanceKeys.get('sandbox');
+
+  if (!keys) throw new Error('Sandbox instance keys not found');
+
+  process.env.CLERK_SECRET_KEY = keys.sk;
+  process.env.CLERK_PUBLISHABLE_KEY = keys.pk;
+
+  await clerkSetup();
+}
+
+export default globalSetup;

packages/clerk-js/sandbox/integration/global.setup.ts

@@ -1,36 +1,21 @@
 import { clerk } from '@clerk/testing/playwright';
-import type { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
-export async function disableColorMix(page: Page) {
-  await page.addInitScript(() => {
-    window.ClerkCSSSupport = {
-      ...window.ClerkCSSSupport,
-      colorMix: false,
-    };
-  });
-}
-
-export async function waitForClerkLoaded(page: Page, selector: string) {
+/**
+ * Signs in a user using email code strategy for integration tests.
+ * Navigates to sign-in page, waits for Clerk to load, then performs authentication.
+ * @param page - The Playwright page instance
+ * @example
+ * ```ts
+ * await signInWithEmailCode(page);
+ * await page.goto('/protected-page');
+ * ```
+ */
+export async function signInWithEmailCode(page: Page): Promise<void> {
+  await page.goto('/sign-in');
   await clerk.loaded({ page });
-  await page.waitForSelector(selector, { state: 'attached' });
-}
-
-type ColorMixRunnerOptions = {
-  path: string;
-  waitForClerkElement: string;
-  fn: (page: Page) => Promise<void>;
-};
-
-export function createColorMixRunner({ path, waitForClerkElement, fn }: ColorMixRunnerOptions) {
-  return async (page: Page) => {
-    await page.goto(path);
-    await waitForClerkLoaded(page, waitForClerkElement);
-    await fn(page);
-
-    await disableColorMix(page);
-
-    await page.reload();
-    await waitForClerkLoaded(page, waitForClerkElement);
-    await fn(page);
-  };
+  await clerk.signIn({
+    page,
+    signInParams: { strategy: 'email_code', identifier: '[email protected]' },
+  });
 }

packages/clerk-js/sandbox/integration/helpers.ts

@@ -0,0 +1,11 @@
+import { clerk } from '@clerk/testing/playwright';
+import { expect, test } from '@playwright/test';
+
+const rootElement = '.cl-oauthConsent-root';
+
+test('oauth consent', async ({ page }) => {
+  await page.goto('/oauth-consent');
+  await clerk.loaded({ page });
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('oauth-consent.png');
+});

packages/clerk-js/sandbox/integration/oauth-consent.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+import { signInWithEmailCode } from './helpers';
+
+const rootElement = '.cl-organizationSwitcher-root';
+const triggerElement = '.cl-organizationSwitcherTrigger';
+const popoverElement = '.cl-organizationSwitcherPopoverCard';
+const actionElement = '.cl-organizationSwitcherPopoverActionButton__createOrganization';
+
+test('organization switcher', async ({ page }) => {
+  await signInWithEmailCode(page);
+  await page.goto('/organization-switcher');
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await page.locator(triggerElement).click();
+  await page.waitForSelector(popoverElement, { state: 'visible' });
+  await expect(page.locator(popoverElement)).toHaveScreenshot('organization-switcher-popover.png');
+  await page.locator(actionElement).hover();
+  await expect(page.locator(popoverElement)).toHaveScreenshot('organization-switcher-action-hover.png');
+});

packages/clerk-js/sandbox/integration/oauth-consent.spec.ts-snapshots/oauth-consent-chromium-darwin.png

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+import { signInWithEmailCode } from './helpers';
+
+const rootElement = '.cl-organizationList-root';
+
+test('organization list', async ({ page }) => {
+  await signInWithEmailCode(page);
+  await page.goto('/organization-list');
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('organization-list.png');
+});

packages/clerk-js/sandbox/integration/org-switcher.spec.ts

@@ -0,0 +1,13 @@
+import { clerk } from '@clerk/testing/playwright';
+import { expect, test } from '@playwright/test';
+
+const rootElement = '.cl-modalBackdrop';
+const buttonElement = 'button:has-text("Open Sign In")';
+
+test('sign in modal', async ({ page }) => {
+  await page.goto('/open-sign-in');
+  await clerk.loaded({ page });
+  await page.locator(buttonElement).click();
+  await page.waitForSelector(rootElement, { state: 'visible' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('sign-in-modal.png');
+});

packages/clerk-js/sandbox/integration/org-switcher.spec.ts-snapshots/organization-switcher-action-hover-chromium-darwin.png

@@ -1,18 +1,20 @@
-import type { Page } from '@playwright/test';
+import { clerk } from '@clerk/testing/playwright';
 import { expect, test } from '@playwright/test';
 
-import { createColorMixRunner } from './helpers';
+const rootElement = '.cl-signIn-root';
+const primaryButtonElement = '.cl-formButtonPrimary';
+const secondaryButtonElement = '.cl-socialButtonsBlockButton__google';
+const actionLinkElement = '.cl-footerActionLink';
 
-const signInRootElement = '.cl-signIn-root';
-
-const runner = createColorMixRunner({
-  path: '/sign-in',
-  waitForClerkElement: signInRootElement,
-  fn: async (page: Page) => {
-    await expect(page.locator(signInRootElement)).toHaveScreenshot('sign-in.png');
-  },
-});
-
-test('sign-in', async ({ page }) => {
-  await runner(page);
+test('sign in', async ({ page }) => {
+  await page.goto('/sign-in');
+  await clerk.loaded({ page });
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('sign-in.png');
+  await page.locator(primaryButtonElement).hover();
+  await expect(page.locator(rootElement)).toHaveScreenshot('sign-in-primary-button-hover.png');
+  await page.locator(secondaryButtonElement).hover();
+  await expect(page.locator(rootElement)).toHaveScreenshot('sign-in-secondary-button-hover.png');
+  await page.locator(actionLinkElement).hover();
+  await expect(page.locator(rootElement)).toHaveScreenshot('sign-in-action-link-hover.png');
 });

packages/clerk-js/sandbox/integration/org-switcher.spec.ts-snapshots/organization-switcher-popover-chromium-darwin.png

@@ -0,0 +1,11 @@
+import { clerk } from '@clerk/testing/playwright';
+import { expect, test } from '@playwright/test';
+
+const rootElement = '.cl-signUp-root';
+
+test('sign up', async ({ page }) => {
+  await page.goto('/sign-up');
+  await clerk.loaded({ page });
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('sign-up.png');
+});

packages/clerk-js/sandbox/integration/organization-list.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+
+import { signInWithEmailCode } from './helpers';
+
+const rootElement = '.cl-userButton-root';
+const triggerElement = '.cl-userButtonTrigger';
+const popoverElement = '.cl-userButtonPopoverCard';
+
+test('user button', async ({ page }) => {
+  await signInWithEmailCode(page);
+  await page.goto('/user-button');
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await page.locator(triggerElement).click();
+  await page.waitForSelector(popoverElement, { state: 'visible' });
+  await expect(page.locator(popoverElement)).toHaveScreenshot('user-button-popover.png');
+});

packages/clerk-js/sandbox/integration/organization-list.spec.ts-snapshots/organization-list-chromium-darwin.png

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+
+import { signInWithEmailCode } from './helpers';
+
+const rootElement = '.cl-userProfile-root';
+
+test('user profile', async ({ page }) => {
+  // Set a larger viewport to capture the full user profile
+  await page.setViewportSize({ width: 1600, height: 900 });
+
+  await signInWithEmailCode(page);
+  await page.goto('/user-profile');
+  await page.waitForSelector(rootElement, { state: 'attached' });
+  await expect(page.locator(rootElement)).toHaveScreenshot('user-profile.png');
+});