screenshot testing

package.json

@@ -31,7 +31,10 @@
     ":generate:theme": "npm-run-all :generate:theme:build :generate:theme:clean",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test:storybook": "npx playwright test --ui"
+    "test:storybook": "npx playwright test",
+    "test:storybook:ui": "npx playwright test --ui",
+    "test:storybook:debug": "npx playwright test --debug",
+    "test:storybook:report": "npx playwright show-report"
   },
   "dependencies": {
     "@babel/core": "^7.23.3",
@@ -175,14 +178,14 @@
     "prop-types": "^15.8.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.5",
+    "sass": "^1.75.0",
     "sass-loader": "^13.3.2",
-    "storybook": "^8.0.8",
+    "storybook": "^8.0.9",
     "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "util": "^0.12.5",
     "uuid": "^9.0.1",
-    "webpack": "^5.89.0",
+    "webpack": "^5.91.0",
     "yargs": "^17.7.2"
   },
   "sideEffects": false

playwright.config.ts

@@ -34,36 +34,37 @@ export default defineConfig({
   expect: {
     toHaveScreenshot: { maxDiffPixels: 100 },
   },
+  timeout: 2 * 60 * 1000,
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    {
-      name: 'Microsoft Edge',
-      use: {
-        channel: 'msedge',
-      },
-    },
-
-    {
-      name: 'Google Chrome',
-      use: {
-        channel: 'chrome',
-      },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+    //
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    //
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
   ],
 
   outputDir: 'test-results/',

src/stories/Table/Table.stories.jsx

@@ -4,11 +4,9 @@ import TableActions from '../../components/Atomic/TableNew/TableActions'
 import Button from '../../components/Atomic/Button'
 import Tag from '../../components/Atomic/Tag'
 import StatusPill from '../../components/Atomic/StatusPill'
-import sample from 'lodash/sample'
 import '../global.css'
 import TableSelectionPanel from '../../components/Atomic/TableNew/TableSelectionPanel/TableSelectionPanel'
 import { IconEdit, IconLink, IconShowPassword, IconTrash } from '../../components/Atomic/Icon'
-import { generate } from 'random-words'
 
 export default {
     title: 'Table/Table',
@@ -91,13 +89,13 @@ const Template = (args) => {
     const data = useMemo(
         () =>
             Array.from(Array(100).keys()).map((item) => ({
-                col1: generate({ exactly: 3 }).join(' '),
+                col1: `row-${item}`,
                 col2: '376ee947-4801-5cfe-3a8f-49103697f7d1',
                 col3: {
-                    state: sample(['online', 'offline']),
+                    state: item % 2 === 0 ? 'online' : 'offline',
                     pending: {
-                        show: sample([0, 0, 0, 1]),
-                        number: Math.floor(Math.random() * 8) + 1,
+                        show: item % 2 === 0,
+                        number: item,
                     },
                 },
                 col4: 'tcp',

tests/components.spec.ts

@@ -1,34 +1,122 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
+
+type ComponentType = {
+    name: string
+    views?: string[]
+    default?: boolean
+}
 
 const components = [
-    { name: 'Alert' },
-    { name: 'CaPool' },
-    { name: 'CodeEditor' },
-    { name: 'Editor' },
-    { name: 'Headline' },
-    { name: 'Link' },
-    { name: 'StatusPill' },
-    { name: 'StatusTag' },
-    { name: 'Swiper' },
-    { name: 'Tabs' },
-    { name: 'Tag' },
-    { name: 'TileExpand' },
-    { name: 'TileToggle' },
-    { name: 'Tooltip' },
-    { name: 'VersionMark' },
+    {
+        group: 'Example',
+        items: [
+            { name: 'Alert' },
+            { name: 'CaPool' },
+            { name: 'CodeEditor' },
+            { name: 'Editor' },
+            { name: 'Headline' },
+            { name: 'Link' },
+            { name: 'StatusPill' },
+            { name: 'StatusTag' },
+            { name: 'Swiper', views: ['feature', 'testimonial'] },
+            { name: 'Tabs' },
+            { name: 'Tag' },
+            { name: 'TileExpand' },
+            { name: 'TileToggle' },
+            { name: 'Tooltip' },
+            { name: 'VersionMark' },
+        ],
+    },
+    {
+        group: 'Assets',
+        items: [{ name: 'CopyIcon' }, { name: 'Icon' }],
+    },
+    {
+        group: 'Form',
+        items: [
+            { name: 'ActionButton', views: ['variants'] },
+            { name: 'Button' },
+            { name: 'Checkbox' },
+            { name: 'ColorPicker' },
+            { name: 'ConfirmButton' },
+            { name: 'Dropzone' },
+            { name: 'FormGroup' },
+            { name: 'FormInput' },
+            { name: 'FormSelect' },
+            { name: 'Radio' },
+            { name: 'SplitButton' },
+            { name: 'Switch' },
+            { name: 'TimeoutControl' },
+        ],
+    },
+    {
+        group: 'Pages',
+        items: [{ name: 'InitializedByDifferentUser' }],
+    },
+    {
+        group: 'Keycloak',
+        items: [
+            { name: 'KeycloakTemplate', views: ['default', 'swiper-testimonials', 'swiper-feature', 'sign-in', 'update-password'] },
+            { name: 'Popup', views: ['default', 'right'] },
+            { name: 'SignInForm', views: ['default', 'social', 'registration-step-1', 'registration-step-2', 'reset-password'] },
+            { name: 'Step' },
+        ],
+    },
+    {
+        group: 'Layout',
+        items: [
+            { name: 'Content', views: ['default', 'headline-status-tag'] },
+            { name: 'ContentMenu' },
+            { name: 'Footer' },
+            { name: 'Header', views: ['default', 'breadcrumb'] },
+            { name: 'Layout' },
+            { name: 'LeftPanel', views: ['default', 'active-item', 'new-feature', 'collapsed'] },
+            { name: 'PageLayout' },
+        ],
+    },
+    {
+        group: 'Loader',
+        items: [{ name: 'IconLoader' }],
+    },
+    {
+        group: 'Modal',
+        items: [{ name: 'AddClientModal' }, { name: 'DeleteModal' }, { name: 'ProvisionDeviceModal' }, { name: 'ShareDeviceModal' }],
+    },
+    {
+        group: 'Notification',
+        items: [{ name: 'Notification' }, { name: 'NotificationCenter' }, { name: 'NotificationMessage' }],
+    },
+    {
+        group: 'Table',
+        items: [{ name: 'SimpleStripTable' }, { name: 'Table' }, { name: 'TreeTable' }],
+    },
 ]
 
-components.forEach((component) => {
-    test(`${component.name}`, async ({ page }) => {
-        await page.goto(`http://localhost:6006/?path=/story/example-${component.name.toLowerCase()}--default`)
+const testMethod = async (page: Page, group: string, name: string, view: string) => {
+    await page.goto(`http://localhost:6006/?path=/story/${group}-${name.toLowerCase()}--${view}`)
+
+    await page.waitForSelector('#preview-loader', { state: 'detached', timeout: 90000 })
+
+    await page.click("button[aria-label='Shortcuts']")
+    await page.click('a#list-item-F')
+
+    // secure interval for animations
+    await page.waitForTimeout(5000)
+    await page.locator('#storybook-preview-iframe').focus()
 
-        await page.click("button[aria-label='Shortcuts']")
-        await page.click('a#list-item-F')
+    await expect(page).toHaveScreenshot({ fullPage: true, omitBackground: true })
+}
 
-        // secure interval for animations
-        await page.waitForTimeout(5000)
-        await page.locator('#storybook-preview-iframe').focus()
+components.forEach((group) => {
+    test.describe(group.group, () => {
+        group.items.forEach((component) => {
+            const views = component.views || ['default']
 
-        await expect(page).toHaveScreenshot({ fullPage: true, omitBackground: true })
+            views.forEach((view) => {
+                test(`${component.name} | ${view}`, async ({ page }) => {
+                    await testMethod(page, group.group, component.name, view)
+                })
+            })
+        })
     })
 })

tests/global-setup.ts

@@ -7,6 +7,8 @@ async function globalSetup() {
     const response = await page.request.get('http://localhost:6006/')
     await expect(response).toBeOK()
 
+    await page.waitForSelector('#preview-loader', { state: 'detached' })
+
     await page.context().storageState({ path: 'storageState.json' })
     await browser.close()
 }