Use Playwright with Storybook for component tests in fast-foundation

[radium-v]

Pull Request

📖 Description

Converts the test suite in fast-foundation from Karma to Playwright.

🎫 Issues

Resolves #5805

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

• [ ] I have included a change request file using $ yarn change
• [x] I have added tests for my changes.
• [x] I have tested my changes.
• [ ] I have updated the project documentation to reflect my changes.
• [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• [ ] I have added a new component
• [x] I have modified an existing component
• [ ] I have updated the definition file
• [ ] I have updated the configuration file

⏭ Next Steps

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

📊 Tachometer Benchmark Results

Summary

clickTrigger10x

• repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20: unsure 🔍 -2% - +4% (-3.54ms - +6.46ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-basic-splice-loopCount=1000&itemCount=1000&deleteCount=10&addCount=10: unsure 🔍 -2% - +1% (-3.07ms - +2.21ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-push-itemCount=100&addCount=20: unsure 🔍 -1% - +0% (-1.62ms - +0.77ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-push-loopCount=200&itemCount=200: unsure 🔍 -0% - +1% (-4.55ms - +64.96ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-reverse-itemCount=100: unsure 🔍 -1% - +1% (-3.46ms - +3.22ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-reverse-loopCount=200&itemCount=200: unsure 🔍 -1% - +2% (-64.33ms - +84.47ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-shift-itemCount=100: unsure 🔍 -0% - +1% (-0.37ms - +2.23ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-shift-loopCount=200&itemCount=200: unsure 🔍 -0% - +1% (-9.97ms - +41.00ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-unshift-itemCount=100&addCount=20: unsure 🔍 -2% - +0% (-6.37ms - +0.79ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-unshift-loopCount=200&itemCount=200&addCount=1: unsure 🔍 -0% - +3% (-8.26ms - +107.62ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}

create10k

• render-create10k: unsure 🔍 -1% - +2% (-3.11ms - +5.39ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}

createDelete5x

• render-createDelete5x: unsure 🔍 -1% - +1% (-3.56ms - +2.40ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}

runFile1k

• observable-runFile1k: slower ❌ 0% - 32% (0.09ms - 2.48ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}

update10th

• render-update10th: unsure 🔍 -3% - +1% (-4.95ms - +2.32ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}

usedJSHeapSize

• observable-runFile1k: faster ✔ 0% - 1% (0.02ms - 0.65ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• render-create10k: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• render-createDelete5x: unsure 🔍 -0% - +0% (-0.06ms - +0.03ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• render-update10th: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20: unsure 🔍 -0% - +0% (-0.05ms - +0.02ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-basic-splice-loopCount=1000&itemCount=1000&deleteCount=10&addCount=10: unsure 🔍 -0% - +0% (-0.02ms - +0.02ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-push-itemCount=100&addCount=20: unsure 🔍 -0% - +0% (-0.06ms - +0.04ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-push-loopCount=200&itemCount=200: unsure 🔍 -0% - +0% (-0.04ms - +0.02ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-reverse-itemCount=100: unsure 🔍 -0% - +0% (-0.12ms - +0.11ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-reverse-loopCount=200&itemCount=200: unsure 🔍 -0% - +0% (-0.03ms - +0.01ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-shift-itemCount=100: unsure 🔍 -0% - +0% (-0.04ms - +0.07ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-shift-loopCount=200&itemCount=200: unsure 🔍 -0% - +0% (-0.02ms - +0.02ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-unshift-itemCount=100&addCount=20: unsure 🔍 -0% - +0% (-0.05ms - +0.08ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}
• repeat-nested-unshift-loopCount=200&itemCount=200&addCount=1: unsure 🔍 -0% - +0% (-0.02ms - +0.01ms)
  ^{users/jokreitl/foundation-playwright vs master Customize summary}

Results

observable-runFile1k

• Browser: chrome-headless 105.0.5195.102
• Sample size: 90
• Built by: Validate Benchmarks #236

• Commit: 4036381

runFile1k

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	7.30ms - 8.88ms	-	faster ✔ 2% - 26% 0.09ms - 2.48ms
users/jokreitl/foundation-playwright	8.48ms - 10.28ms	slower ❌ 0% - 32% 0.09ms - 2.48ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	48.80ms - 49.21ms	-	slower ❌ 0% - 1% 0.02ms - 0.65ms
users/jokreitl/foundation-playwright	48.43ms - 48.91ms	faster ✔ 0% - 1% 0.02ms - 0.65ms	-

render-create10k

• Browser: chrome-headless 105.0.5195.102
• Sample size: 100
• Built by: Validate Benchmarks #236

• Commit: 4036381

create10k

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	240.86ms - 246.92ms	-	unsure 🔍 -2% - +1% -5.39ms - +3.11ms
users/jokreitl/foundation-playwright	242.05ms - 248.01ms	unsure 🔍 -1% - +2% -3.11ms - +5.39ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	47.25ms - 47.26ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.00ms
users/jokreitl/foundation-playwright	47.26ms - 47.27ms	unsure 🔍 -0% - +0% -0.00ms - +0.01ms	-

render-createDelete5x

• Browser: chrome-headless 105.0.5195.102
• Sample size: 100
• Built by: Validate Benchmarks #236

• Commit: 4036381

createDelete5x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	311.44ms - 315.41ms	-	unsure 🔍 -1% - +1% -2.40ms - +3.56ms
users/jokreitl/foundation-playwright	310.61ms - 315.07ms	unsure 🔍 -1% - +1% -3.56ms - +2.40ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	54.53ms - 54.59ms	-	unsure 🔍 -0% - +0% -0.03ms - +0.06ms
users/jokreitl/foundation-playwright	54.52ms - 54.58ms	unsure 🔍 -0% - +0% -0.06ms - +0.03ms	-

render-update10th

• Browser: chrome-headless 105.0.5195.102
• Sample size: 100
• Built by: Validate Benchmarks #236

• Commit: 4036381

update10th

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	190.84ms - 196.14ms	-	unsure 🔍 -1% - +3% -2.32ms - +4.95ms
users/jokreitl/foundation-playwright	189.68ms - 194.66ms	unsure 🔍 -3% - +1% -4.95ms - +2.32ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	47.26ms - 47.27ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.01ms
users/jokreitl/foundation-playwright	47.26ms - 47.28ms	unsure 🔍 -0% - +0% -0.01ms - +0.01ms	-

repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20

• Browser: chrome-headless 105.0.5195.102
• Sample size: 100
• Built by: Validate Benchmarks #236

• Commit: 4036381

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	146.67ms - 154.43ms	-	unsure 🔍 -4% - +2% -6.46ms - +3.54ms
users/jokreitl/foundation-playwright	148.86ms - 155.16ms	unsure 🔍 -2% - +4% -3.54ms - +6.46ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	46.37ms - 46.44ms	-	unsure 🔍 -0% - +0% -0.02ms - +0.05ms
users/jokreitl/foundation-playwright	46.38ms - 46.40ms	unsure 🔍 -0% - +0% -0.05ms - +0.02ms	-

repeat-basic-splice-loopCount=1000&itemCount=1000&deleteCount=10&addCount=10

• Browser: chrome-headless 104.0.5112.101
• Sample size: 100
• Built by: Validate Benchmarks #212

• Commit: 2a1ff4f

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	188.69ms - 192.59ms	-	unsure 🔍 -1% - +2% -2.21ms - +3.07ms
users/jokreitl/foundation-playwright	188.44ms - 191.99ms	unsure 🔍 -2% - +1% -3.07ms - +2.21ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	53.45ms - 53.48ms	-	unsure 🔍 -0% - +0% -0.02ms - +0.02ms
users/jokreitl/foundation-playwright	53.45ms - 53.48ms	unsure 🔍 -0% - +0% -0.02ms - +0.02ms	-

repeat-nested-push-itemCount=100&addCount=20

• Browser: chrome-headless 105.0.5195.102
• Sample size: 90
• Built by: Validate Benchmarks #236

• Commit: 4036381

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	240.38ms - 242.49ms	-	unsure 🔍 -0% - +1% -0.77ms - +1.62ms
users/jokreitl/foundation-playwright	240.46ms - 241.56ms	unsure 🔍 -1% - +0% -1.62ms - +0.77ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	51.82ms - 51.89ms	-	unsure 🔍 -0% - +0% -0.04ms - +0.06ms
users/jokreitl/foundation-playwright	51.81ms - 51.89ms	unsure 🔍 -0% - +0% -0.06ms - +0.04ms	-

repeat-nested-push-loopCount=200&itemCount=200

• Browser: chrome-headless 104.0.5112.101
• Sample size: 60
• Built by: Validate Benchmarks #212

• Commit: 2a1ff4f

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	6274.15ms - 6319.99ms	-	unsure 🔍 -1% - +0% -64.96ms - +4.55ms
users/jokreitl/foundation-playwright	6301.14ms - 6353.40ms	unsure 🔍 -0% - +1% -4.55ms - +64.96ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	91.53ms - 91.58ms	-	unsure 🔍 -0% - +0% -0.02ms - +0.04ms
users/jokreitl/foundation-playwright	91.53ms - 91.56ms	unsure 🔍 -0% - +0% -0.04ms - +0.02ms	-

repeat-nested-reverse-itemCount=100

• Browser: chrome-headless 105.0.5195.102
• Sample size: 80
• Built by: Validate Benchmarks #236

• Commit: 4036381

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	380.59ms - 385.44ms	-	unsure 🔍 -1% - +1% -3.22ms - +3.46ms
users/jokreitl/foundation-playwright	380.59ms - 385.19ms	unsure 🔍 -1% - +1% -3.46ms - +3.22ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	58.57ms - 58.74ms	-	unsure 🔍 -0% - +0% -0.11ms - +0.12ms
users/jokreitl/foundation-playwright	58.58ms - 58.73ms	unsure 🔍 -0% - +0% -0.12ms - +0.11ms	-

repeat-nested-reverse-loopCount=200&itemCount=200

• Browser: chrome-headless 104.0.5112.101
• Sample size: 60
• Built by: Validate Benchmarks #212

• Commit: 2a1ff4f

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	5328.17ms - 5431.25ms	-	unsure 🔍 -2% - +1% -84.47ms - +64.33ms
users/jokreitl/foundation-playwright	5336.13ms - 5443.44ms	unsure 🔍 -1% - +2% -64.33ms - +84.47ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	131.00ms - 131.03ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.03ms
users/jokreitl/foundation-playwright	130.99ms - 131.01ms	unsure 🔍 -0% - +0% -0.03ms - +0.01ms	-

repeat-nested-shift-itemCount=100

• Browser: chrome-headless 105.0.5195.102
• Sample size: 90
• Built by: Validate Benchmarks #236

• Commit: 4036381

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	217.41ms - 218.96ms	-	unsure 🔍 -1% - +0% -2.23ms - +0.37ms
users/jokreitl/foundation-playwright	218.07ms - 220.16ms	unsure 🔍 -0% - +1% -0.37ms - +2.23ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	51.81ms - 51.88ms	-	unsure 🔍 -0% - +0% -0.07ms - +0.04ms
users/jokreitl/foundation-playwright	51.83ms - 51.91ms	unsure 🔍 -0% - +0% -0.04ms - +0.07ms	-

repeat-nested-shift-loopCount=200&itemCount=200

• Browser: chrome-headless 104.0.5112.101
• Sample size: 60
• Built by: Validate Benchmarks #212

• Commit: 2a1ff4f

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	6142.81ms - 6179.13ms	-	unsure 🔍 -1% - +0% -41.00ms - +9.97ms
users/jokreitl/foundation-playwright	6158.61ms - 6194.37ms	unsure 🔍 -0% - +1% -9.97ms - +41.00ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	90.94ms - 90.97ms	-	unsure 🔍 -0% - +0% -0.02ms - +0.02ms
users/jokreitl/foundation-playwright	90.94ms - 90.97ms	unsure 🔍 -0% - +0% -0.02ms - +0.02ms	-

repeat-nested-unshift-itemCount=100&addCount=20

• Browser: chrome-headless 105.0.5195.102
• Sample size: 80
• Built by: Validate Benchmarks #236

• Commit: 4036381

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	296.00ms - 301.32ms	-	unsure 🔍 -0% - +2% -0.79ms - +6.37ms
users/jokreitl/foundation-playwright	293.47ms - 298.26ms	unsure 🔍 -2% - +0% -6.37ms - +0.79ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	51.73ms - 51.82ms	-	unsure 🔍 -0% - +0% -0.08ms - +0.05ms
users/jokreitl/foundation-playwright	51.75ms - 51.84ms	unsure 🔍 -0% - +0% -0.05ms - +0.08ms	-

repeat-nested-unshift-loopCount=200&itemCount=200&addCount=1

• Browser: chrome-headless 104.0.5112.101
• Sample size: 60
• Built by: Validate Benchmarks #212

• Commit: 2a1ff4f

clickTrigger10x

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	3724.43ms - 3787.89ms	-	unsure 🔍 -3% - +0% -107.62ms - +8.26ms
users/jokreitl/foundation-playwright	3757.37ms - 3854.32ms	unsure 🔍 -0% - +3% -8.26ms - +107.62ms	-

usedJSHeapSize

Version	Avg time	vs master	vs users/jokreitl/foundation-playwright
master	91.47ms - 91.48ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.02ms
users/jokreitl/foundation-playwright	91.45ms - 91.48ms	unsure 🔍 -0% - +0% -0.02ms - +0.01ms	-

_{tachometer-reporter-action v2 for Validate Benchmarks}

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-6189.centralus.azurestaticapps.net