refactor(test): extract dialog page objects from inline getByRole usage#10822
refactor(test): extract dialog page objects from inline getByRole usage#10822dante01yoon wants to merge 2 commits intomainfrom
Conversation
Extract ConfirmDialog from ComfyPage.ts into its own component file and
add MediaLightbox and TemplatesDialog page objects. Refactor tests to use
these page objects instead of inline getByRole('dialog') calls.
🎨 Storybook: ✅ Built — View Storybook |
📝 WalkthroughWalkthroughExtracts inline dialog lookups into three Playwright page-object classes (ConfirmDialog, MediaLightbox, TemplatesDialog), imports and instantiates them on ComfyPage, and updates tests to use these page-object properties instead of direct Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 6 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright: ✅ 899 passed, 0 failed · 9 flaky📊 Browser Reports
|
📦 Bundle: 5.11 MB gzip 🟢 -44 BDetailsSummary
Category Glance App Entry Points — 22.3 kB (baseline 22.3 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.2 MB (baseline 1.2 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 76.6 kB (baseline 76.6 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed / 2 unchanged Panels & Settings — 484 kB (baseline 484 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 10 added / 10 removed / 12 unchanged User & Accounts — 17.1 kB (baseline 17.1 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 5 added / 5 removed / 2 unchanged Editors & Dialogs — 109 kB (baseline 109 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 60.3 kB (baseline 60.3 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed / 8 unchanged Data & Services — 2.97 MB (baseline 2.97 MB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 13 added / 13 removed / 4 unchanged Utilities & Hooks — 338 kB (baseline 338 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 13 added / 13 removed / 13 unchanged Vendor & Third-Party — 9.8 MB (baseline 9.8 MB) • ⚪ 0 BExternal libraries and shared vendor chunks Status: 16 unchanged Other — 8.44 MB (baseline 8.44 MB) • ⚪ 0 BBundles that do not match a named category
Status: 55 added / 55 removed / 79 unchanged ⚡ Performance Report
All metrics
Historical variance (last 15 runs)
Trend (last 15 commits on main)
Raw data{
"timestamp": "2026-04-02T11:39:21.339Z",
"gitSha": "e052622ded5cd22cd7f6aa619b45db8552e9f6eb",
"branch": "refactor/dialog-page-objects-v2",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2015.1619999999753,
"styleRecalcs": 8,
"styleRecalcDurationMs": 9.312000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 441.423,
"heapDeltaBytes": 20004700,
"heapUsedBytes": 62635272,
"domNodes": 16,
"jsHeapTotalBytes": 23068672,
"scriptDurationMs": 24.674000000000003,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "canvas-idle",
"durationMs": 2029.404999999997,
"styleRecalcs": 11,
"styleRecalcDurationMs": 11.522,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 407.381,
"heapDeltaBytes": 20154104,
"heapUsedBytes": 63160248,
"domNodes": 22,
"jsHeapTotalBytes": 23068672,
"scriptDurationMs": 24.232,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-idle",
"durationMs": 2046.1039999999002,
"styleRecalcs": 13,
"styleRecalcDurationMs": 13.621,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 505.01399999999995,
"heapDeltaBytes": 21087180,
"heapUsedBytes": 64872324,
"domNodes": 25,
"jsHeapTotalBytes": 22806528,
"scriptDurationMs": 35.921,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1954.2980000000512,
"styleRecalcs": 78,
"styleRecalcDurationMs": 48.259,
"layouts": 12,
"layoutDurationMs": 4.41,
"taskDurationMs": 876.169,
"heapDeltaBytes": 16277772,
"heapUsedBytes": 60377412,
"domNodes": 64,
"jsHeapTotalBytes": 23855104,
"scriptDurationMs": 148.68,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1865.8179999999902,
"styleRecalcs": 74,
"styleRecalcDurationMs": 37.584999999999994,
"layouts": 12,
"layoutDurationMs": 3.439,
"taskDurationMs": 806.43,
"heapDeltaBytes": 16224392,
"heapUsedBytes": 59063740,
"domNodes": 57,
"jsHeapTotalBytes": 23330816,
"scriptDurationMs": 143.296,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1896.4489999999614,
"styleRecalcs": 77,
"styleRecalcDurationMs": 43.666,
"layouts": 12,
"layoutDurationMs": 3.7960000000000003,
"taskDurationMs": 855.8370000000001,
"heapDeltaBytes": 16255124,
"heapUsedBytes": 58824172,
"domNodes": 60,
"jsHeapTotalBytes": 23592960,
"scriptDurationMs": 147.377,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000012,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1726.1219999999753,
"styleRecalcs": 31,
"styleRecalcDurationMs": 17.96,
"layouts": 6,
"layoutDurationMs": 0.6050000000000001,
"taskDurationMs": 307.161,
"heapDeltaBytes": 24711352,
"heapUsedBytes": 68443636,
"domNodes": 78,
"jsHeapTotalBytes": 20185088,
"scriptDurationMs": 25.231,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1751.677000000086,
"styleRecalcs": 31,
"styleRecalcDurationMs": 23.916,
"layouts": 6,
"layoutDurationMs": 0.8180000000000002,
"taskDurationMs": 430.92299999999994,
"heapDeltaBytes": 19464588,
"heapUsedBytes": 66031152,
"domNodes": 80,
"jsHeapTotalBytes": 22282240,
"scriptDurationMs": 60.12200000000001,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000012,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1726.8699999999626,
"styleRecalcs": 30,
"styleRecalcDurationMs": 19.538,
"layouts": 6,
"layoutDurationMs": 0.7439999999999999,
"taskDurationMs": 385.108,
"heapDeltaBytes": 24707452,
"heapUsedBytes": 67476656,
"domNodes": 77,
"jsHeapTotalBytes": 20185088,
"scriptDurationMs": 36.82299999999999,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "dom-widget-clipping",
"durationMs": 613.002999999992,
"styleRecalcs": 10,
"styleRecalcDurationMs": 14.859000000000004,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 356.02099999999996,
"heapDeltaBytes": 6186388,
"heapUsedBytes": 49401852,
"domNodes": 16,
"jsHeapTotalBytes": 13369344,
"scriptDurationMs": 61.744,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.663333333333338,
"p95FrameDurationMs": 16.700000000000273
},
{
"name": "dom-widget-clipping",
"durationMs": 613.7560000000235,
"styleRecalcs": 12,
"styleRecalcDurationMs": 9.56,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 377.884,
"heapDeltaBytes": 6556404,
"heapUsedBytes": 49450872,
"domNodes": 20,
"jsHeapTotalBytes": 13631488,
"scriptDurationMs": 72.132,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.799999999999727
},
{
"name": "dom-widget-clipping",
"durationMs": 607.9509999999573,
"styleRecalcs": 13,
"styleRecalcDurationMs": 9.843000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 396.9239999999999,
"heapDeltaBytes": 6832196,
"heapUsedBytes": 49621060,
"domNodes": 22,
"jsHeapTotalBytes": 12845056,
"scriptDurationMs": 72.50300000000001,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-idle",
"durationMs": 2025.1900000000091,
"styleRecalcs": 10,
"styleRecalcDurationMs": 10.629,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 617.6460000000001,
"heapDeltaBytes": 14971484,
"heapUsedBytes": 66896940,
"domNodes": -257,
"jsHeapTotalBytes": 15716352,
"scriptDurationMs": 112.58800000000001,
"eventListeners": -129,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-idle",
"durationMs": 2031.7059999999856,
"styleRecalcs": 12,
"styleRecalcDurationMs": 13.058999999999997,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 629.1469999999999,
"heapDeltaBytes": 4517872,
"heapUsedBytes": 55588716,
"domNodes": -255,
"jsHeapTotalBytes": 16707584,
"scriptDurationMs": 116.70099999999998,
"eventListeners": -127,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-idle",
"durationMs": 2038.7829999999667,
"styleRecalcs": 9,
"styleRecalcDurationMs": 10.167000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 734.634,
"heapDeltaBytes": 17259888,
"heapUsedBytes": 70062100,
"domNodes": -261,
"jsHeapTotalBytes": 15454208,
"scriptDurationMs": 126.20499999999998,
"eventListeners": -129,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-pan",
"durationMs": 2119.798000000003,
"styleRecalcs": 67,
"styleRecalcDurationMs": 15.061000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1124.952,
"heapDeltaBytes": -15471488,
"heapUsedBytes": 47837372,
"domNodes": -265,
"jsHeapTotalBytes": 16822272,
"scriptDurationMs": 397.403,
"eventListeners": -129,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-pan",
"durationMs": 2191.1739999999895,
"styleRecalcs": 68,
"styleRecalcDurationMs": 15.955,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1242.953,
"heapDeltaBytes": 19248752,
"heapUsedBytes": 72791532,
"domNodes": -265,
"jsHeapTotalBytes": 18747392,
"scriptDurationMs": 444.096,
"eventListeners": -127,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-pan",
"durationMs": 2218.32100000006,
"styleRecalcs": 68,
"styleRecalcDurationMs": 16.340000000000003,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1328.451,
"heapDeltaBytes": 19480360,
"heapUsedBytes": 73097212,
"domNodes": -264,
"jsHeapTotalBytes": 17960960,
"scriptDurationMs": 443.801,
"eventListeners": -125,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-zoom",
"durationMs": 3232.1260000000507,
"styleRecalcs": 66,
"styleRecalcDurationMs": 17.624000000000002,
"layouts": 60,
"layoutDurationMs": 7.631,
"taskDurationMs": 1408.204,
"heapDeltaBytes": 6540996,
"heapUsedBytes": 61589000,
"domNodes": -266,
"jsHeapTotalBytes": 15921152,
"scriptDurationMs": 513.496,
"eventListeners": -123,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "large-graph-zoom",
"durationMs": 3147.4019999999996,
"styleRecalcs": 64,
"styleRecalcDurationMs": 16.333000000000006,
"layouts": 60,
"layoutDurationMs": 7.509999999999999,
"taskDurationMs": 1433.3519999999999,
"heapDeltaBytes": 9281768,
"heapUsedBytes": 64553656,
"domNodes": -268,
"jsHeapTotalBytes": 16183296,
"scriptDurationMs": 525.413,
"eventListeners": -123,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-zoom",
"durationMs": 3177.9750000000604,
"styleRecalcs": 65,
"styleRecalcDurationMs": 17.322,
"layouts": 60,
"layoutDurationMs": 8.088,
"taskDurationMs": 1468.257,
"heapDeltaBytes": 9513908,
"heapUsedBytes": 64458436,
"domNodes": -266,
"jsHeapTotalBytes": 16183296,
"scriptDurationMs": 530.528,
"eventListeners": -123,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "minimap-idle",
"durationMs": 2049.289999999985,
"styleRecalcs": 7,
"styleRecalcDurationMs": 7.682999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 558.703,
"heapDeltaBytes": 787156,
"heapUsedBytes": 54691360,
"domNodes": -264,
"jsHeapTotalBytes": 15134720,
"scriptDurationMs": 97.84,
"eventListeners": -127,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "minimap-idle",
"durationMs": 2044.8169999999664,
"styleRecalcs": 11,
"styleRecalcDurationMs": 11.901000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 628.6290000000001,
"heapDeltaBytes": 4061136,
"heapUsedBytes": 56627112,
"domNodes": -259,
"jsHeapTotalBytes": 16183296,
"scriptDurationMs": 117.15800000000002,
"eventListeners": -127,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "minimap-idle",
"durationMs": 2021.7549999999846,
"styleRecalcs": 9,
"styleRecalcDurationMs": 11.007000000000003,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 728.7669999999999,
"heapDeltaBytes": 2738372,
"heapUsedBytes": 56524216,
"domNodes": -261,
"jsHeapTotalBytes": 16969728,
"scriptDurationMs": 121.907,
"eventListeners": -127,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 554.6180000000049,
"styleRecalcs": 48,
"styleRecalcDurationMs": 12.676000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 363.121,
"heapDeltaBytes": 6860356,
"heapUsedBytes": 50951480,
"domNodes": 22,
"jsHeapTotalBytes": 12582912,
"scriptDurationMs": 125.967,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000273
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 623.4139999999115,
"styleRecalcs": 48,
"styleRecalcDurationMs": 13.777000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 398.787,
"heapDeltaBytes": 6265164,
"heapUsedBytes": 49369528,
"domNodes": 22,
"jsHeapTotalBytes": 13631488,
"scriptDurationMs": 130.123,
"eventListeners": 12,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000273
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 614.2869999999903,
"styleRecalcs": 48,
"styleRecalcDurationMs": 19.056000000000004,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 395.54,
"heapDeltaBytes": 6767784,
"heapUsedBytes": 49602912,
"domNodes": 22,
"jsHeapTotalBytes": 12582912,
"scriptDurationMs": 135.252,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.663333333333338,
"p95FrameDurationMs": 16.700000000000273
},
{
"name": "subgraph-idle",
"durationMs": 2021.74100000002,
"styleRecalcs": 10,
"styleRecalcDurationMs": 12.205999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 380.15,
"heapDeltaBytes": 19980744,
"heapUsedBytes": 63011684,
"domNodes": 20,
"jsHeapTotalBytes": 23068672,
"scriptDurationMs": 22.01600000000001,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-idle",
"durationMs": 2037.0360000000005,
"styleRecalcs": 11,
"styleRecalcDurationMs": 11.850000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 444.511,
"heapDeltaBytes": 19978552,
"heapUsedBytes": 62755412,
"domNodes": 22,
"jsHeapTotalBytes": 22544384,
"scriptDurationMs": 27.592,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-idle",
"durationMs": 2028.2720000000154,
"styleRecalcs": 10,
"styleRecalcDurationMs": 10.716999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 467.2390000000001,
"heapDeltaBytes": 20173088,
"heapUsedBytes": 63272444,
"domNodes": 20,
"jsHeapTotalBytes": 22544384,
"scriptDurationMs": 27.482,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1991.6650000000118,
"styleRecalcs": 84,
"styleRecalcDurationMs": 49.626000000000005,
"layouts": 16,
"layoutDurationMs": 5.585,
"taskDurationMs": 955.0999999999999,
"heapDeltaBytes": 11844948,
"heapUsedBytes": 54930584,
"domNodes": 72,
"jsHeapTotalBytes": 23330816,
"scriptDurationMs": 109.815,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1701.64299999999,
"styleRecalcs": 76,
"styleRecalcDurationMs": 41.553000000000004,
"layouts": 16,
"layoutDurationMs": 4.965,
"taskDurationMs": 774.966,
"heapDeltaBytes": 11480204,
"heapUsedBytes": 54670680,
"domNodes": 63,
"jsHeapTotalBytes": 23068672,
"scriptDurationMs": 108.41699999999999,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1992.843999999991,
"styleRecalcs": 85,
"styleRecalcDurationMs": 50.937,
"layouts": 16,
"layoutDurationMs": 4.71,
"taskDurationMs": 993.2359999999999,
"heapDeltaBytes": 11814596,
"heapUsedBytes": 55791072,
"domNodes": 73,
"jsHeapTotalBytes": 23330816,
"scriptDurationMs": 114.11200000000001,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "viewport-pan-sweep",
"durationMs": 8176.815999999973,
"styleRecalcs": 251,
"styleRecalcDurationMs": 46.38399999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 3884.043,
"heapDeltaBytes": 25057304,
"heapUsedBytes": 75925928,
"domNodes": -255,
"jsHeapTotalBytes": 20582400,
"scriptDurationMs": 1280.3300000000002,
"eventListeners": -105,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "viewport-pan-sweep",
"durationMs": 8224.625000000004,
"styleRecalcs": 251,
"styleRecalcDurationMs": 46.663999999999994,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 4168.101,
"heapDeltaBytes": 25804096,
"heapUsedBytes": 78546856,
"domNodes": -258,
"jsHeapTotalBytes": 19009536,
"scriptDurationMs": 1365.312,
"eventListeners": -111,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "viewport-pan-sweep",
"durationMs": 8348.848999999973,
"styleRecalcs": 251,
"styleRecalcDurationMs": 49.491,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 4773.224,
"heapDeltaBytes": 6479324,
"heapUsedBytes": 57735348,
"domNodes": -259,
"jsHeapTotalBytes": 23785472,
"scriptDurationMs": 1666.557,
"eventListeners": -109,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "vue-large-graph-idle",
"durationMs": 12801.202000000047,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12787.054000000002,
"heapDeltaBytes": -30070184,
"heapUsedBytes": 166594944,
"domNodes": -8331,
"jsHeapTotalBytes": 28139520,
"scriptDurationMs": 633.714,
"eventListeners": -16466,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.223333333333358,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "vue-large-graph-idle",
"durationMs": 12932.884000000058,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12901.401,
"heapDeltaBytes": -13281700,
"heapUsedBytes": 180032544,
"domNodes": -8331,
"jsHeapTotalBytes": 26566656,
"scriptDurationMs": 655.1,
"eventListeners": -16462,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.219999999999953,
"p95FrameDurationMs": 16.80000000000291
},
{
"name": "vue-large-graph-idle",
"durationMs": 13482.649999999921,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 13459.941999999997,
"heapDeltaBytes": -32596416,
"heapUsedBytes": 164966068,
"domNodes": -8331,
"jsHeapTotalBytes": 26304512,
"scriptDurationMs": 699.141,
"eventListeners": -16462,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.223333333333237,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "vue-large-graph-pan",
"durationMs": 14696.647999999983,
"styleRecalcs": 70,
"styleRecalcDurationMs": 15.305000000000014,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 14664.085,
"heapDeltaBytes": -22474740,
"heapUsedBytes": 171429872,
"domNodes": -8331,
"jsHeapTotalBytes": 25432064,
"scriptDurationMs": 891.719,
"eventListeners": -16458,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.223333333333358,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 14987.88300000001,
"styleRecalcs": 72,
"styleRecalcDurationMs": 16.937000000000037,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 14963.335000000001,
"heapDeltaBytes": -20613652,
"heapUsedBytes": 173880116,
"domNodes": -8331,
"jsHeapTotalBytes": 25694208,
"scriptDurationMs": 946.45,
"eventListeners": -16460,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.780000000000047,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 15076.621000000046,
"styleRecalcs": 72,
"styleRecalcDurationMs": 15.67400000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 15053.448999999999,
"heapDeltaBytes": -35024960,
"heapUsedBytes": 160430744,
"domNodes": -8331,
"jsHeapTotalBytes": -4714496,
"scriptDurationMs": 932.1800000000001,
"eventListeners": -16456,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.779999999999927,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "workflow-execution",
"durationMs": 470.99900000000616,
"styleRecalcs": 21,
"styleRecalcDurationMs": 27.002,
"layouts": 4,
"layoutDurationMs": 1.568,
"taskDurationMs": 132.36,
"heapDeltaBytes": 4748316,
"heapUsedBytes": 49950220,
"domNodes": 190,
"jsHeapTotalBytes": 262144,
"scriptDurationMs": 28.499000000000002,
"eventListeners": 71,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "workflow-execution",
"durationMs": 460.5189999999766,
"styleRecalcs": 20,
"styleRecalcDurationMs": 29.663,
"layouts": 6,
"layoutDurationMs": 2.2239999999999993,
"taskDurationMs": 143.499,
"heapDeltaBytes": 4572812,
"heapUsedBytes": 49885792,
"domNodes": 158,
"jsHeapTotalBytes": 0,
"scriptDurationMs": 34.137,
"eventListeners": 71,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.663333333333338,
"p95FrameDurationMs": 16.799999999999727
},
{
"name": "workflow-execution",
"durationMs": 458.0119999999397,
"styleRecalcs": 17,
"styleRecalcDurationMs": 25.269,
"layouts": 5,
"layoutDurationMs": 1.4489999999999998,
"taskDurationMs": 140.031,
"heapDeltaBytes": 4516876,
"heapUsedBytes": 48432100,
"domNodes": 156,
"jsHeapTotalBytes": 0,
"scriptDurationMs": 36.945,
"eventListeners": 71,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000273
}
]
} |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
browser_tests/tests/workflowPersistence.spec.ts (1)
384-386: Consider updating the first test for consistency.The test "Closing an inactive tab with save" (lines 384-386) still uses raw button locators:
const saveButton = comfyPage.page.getByRole('button', { name: 'Save' }) await saveButton.waitFor({ state: 'visible' }) await saveButton.click()For consistency with the updated test below, consider refactoring to use
comfyPage.confirmDialog.click('save').♻️ Suggested refactor for consistency
- // Click "Save" in the dirty close dialog - const saveButton = comfyPage.page.getByRole('button', { name: 'Save' }) - await saveButton.waitFor({ state: 'visible' }) - await saveButton.click() - await comfyPage.workflow.waitForWorkflowIdle() - await comfyPage.nextFrame() + // Click "Save" in the dirty close dialog + await comfyPage.confirmDialog.click('save')🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@browser_tests/tests/workflowPersistence.spec.ts` around lines 384 - 386, The test "Closing an inactive tab with save" uses a raw Playwright locator (comfyPage.page.getByRole(...)) instead of the shared confirm dialog helper; replace the three lines that create/wait/click saveButton with a call to the confirm dialog helper (comfyPage.confirmDialog.click('save')) so the test uses the same abstraction as the other test; locate the code referencing comfyPage.page.getByRole('button', { name: 'Save' }) and swap it to call comfyPage.confirmDialog.click('save'), removing the explicit wait/click since the helper handles visibility and interaction.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@browser_tests/tests/workflowPersistence.spec.ts`:
- Around line 384-386: The test "Closing an inactive tab with save" uses a raw
Playwright locator (comfyPage.page.getByRole(...)) instead of the shared confirm
dialog helper; replace the three lines that create/wait/click saveButton with a
call to the confirm dialog helper (comfyPage.confirmDialog.click('save')) so the
test uses the same abstraction as the other test; locate the code referencing
comfyPage.page.getByRole('button', { name: 'Save' }) and swap it to call
comfyPage.confirmDialog.click('save'), removing the explicit wait/click since
the helper handles visibility and interaction.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 92d38f4f-f43b-480f-8a08-228d44607a6e
📒 Files selected for processing (8)
browser_tests/fixtures/ComfyPage.tsbrowser_tests/fixtures/components/ConfirmDialog.tsbrowser_tests/fixtures/components/MediaLightbox.tsbrowser_tests/fixtures/components/TemplatesDialog.tsbrowser_tests/tests/confirmDialogTextWrap.spec.tsbrowser_tests/tests/resultGallery.spec.tsbrowser_tests/tests/templates.spec.tsbrowser_tests/tests/workflowPersistence.spec.ts
The .p-dialog-mask wait timed out when clicking Save triggers a second dialog (save-as filename). Use root.waitFor(hidden) with catch instead — non-fatal if another dialog replaces it.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
browser_tests/fixtures/components/ConfirmDialog.ts (1)
26-27: Restrictclickto actionable buttons only.
KeysOfType<ConfirmDialog, Locator>also includesroot, soclick('root')is currently valid and can cause unintended behavior. Narrow this to explicit action keys.As per coding guidelines: "Whenever new code is written, ask if there's a simpler way to introduce the same functionality; choose the simpler course" and "Minimize the surface area (exported values) of each module and composable".Proposed refactor
-type KeysOfType<T, Match> = { - [K in keyof T]: T[K] extends Match ? K : never -}[keyof T] +type ConfirmDialogAction = 'delete' | 'overwrite' | 'reject' | 'confirm' | 'save' @@ - async click(locator: KeysOfType<ConfirmDialog, Locator>) { - const loc = this[locator] + async click(action: ConfirmDialogAction) { + const loc = this[action]🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@browser_tests/fixtures/components/ConfirmDialog.ts` around lines 26 - 27, The click method on ConfirmDialog currently types its locator as KeysOfType<ConfirmDialog, Locator>, which includes non-actionable keys like root; narrow the type to only the actionable button keys (e.g., explicitly union the action keys such as 'confirm' | 'cancel' | 'secondary' that correspond to Locator properties) and update the click signature (method click(locator: 'confirm' | 'cancel' | ...)) so callers cannot pass 'root'; additionally, add a runtime guard that throws if an invalid key is passed and update any tests/usages to use the explicit action key names.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@browser_tests/fixtures/components/ConfirmDialog.ts`:
- Around line 26-27: The click method on ConfirmDialog currently types its
locator as KeysOfType<ConfirmDialog, Locator>, which includes non-actionable
keys like root; narrow the type to only the actionable button keys (e.g.,
explicitly union the action keys such as 'confirm' | 'cancel' | 'secondary' that
correspond to Locator properties) and update the click signature (method
click(locator: 'confirm' | 'cancel' | ...)) so callers cannot pass 'root';
additionally, add a runtime guard that throws if an invalid key is passed and
update any tests/usages to use the explicit action key names.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 55780840-36cb-46b7-91de-89c919c673e5
📒 Files selected for processing (1)
browser_tests/fixtures/components/ConfirmDialog.ts
Summary
Extract inline
getByRole('dialog')calls across E2E tests into reusable page objects.Changes
ConfirmDialogclass fromComfyPage.tsintobrowser_tests/fixtures/components/ConfirmDialog.tswith newsavebutton locator. AddMediaLightboxandTemplatesDialogpage objects. Refactor 4 test files to use these page objects instead of raw dialog locators.appModeDropdownClipping.spec.tsusesgetByRole('dialog')for a PrimeVue Popover (not a true dialog), left as-is.Review Focus
The
ConfirmDialog.click()method now supports asaveaction used byworkflowPersistence.spec.ts, which also waits for the dialog mask to disappear and workflow service to settle.Fixes #10723
┆Issue is synchronized with this Notion page by Unito