
I first got to know NotebookLM from a YouTuber I follow, who recommended this amazing tool for analyzing financial reports of public companies. As an investor in the stock market, I was intrigued, but as a software developer, I got even more excited. I immediately started thinking about how I could apply and leverage this to my own work. Could it help me manage documentation, understand complex PRDs or requirements, design a TLD, HLD or even brainstorm new features? The answer is yes.

So basically, for those who are not familiar with NotebookLM, it is a personal research assistant that can go through vast amounts of documentation (docs, links, videos, etc.), generate summaries, and even help you brainstorm. It’s an incredibly powerful tool for software developers looking to boost their effectiveness.

#### Things you can do with NotebookLM:

**Learn a New Codebase:**
When you join a new large project, the first few weeks could be blur of documentation and code. Instead of spending days manually reading through hundreds of files, you can upload key modules, architecture diagrams, and design documents to NotebookLM.

Then, you can ask NotebookLM to "Summarize the core functionality of the OrderProcessing module." (which is of course an example module).
You can also solve questions with it by simply prompting "Explain why the UserAuthentication service interacts with the Database layer in this specific way."

**Streamlining Project Planning and Requirements:**
Project specifications, user stories, and technical requirements can be a mess sometimes. I'm sure most of you are familiar with how much its easy to give up on tools like Confluence for example, which can become a hell of outdated documents and projects. Therefore, you can upload all related documents for a new feature; PRDs, the technical design doc, and the user stories.

Then you can consolidating information. I ask it to "List all the user-facing requirements for the new dashboard" or "What are the key dependencies for implementing Feature X?"

You can also leverage it for test cases ideas based on user stories.

![NotebookLM Mind Map](https://res.cloudinary.com/dtt2usukl/image/upload/v1756379322/NotebookLM-Mind-Map-Apollo_y7mqps.webp)_NotebookLM Mind Map_

**Learning Assistant:**
Learning new languages, frameworks, and tools is a constant part of a developer's life. I've started using NotebookLM as my personalized study guide. I upload tutorials, documentation, and best-practice guides from the web and usually generate it as a "podcast" which I find much more efficient to learn something new.

You can ask it to explain concepts, comparison of different technologies or frameworks, and some other specific questions.

By grounding its responses in my chosen learning materials, NotebookLM becomes a highly effective tutor tailored specifically to my needs.

![NotebookLM](https://res.cloudinary.com/dtt2usukl/image/upload/v1756379148/Screenshot_2025-08-28_at_14.04.51_iyzlov.png)_Summarizing an article to a short podcast_

---

I encourage you to give it a try and let me know what you think!


Summarize articles, reports, create mind maps, brainstorm features & generate test cases ideas based on your data using NotebookLM.

Get Smarter With NotebookLM


If performance and SEO is a fundamental aspect of your website, you should be monitoring it. Playwright & Lighthouse integration is an excellent way to start.

This setup allows you to run performance audits as part of your regular test suite, catching performance regressions before they reach production.

### Why Combine Playwright with Lighthouse?

Lighthouse is Google's open-source tool for improving web page quality. It audits performance, accessibility, SEO, and best practices. However, running Lighthouse manually or through basic CI scripts doesn't integrate well with your existing test infrastructure. Playwright, on the other hand, is excellent for browser automation but doesn't have built-in performance auditing capabilities. By combining them, you get:

- Automated performance regression testing
- Integration with your existing Playwright test suite
- Consistent browser environments across tests
- Detailed performance metrics and reports
- CI/CD pipeline integration

### Setting Up the Integration

Let's start by installing the required dependencies. You'll need Playwright and the `playwright-lighthouse` integration library:

```bash
npm install --save-dev @playwright/test playwright playwright-lighthouse get-port
```

The `get-port` package is crucial for managing ports dynamically, ensuring tests don't conflict with each other.

### Creating the Lighthouse Test Fixture

The key to this integration is setting up a proper Playwright fixture that manages the Chrome debugging port. Here's an example setup:

```typescript
// tests/performance/lighthouse.ts
import { chromium, Browser } from 'playwright'
import { test as base } from '@playwright/test'

const getPortPromise = import('get-port')

type LighthouseFixtures = {
  port: number
  browser: Browser
}

export const lighthouseTest = base.extend<{}, LighthouseFixtures>({
  port: [
    async ({}, use) => {
      const { default: getPort } = await getPortPromise
      const port = await getPort()
      await use(port)
    },
    { scope: 'worker' },
  ],

  browser: [
    async ({ port }, use) => {
      const browser = await chromium.launch({
        args: [`--remote-debugging-port=${port}`],
      })
      await use(browser)
    },
    { scope: 'worker' },
  ],
})

export const test = lighthouseTest
```

**What's happening here?**

1. **Dynamic Port Allocation**: `get-port` ensures each test worker gets a unique debugging port, preventing conflicts in parallel execution
2. **Worker Scope**: Both fixtures use `worker` scope, meaning they're shared across tests in the same worker process
3. **Chrome Remote Debugging**: The browser launches with `--remote-debugging-port`, which Lighthouse needs to connect and run audits

### Now for the actual tests measurement

Now let's create actual performance tests. The beauty of this approach is that you can test multiple pages with different performance thresholds:

```typescript
// tests/performance/lighthouse.spec.ts
import { test } from './lighthouse'

const thresholds = {
  accessibility: 90,
  'best-practices': 90,
  seo: 90,
}

const urlsToTest = [
  { name: 'Homepage', uri: '/' },
  { name: 'About Page', uri: '/about' },
  { name: 'Blogs Page', uri: '/blogs' },
]

test.describe('Lighthouse Audits', () => {
  for (const pageInfo of urlsToTest) {
    test(`Check Lighthouse scores for ${pageInfo.name}`, async ({
      page,
      port,
    }) => {
      await page.goto(`http://someurl.com`)
      const { playAudit } = await import('playwright-lighthouse')
      await playAudit({
        page,
        port,
        thresholds,
      })
    })
  }
})
```

Few things to note here - You do have a clear method for flexible thresholds, then you can set different performance standards for different pages, which can be crucial for dynamic websites which various different pages and content.
Also, in this way you can easily add new pages.

When you run these tests, Lighthouse evaluates several key areas which you should be familiar with:

### Performance Metrics

- **First Contentful Paint (FCP)**: When the first text/image appears
- **Largest Contentful Paint (LCP)**: When the main content is likely loaded
- **Speed Index**: How quickly content is visually displayed
- **Cumulative Layout Shift (CLS)**: Visual stability measure

### Other Audits

- **Accessibility**: Screen reader compatibility, color contrast, ARIA labels
- **Best Practices**: HTTPS usage, console errors, deprecated APIs
- **SEO**: Meta tags, structured data, "crawlability"

### Advanced Configuration Options

You can customize the Lighthouse configuration for more specific testing needs:

```typescript
const advancedThresholds = {
  performance: 85,
  accessibility: 95,
  'best-practices': 90,
  seo: 90,
  pwa: 80,
}

const lighthouseConfig = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
    skipAudits: ['uses-http2'], // Skip specific audits if needed
  },
}

// In your test
await playAudit({
  page,
  port,
  thresholds: advancedThresholds,
  config: lighthouseConfig,
  reports: {
    formats: {
      html: true,
      json: true,
    },
    name: `lighthouse-report-${pageInfo.name}`,
    directory: './lighthouse-reports',
  },
})
```

### Integration with Playwright Config

Your `playwright.config.ts` should include a dedicated performance testing project:

```typescript
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './tests',
  projects: [
    // ... other projects
    {
      name: 'Performance',
      fullyParallel: true,
      testDir: './tests/performance',
      use: {
        headless: true, // Performance tests should run headless
      },
    },
  ],
})
```

### Running the Tests

Execute your performance tests with a dedicated npm script:

```json
{
  "scripts": {
    "test:performance": "npx playwright test --project=Performance"
  }
}
```

Before running the tests, make sure your development server is running:

```bash
# Terminal 1: Start your app
npm run dev

# Terminal 2: Run performance tests
npm run test:performance
```

### CI/CD Integration

For continuous integration, you'll want to build and serve your application statically. Here we're using a simple GitHub Actions workflow to run the tests.

```yaml
# .github/workflows/performance.yml
name: Performance Tests

on: [push, pull_request]

jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build application
        run: npm run build

      - name: Start server and run tests
        run: |
          npm start &
          npx wait-on http://localhost:3000
          npm run test:performance
```

### Best Practices and Tips

#### 1. Set Realistic Thresholds

Don't start with perfect scores (100/100). Begin with current performance levels and gradually improve:

```typescript
const realisticThresholds = {
  performance: 70, // Start here, aim for 90+
  accessibility: 85, // Should be high from the start
  'best-practices': 80,
  seo: 75,
}
```

#### 2. Test Multiple Device Types

Lighthouse can simulate different devices:

```typescript
await playAudit({
  page,
  port,
  thresholds,
  config: {
    extends: 'lighthouse:default',
    settings: {
      emulatedFormFactor: 'mobile',
      throttling: {
        rttMs: 150,
        throughputKbps: 1600,
        cpuSlowdownMultiplier: 4,
      },
    },
  },
})
```

#### 3. Handle Dynamic Content

For pages with dynamic content, ensure they're fully loaded before auditing:

```typescript
test('Performance test with dynamic content', async ({ page, port }) => {
  await page.goto('http://localhost:3000/dashboard')

  // Wait for dynamic content to load
  await page.waitForSelector('[data-testid="dashboard-content"]')
  await page.waitForLoadState('networkidle')

  const { playAudit } = await import('playwright-lighthouse')
  await playAudit({ page, port, thresholds })
})
```

#### 4. Monitor Performance Over Time

Store results and track performance trends:

```typescript
const results = await playAudit({
  page,
  port,
  thresholds: {}, // Don't fail on thresholds, just collect data
  reports: {
    formats: { json: true },
    directory: './performance-history',
  },
})

// Store results in your preferred monitoring system
await storePerformanceMetrics(results, pageInfo.name)
```

### Troubleshooting Common Issues

#### Port Conflicts

If you encounter port conflicts, ensure you're using `get-port` correctly and that tests aren't running in shared browser contexts.

#### Timeout Errors

Increase Playwright's timeout for performance tests:

```typescript
test.setTimeout(60000) // 60 seconds for performance tests
```

#### Inconsistent Results

Performance can vary between runs. Consider:

- Running tests multiple times and averaging results
- Using consistent hardware in CI
- Disabling CPU throttling for development testing

---

That's it. Would love to hear your thoughts and feedback.


Integrate Lighthouse performance audits into your Playwright test suite for automated performance monitoring and regression testing.

Measure Website Performance with Playwright & Lighthouse


You've built a high-performance Python application using asyncio, but you've noticed a bottleneck. The culprit? Your logging. This is a common issue as logging seems to be a a trivial operation, but it can be a significant performance killer.

By default, Python's logging module uses blocking handlers, which means your application pauses every time it writes a log message.
Before we delve right in, it's important to say that in most cases, synchronous logging is perfectly fine. It's simple, reliable, and the default behavior. It works well for applications that aren't I/O-bound or where logging operations are infrequent.

But if you're building a high-performance I/O-bound application, you'll want to consider asynchronous logging. This article will walk you through why traditional logging can slow down your code and how to implement a simple yet effective asynchronous logging solution using Python's standard library.

Why do we even need to care about async logging? Here's a simple example:

```python
import logging
import time

logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')

def process_data(item):
    """Simulates a blocking data processing task."""
    logging.info(f"Starting to process item: {item}")
    time.sleep(0.1)  # Simulates work
    logging.info(f"Finished processing item: {item}")

if __name__ == "__main__":
    data_items = range(5)
    for item in data_items:
        process_data(item)

    logging.info("All data processed.")
```

When you move into a high-concurrency environment, this approach falls apart.

With the Async logging approach, instead of writing directly to a file or a remote service, log messages are placed in a queue and processed in a separate thread. This allows your primary application code to continue executing without waiting for the I/O to complete.

Imagine a web server handling thousands of concurrent requests. If each request logs synchronously, the application spends valuable time waiting for log files to be written. This increases latency and drastically reduces the number of requests it can handle per second. Asynchronous logging solves this by offloading the logging work to a background thread.

The good part, is you don't need a third-party library to achieve this. Python's standard library provides the `logging.handlers.QueueHandler` and `logging.handlers.QueueListener` for this exact purpose.

First, create a Queue, then use QueueHandler.
By using these, you'll create a thread-safe queue that will hold the log messages, then, the your main application logger will use the QueueHandler to put log records into the queue. This is a non-blocking operation, so your app remains fast.

Lastly, use QueueListener. It runs in a separate thread. It reads messages from the queue and passes them to a "worker handler" (e.g., a FileHandler) that performs the actual, slow I/O operation.

Here's another code example:

```python
import logging
from logging.handlers import QueueHandler, QueueListener
from queue import Queue
import threading
import time
import asyncio

# 1. Setup a queue for logging
log_queue = Queue(-1)

# 2. Setup the worker handler that will actually write the logs
worker_handler = logging.FileHandler("async_app.log")
worker_handler.setFormatter(logging.Formatter('%(asctime)s - %(message)s'))

# 3. Setup the listener in a separate thread
listener = QueueListener(log_queue, worker_handler)
listener.start()

# 4. Setup the main application logger to use the QueueHandler
async_handler = QueueHandler(log_queue)
logger = logging.getLogger('my_async_app')
logger.addHandler(async_handler)
logger.setLevel(logging.INFO)

async def handle_request(request_id):
    """Simulates a fast, asynchronous request handler."""
    logger.info(f"Async: Starting request {request_id}")
    await asyncio.sleep(0.01)  # Simulate non-blocking work
    logger.info(f"Async: Finishing request {request_id}")

async def main():
    """Simulates a high-concurrency environment."""
    tasks = [handle_request(i) for i in range(10)]
    await asyncio.gather(*tasks)

if __name__ == "__main__":
    start_time = time.time()
    asyncio.run(main())
    end_time = time.time()
    logger.info(f"Total time elapsed: {end_time - start_time:.4f} seconds")

    # It's important to stop the listener gracefully
    listener.stop()
```

Happy logging!


Focusing on high performance I/O bound Python Applications? Do not forget Asynchronous logging to prevent bottlenecks in your app.

Python Async Logging


Couple of months ago at work, we thought about a testing solution for handling the testability of our common react components being used in many different applications. While it might be trivial these days achieving it with Storybook (using vitest or even playwright ct library), working with legacy Storybook v7, I found out that it might require some tweaking. The annoying part was actually getting it working both in Storybook's interactions tab (which is a storybook addon) and in the CLI as in almost any common test runner.

When you're stuck on Storybook v7 (often due to enterprise constraints), setting up automated interaction testing becomes a bit more complex than the modern v8+ experience. Some of the challenges I faced were limited tooling compatibility, some extra configurations, error messages and debugging, and more.

The goal was simple: execute the interaction tests defined in `play` functions directly from the CLI or from Storybook's UI.

## The Component Context: Complex Interactions Need Complex Testing

To understand why this testing setup was so crucial, let me briefly introduce the component that drove this need. A Suggestion component which is a common component in many applications, and has a lot of different states and interactions.

- **Multi-step user flows** (type → filter → select → validate)
- **Keyboard navigation** through options with proper focus management
- **Dynamic option management** (add, edit, delete suggestions in real-time)
- **Complex validation states** with async feedback
- **Multiple selection modes** with chip management
- **Loading states** during async operations

Before finding the solution, I tried several approaches that are commonly recommended but fail with v7:

### Attempt 1: @storybook/addon-vitest

```bash
npm install @storybook/addon-vitest
```

I cannot emphasize on how vitest is a quality of life game changer in terms of performance, therefore it was my first choice, but this addon is designed for Storybook v8+ and caused immediate startup crashes. Sadly the addon expects internal APIs that don't exist in v7's architecture.

### Attempt 2: Newer @storybook/test-runner Versions

```bash
npm install @storybook/test-runner@latest
```

Runtime errors and compatibility issues. The newer versions expect v8 features and fail with cryptic Playwright errors (which is its dependency).

---

After extensive trial and error, I found the sweet spot: **@storybook/test-runner version 0.13.0**. This specific version is the last one with solid Storybook v7 compatibility.

### Complete Installation Steps

1. **Install the test runner and dependencies**:

```bash
yarn add -D @storybook/test-runner@0.13.0
yarn add -D @storybook/addon-interactions@^7.6.0
yarn add -D @storybook/jest@^0.2.0
yarn add -D @storybook/testing-library@^0.2.0
```

2. **Add the script to package.json**:

```json
{
  "scripts": {
    "test:component": "test-storybook"
  }
}
```

3. **Eject the configuration** (critical step):

```bash
yarn test:component --eject
```

### Why This Version Matters

Version 0.13.0 is crucial because:

- **Last v7-compatible release** before the v8 transition
- **Stable Playwright integration** without modern API dependencies
- **Proven Jest configuration** that works with v7's architecture
- **Mature error handling** for complex interaction scenarios
- **No dependency on internal v8 APIs** that don't exist in v7

Because the default configuration doesn't work out of the box, you must eject and customize:

This creates the essential `test-runner-jest.config.js`:

```javascript
const { getJestConfig } = require('@storybook/test-runner')

/**
 * @type {import('@jest/types').Config.InitialOptions}
 */
module.exports = {
  // The default configuration comes from @storybook/test-runner
  ...getJestConfig(),
  /** Add your own overrides below
   * @see https://jestjs.io/docs/configuration
   */
  testEnvironmentOptions: {
    'jest-playwright': {
      collectCoverage: true,
      contextOptions: {},
      exitOnPageError: false, // Critical for preventing non-critical page errors from failing tests
    },
  },
}
```

Without this configuration, you'll encounter the infamous error:

```
TypeError: Cannot read properties of undefined (reading 'goto')
```

This happens because the Playwright `page` object isn't properly initialized in the default v7 environment setup.

### Essential Storybook Configuration

Your `.storybook/main.ts` must include the interactions addon:

```typescript
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-docs',
    '@storybook/addon-interactions', // ← Critical for interaction testing
  ],
  framework: {
    name: '@storybook/react-vite', // or '@storybook/react-webpack5'
    options: {},
  },
}
export default config
```

### Required Dependencies

Your `package.json` needs these exact versions:

```json
{
  "devDependencies": {
    "@storybook/addon-interactions": "^7.6.0",
    "@storybook/jest": "^0.2.0",
    "@storybook/test-runner": "0.13.0",
    "@storybook/testing-library": "^0.2.0"
  }
}
```

**Version compatibility is critical**:

- `@storybook/test-runner@0.13.0` - Last v7-compatible version
- `@storybook/jest@0.2.0` - Provides Jest matchers for Storybook
- `@storybook/testing-library@0.2.0` - Testing utilities for interactions

### Story File Setup

Your story files need proper imports for interaction testing:

```typescript
import type { Meta, StoryObj } from '@storybook/react'
import {
  configure,
  screen,
  within,
  userEvent,
} from '@storybook/testing-library'
import { expect } from '@storybook/jest'

// Configure testing library
configure({ testIdAttribute: 'data-testid' })

// Your component and story setup
const meta: Meta<typeof YourComponent> = {
  title: 'Components/YourComponent',
  component: YourComponent,
}

export default meta
type Story = StoryObj<typeof YourComponent>
```

## How the Test Runner Works Under the Hood

Understanding the mechanics helps debug issues and optimize performance:

1. **Browser Automation**: Uses Playwright to launch a headless browser (Chromium by default)
2. **Story Navigation**: Automatically discovers and navigates to each story's dedicated URL
3. **Test Execution**:
   - Runs a basic "smoke test" for every story (ensures rendering without errors) - By default.
   - Executes `play` function interactions for stories that have them
4. **Result Aggregation**: Collects results from all tests and reports them to the CLI

![test runner component tests](/images/storybook-test-runner.png)

## Writing Interaction Tests

Here's the complete test structure that handles all the complex scenarios:

```typescript
export const InteractionTests: StoryObj<typeof InteractionTestComponent> = {
  render: () => <InteractionTestComponent />,
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement)

    await step('Interactive Typing Test', async () => {
      const wrapper = await canvas.findByTestId('default-suggestion-input')
      const input = within(wrapper).getByRole('textbox')
      await userEvent.clear(input)
      await userEvent.type(input, 'Marg')
      await expect(input).toHaveValue('Marg')
    })

    await step('Keyboard Navigation Test', async () => {
      const wrapper = await canvas.findByTestId('default-suggestion-input')
      const input = within(wrapper).getByRole('textbox')
      await userEvent.click(input)
      await expect(input).toHaveFocus()
      await userEvent.keyboard('{ArrowDown}')
      await userEvent.keyboard('{ArrowDown}')
      await userEvent.keyboard('{ArrowUp}')
      await userEvent.keyboard('{Enter}')
      await expect(input).toHaveFocus()
    })

    await step('Multiple Selection Test', async () => {
      const wrapper = await canvas.findByTestId(
        'states-suggestion-multiple-input',
      )
      const input = within(wrapper).getByRole('textbox')
      await userEvent.click(input)

      await userEvent.type(input, 'React')
      await userEvent.keyboard('{ArrowDown}')
      await userEvent.keyboard('{Enter}')

      await userEvent.type(input, 'Vue')
      await userEvent.keyboard('{ArrowDown}')
      await userEvent.keyboard('{Enter}')

      const reactChip = await canvas.findByTestId(
        'states-suggestion-multiple-input.tag.react',
      )
      const vueChip = await canvas.findByTestId(
        'states-suggestion-multiple-input.tag.vue',
      )

      expect(reactChip).toBeInTheDocument()
      expect(vueChip).toBeInTheDocument()
    })

    await step('Component States Test', async () => {
      const loadingWrapper = await canvas.findByTestId(
        'loading-state-suggestion',
      )
      const progress = within(loadingWrapper).getByRole('progressbar')
      expect(progress).toBeInTheDocument()

      const errorWrapper = await canvas.findByTestId('error-state-suggestion')
      const warningIcon = within(errorWrapper).getByText('warning')
      expect(warningIcon).toBeInTheDocument()
    })

    await step('Accessibility Test', async () => {
      const wrapper = await canvas.findByTestId('default-suggestion-input')
      const input = within(wrapper).getByRole('textbox')
      expect(input).toHaveAttribute('aria-autocomplete', 'list')
      const label = await canvas.findByText('Default Suggestion')
      expect(label).toBeInTheDocument()
    })
  },
}
```

## The Execution Workflow: Two-Terminal Setup

The testing workflow requires careful orchestration:

```bash
# Terminal 1: Start Storybook (and keep it running)
yarn storybook
# Wait for "Local: http://localhost:6006/"

# Terminal 2: Run the tests
yarn test:component
```

**Critical timing**: The test runner expects Storybook to be fully loaded before starting. Rushing this step causes connection errors.

## Debugging Test Failures in Storybook v7

Storybook v7's error messages can be overwhelming. Here's a real failure example and how to decode it (Just changed the role to a wrong role for the sake of the example):

```bash
FAIL   browser: chromium  src/schemaRender/stories/base/suggestion/index.stories.tsx
  Development/Base/Suggestion
    InteractionTests
      ✕ play-test (617 ms)

  ● Development/Base/Suggestion › InteractionTests › play-test

    page.evaluate: StorybookTestRunnerError:
    An error occurred in the following story. Access the link for full output:
    http://127.0.0.1:6006/?path=/story/development-base-suggestion--interaction-tests&addonPanel=storybook/interactions/panel

    Message:
     Unable to find an accessible element with the role "textbo"

    Here are the accessible roles:
      textbox:
      Name "":
      <input
        id="someidinput"
        placeholder=""
        type="text"
        value="Pizza"
      />
```

### Debugging Strategy:

1. **Use the provided URL**: The error includes a direct link to the failing story
2. **Check element selectors**: The error shows available roles - use these for your queries
3. **Verify timing**: Often failures are due to elements not being ready
4. **Test manually first**: Run the interaction manually in Storybook before automating

### The Screen vs Canvas Problem

A common mistake in Storybook v7 interaction tests:

```typescript
// ❌ Wrong - causes warnings
const element = screen.getByRole('textbox')

// ✅ Correct - use canvas
const canvas = within(canvasElement)
const element = canvas.getByRole('textbox')
```

The `screen` object works but generates warnings about Testing Library best practices.

## Storybook v7 vs v8: What You're Missing

If you're stuck on v7, here's what v8+ offers that you can't easily replicate:

- **Built-in Vitest integration** with `@storybook/addon-vitest`
- **Improved error messages** with better stack traces
- **Faster test execution** through optimized browser handling
- **Better TypeScript support** in test configurations
- **Streamlined setup** with working defaults

But with the setup I've outlined, you can achieve 90% of the functionality with v7.

So what we achieved here?

### Automated Test Coverage

- **Interaction testing** for complex user flows
- **Accessibility validation** built into every test
- **Regression prevention** through CI integration
- **Visual testing** combined with functional testing

### Development Benefits

- **Faster debugging** with direct Storybook links in failures
- **Confident refactoring** knowing interactions are covered
- **Documentation through tests** showing expected behavior
- **Onboarding acceleration** for new team members

## Integrating with CI/CD

For production use, add this to your CI pipeline:

```yaml
# .github/workflows/storybook-tests.yml
name: Storybook Tests
on: [push, pull_request]

jobs:
  interaction-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build Storybook
        run: yarn build-storybook --quiet

      - name: Serve Storybook and run tests
        run: |
          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx http-server storybook-static --port 6006 --silent" \
            "npx wait-on http://127.0.0.1:6006 && yarn test:component"
```

## Best Practices for Storybook v7 Testing

### 1. Test Structure

```typescript
// ✅ Good: Clear steps with descriptive names
await step(
  'User can select multiple options with keyboard navigation',
  async () => {
    // Test implementation
  }
)

// ❌ Bad: Vague step descriptions
await step('Test selection', async () => {
  // Test implementation
})
```

### 2. Element Selection

```typescript
// ✅ Good: Use data-testid attributes
const input = canvas.getByTestId('suggestion-input')

// ❌ Bad: Fragile CSS selectors
const input = canvas.querySelector('.someCssClass')
```

### 3. Async Handling

```typescript
// ✅ Good: Proper async waiting
await userEvent.type(input, 'search term')
await waitFor(() => expect(dropdown).toBeVisible())

// ❌ Bad: Not waiting for async operations
userEvent.type(input, 'search term')
expect(dropdown).toBeVisible() // Might fail due to timing
```

![storybook interactions tests in storybook ui](/images/interactions-tests.gif)

---

That's it.
I would love to know and hear if you have any other tips or tricks for Storybook v7 testing or even better solutions for such cases.


Using storybook 7? Having trouble implementing component/interaction testing? This is the guide for you.

Storybook Component/Interactions Testing


## The Problem with Flaky Tests

We've all been there - you have a test suite that works perfectly in isolation, but occasionally fails due to external factors beyond your control (like a third-party service being down). Maybe it's a network hiccup, a temporary service unavailability, or leftover test data from previous runs. While Playwright offers built-in retry mechanisms, sometimes you need more control over what happens between retry attempts.

In this post, I'll show you how to leverage Playwright's retry system with custom fixtures to perform cleanup operations between retries, ensuring each retry attempt starts with a clean slate.

## Understanding Playwright's Built-in Retry Mechanism

Playwright provides a simple retry configuration that you can set in your `playwright.config.ts`:

```typescript
// playwright.config.ts
export default defineConfig({
  // Retry failed tests up to 2 times
  retries: process.env.CI ? 2 : 0,

  // Or configure per project
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      retries: 2,
    },
  ],
})
```

While this works great for simple flaky tests, it doesn't help when your test failures are caused by leftover data or state from previous attempts. This is where custom retry handling becomes invaluable.

## The Solution: Custom Retry Fixture

The key insight is to create a custom fixture that can detect when a test is being retried and perform necessary cleanup operations. Here's how I implemented this pattern in one of my projects:

### Step 1: Create a RetryHandler Class

First, let's create a `RetryHandler` class that manages the cleanup logic.
In this example, we are cleaning up test data that could be stored in various systems like MongoDB, Redis, files, or other external services.

```typescript
// utils/retry-handler.ts
import { logger } from '@moonactive/admin-common-logger'
import { Fixtures } from 'fixture/base.fixture'
import { TestInfo } from 'playwright-decorators'

export class RetryHandler {
  async retryHandler(
    testInfo: TestInfo,
    context: Fixtures, // Where you pass other fixtures you want to clean up
    testData: any[] // Where you pass the test data you want to clean up
  ): Promise<void> {
    // Only perform cleanup if this is a retry attempt (retry > 0)
    if (testInfo.retry > 0) {
      await RetryHandler.retryCleaner(context, testData)
    }
  }

  static async retryCleaner(
    context: Partial<Fixtures>,
    testData: any[]
  ): Promise<void> {
    try {
      const { mongo, redis } = context
      const dataIds = testData.map(
        item => item.id || item._id || item.identifier
      )

      const contextDetails = {
        mongo: !!mongo,
        redis: !!redis,
      }

      logger.info(
        `Triggering retry cleanup for data: ${dataIds}, context: ${JSON.stringify(
          contextDetails
        )}`
      )

      // Clean up database records if MongoDB is used
      if (mongo) {
        await mongo.deleteTestDataFromDB(testData)
      }

      // Clean up Redis records if Redis is used
      if (redis) {
        await redis.deleteTestDataFromRedis(testData)
      }

      if (!mongo && !redis) {
        logger.error('Missing context for retryCleaner')
        throw new Error('Missing context for retryCleaner')
      }
    } catch (err) {
      logger.error(`Failed to clean up after retry: ${err}`)
      throw err
    }
  }
}
```

### Step 2: Integrate with Playwright Fixtures

Next, integrate the RetryHandler into your Playwright fixture system:

```typescript
// fixture/base.fixture.ts
import { RetryHandler } from '../utils/retry-handler'
// ... other imports

export type Fixtures = {
  logger: Types.SomeLogger
  app: App
  expect: typeof expect
  mongo: DatabaseHelper
  redis: RedisHelper
  bq: BQHelper
  api: APIHelper
  sqs: SqsHelper
  retry: RetryHandler // Our custom retry handler
}

export const test = base.extend<Fixtures>({
  // ... other fixtures

  retry: async ({}, use) => {
    const retryHandler = new RetryHandler()
    await use(retryHandler)
  },

  // ... other fixture implementations
})
```

### Step 3: Use the Retry Handler in Tests

Now you can use the retry handler in your tests:

```typescript
// tests/example.spec.ts

test('Create and validate test data', async ({
  app,
  api,
  mongo,
  redis,
  retry,
}, testInfo) => {
  // Define test data that might need cleanup
  const testData = [
    { id: 'test-item-1', name: 'Test Item 1', type: 'example' },
    { id: 'test-item-2', name: 'Test Item 2', type: 'example' },
  ]

  // Call retry handler at the beginning of the test
  // This will clean up any leftover data if this is a retry attempt
  await retry.retryHandler(testInfo, { mongo, redis }, testData)

  // Your actual test logic
  await app.createTestItems(testData)

  // Validate the created items
  await api.validateTestItems(testData)

  // Perform additional test actions
  await app.performActionsOnItems(testData)
})
```

## How Does It Work?

The magic happens in the `testInfo.retry` property. Playwright automatically increments this value for each retry attempt:

- **First attempt**: `testInfo.retry = 0` (no cleanup performed)
- **First retry**: `testInfo.retry = 1` (cleanup is performed)
- **Second retry**: `testInfo.retry = 2` (cleanup is performed again)

This ensures that cleanup only happens when needed, avoiding unnecessary operations on the first test run.

## Key Benefits

### 1. **Intelligent Cleanup**

Only performs cleanup operations when actually retrying, not on the initial test run.

### 2. **Flexible Context**

You can pass different fixtures and resources based on what your specific test needs to clean up.

### 3. **Comprehensive Coverage**

The example shows cleanup across multiple systems (database, GitHub, configuration), but you can adapt it to your needs.

### 4. **Proper Error Handling**

Includes logging and error handling to help debug cleanup issues.

### 5. **Type Safety**

Leverages TypeScript for better IDE support and catch errors at compile time.

## Advanced Usage Patterns

### Multi-Service Cleanup

You can extend this pattern to handle different types of cleanup based on the test context:

```typescript
await retry.retryHandler(
  testInfo,
  {
    mongo,
    redis,
    elasticsearch,
    fileSystem,
    api,
  },
  testData
)
```

### Conditional Cleanup

Add logic to perform different cleanup based on test metadata:

```typescript
async retryHandler(
  testInfo: TestInfo,
  context: Fixtures,
  data: any[],
  options?: { skipRedis?: boolean; skipDB?: boolean; skipFiles?: boolean }
): Promise<void> {
  if (testInfo.retry > 0) {
    await RetryHandler.retryCleaner(context, data, options)
  }
}
```

### Custom Retry Limits

You can even implement custom retry logic based on specific conditions:

```typescript
async retryHandler(
  testInfo: TestInfo,
  context: Fixtures,
  data: any[],
  maxRetries: number = 2
): Promise<void> {
  if (testInfo.retry > 0 && testInfo.retry <= maxRetries) {
    await RetryHandler.retryCleaner(context, data)
  } else if (testInfo.retry > maxRetries) {
    logger.warn(`Exceeded max retries (${maxRetries}), skipping cleanup`)
  }
}
```

## Best Practices

1. **Call Early**: Always call the retry handler at the very beginning of your test, before any test actions.

2. **Be Specific**: Only clean up the specific data your test creates to avoid affecting other tests.

3. **Log Everything**: Include comprehensive logging to help debug retry scenarios.

4. **Handle Failures**: Make sure cleanup failures don't prevent the retry from proceeding.

5. **Test Your Cleanup**: Consider writing separate tests to verify your cleanup logic works correctly.

## Conclusion

This pattern transforms Playwright's basic retry mechanism into a powerful tool for handling complex test scenarios. By combining custom fixtures with intelligent cleanup logic, you can ensure that flaky tests get a truly fresh start on each retry attempt.

The approach is particularly valuable for integration tests that interact with external services, databases, or file systems where leftover state can cause cascading failures.

Have you implemented similar retry patterns in your test suites? I'd love to hear about your experiences and any creative solutions you've developed!


Do you have a flaky test that is out of your control? Do you have some functionality you need to apply between retries? This is the tip for you.

Playwright Tips: Leverage Playwright's Retry Mechanism as a Custom Fixture


So a little bit context first - As our test suites grow in complexity and execution parallelism, pinpointing the origin of specific network requests and responses becomes increasingly crucial dude to some random flakiness.

In our Playwright automation framework, we recently encountered a scenario where we needed to intercept a response from a particular worker instance in our parallel test execution. This led us to devise a solution leveraging Playwright's request interception capabilities and custom headers.

When running Playwright tests in parallel using multiple workers, identifying which worker initiated a specific network request can be challenging. This is especially true when dealing with APIs that might behave slightly differently based on the context of the worker or the test being executed.
In our case, we needed to verify the response of a specific API call triggered by an action within a particular test running on a specific worker. Using the builtin `page.waitForResponse()` with a URL matcher wasn't sufficient because multiple workers could potentially trigger the same API call around the same time. We needed a more precise way to target the response we were interested in.

Therefore, our approach was to inject a custom header into the outgoing request from a specific worker instance. This unique header would then allow us to identify the corresponding response. Playwright's `page.route()` API provides a powerful mechanism to intercept and modify requests before they are sent.

Here's an example of how we implemented this solution:

```typescript
import { Page, Response } from '@playwright/test'

async function waitForResponseOfSpecificWorkerInstance(
  page: Page,
  partialRoute: string,
  uniqueIdentifier: string,
  timeout = 21000
): Promise<Response> {
  const regexRoute = new RegExp(partialRoute)

  await page.route('**/*', route => {
    const url = route.request().url()
    const urlObj = new URL(url)
    const pathname = urlObj.pathname

    if (regexRoute.test(pathname)) {
      const newHeaders = { ...route.request().headers() }
      newHeaders['X-Unique-Identifier'] = uniqueIdentifier
      route.continue({ headers: newHeaders })
    } else {
      route.continue()
    }
  })

  const response = await page.waitForResponse(
    response => {
      const requestHeaders = response.request().headers()
      return (
        regexRoute.test(response.url()) &&
        requestHeaders['x-unique-identifier'] === uniqueIdentifier
      )
    },
    { timeout }
  )
  return response
}
```

Let's break down what this simple function does:

```typescript
waitForResponseOfSpecificWorkerInstance(page, partialRoute, uniqueIdentifier, timeout):
```

- Takes the Playwright Page object, a partialRoute (a string or regular expression to match the URL), a uniqueIdentifier (a string to identify the worker instance), and an optional timeout as arguments.
- Returns a Promise that resolves with the intercepted Response object.

```typescript
const regexRoute = new RegExp(partialRoute)
```

Creates a regex from the partialRoute variable to allow for flexible URL matching.

```typescript
await page.route('**/*', route => { ... });
```

This is the heart of the request interception. `page.route('**/*')` intercepts all network requests made by the page.
The provided callback function is executed for each intercepted request.

```typescript
const url = route.request().url()
const pathname = new URL(url).pathname

if (regexRoute.test(pathname)) { ... }
```

Extracts the URL and then specifically the pathname from the intercepted request. We often focus on the pathname for route matching.
Then we check if the pathname of the current request matches the provided partialRoute.

```typescript
const newHeaders = { ...route.request().headers() }

newHeaders['X-Unique-Identifier'] = uniqueIdentifier
```

Creates a copy of the existing request headers. It's important to copy the headers to avoid modifying the original object directly. Then we inject our custom header. We add a new header named `X-Unique-Identifier` with the value of the uniqueIdentifier variable that was passed to the function as an argument.

```typescript
route.continue({ headers: newHeaders })
else { route.continue() }

```

Allows the intercepted request to continue to the server, but now with our newly added custom header.
If the request URL doesn't match our target partialRoute, we simply allow the request to continue without modification.

```typescript
const response = await page.waitForResponse(response => { ... }, { timeout })

```

This is where we wait for the specific response we are interested in. The callback function within `waitForResponse` checks two conditions:

- `regexRoute.test(response.url())` Ensures the response URL matches our target route.
  `requestHeaders['x-unique-identifier'] === uniqueIdentifier` Checks if the request that led to this response had our custom X-Unique-Identifier header with the expected value.

And finally, once a matching response is found (both URL and custom header match), the promise resolves with the Response object and returns it.

Now, lets take a look at how we can use this function in a test:

```typescript
import { test, expect } from '@playwright/test'
import { waitForResponseOfSpecificWorkerInstance } from './utils' // Assuming the function is in a utils.ts file

test('Edit refresh lock', async ({ app, api }, testInfo) => {
  // Assuming 'app' and 'api' is a fixture object containing your page objects and api helper function like waitForResponseOfSpecificWorkerInstance

  const responsePromise = api.waitForResponseOfSpecificWorkerInstance(
    app.myPage,
    '/api/v1/example/',
    `worker_${testInfo.workerIndex}`
  )

  // Perform some action that will trigger the API call

  const response = await responsePromise
  expect(response.status()).toBe(200)
})
```

In this example:

- We use `testInfo.workerIndex` (testInfo is a built-in fixture of Playwright) to get a unique identifier for the current worker running the test. This ensures that each parallel test execution will have a distinct X-Unique-Identifier header.
- We call our `waitForResponseOfSpecificWorkerInstance` function before performing the action that triggers the API call.
- We pass the page object, the partial route of the API endpoint we're interested in (/api/v1/example/), and the unique worker identifier as a string.
- The test then proceeds to perform the action on the browser.
- We await the `responsePromise`, which will resolve only when a response from the /api/v1/example/ endpoint is received and its corresponding request had the X-Unique-Identifier header matching the current worker's index.

By doing that simple trick, we can now precisely target and handle responses from specific worker instances in our parallel test execution, reduce flakiness (even in parallel execution) and enhanced debugging abilities.


Target specific API responses with Playwright parallel execution using custom headers for reliable automation.

Playwright Tips: Using Custom Headers in Playwright for Worker-Specific Response Handling


## The data-test-id Debate: To Use or Not to Use?

For those of us who have a passion for code testing, automated testing plays a crucial role in web development. When talking about end-to-end or functional testing of web applications, one technique that often sparks a debate is the use of data-test-id attributes in HTML elements. This article delves into the pros and cons of using these attributes.

### So What Are data-test-id Attributes?

data-test-id is a custom HTML attribute used to uniquely identify elements for automated testing. It serves as a stable hook for testing tools, allowing them to locate and interact easily with specific elements regardless of changes to styling, layout, structure, or any other non-functional aspects of the application.

So let's start by examining the arguments for and against using data-test-id attributes in web applications.

### The Case For data-test-id

1. **Stability and Resilience:**

Using data-test-id provides a stable selector, mitigating the risk of tests breaking or flakiness due to changes in CSS classes or DOM structure, which usually happens quite frequently on modern web applications being constantly developed.
It is also especially vital in complex dynamic applications with frequent updates and state changes.

2. **Insulation from Style Changes:**

Due to the fact that almost any new web application is being developed using some kind of a framework or a library (for example, tailwind), CSS classes are often subject to change for styling purposes in a more frequent way then it used to be changed in the past. Relying on them for testing often creates flaky tests.

3. **Improved Testing Efficiency:**

Whatever you think on data-test-id usage, you can't deny its the most efficient method of building an automation testing framework from scratch.
Due to the fact that it is a custom attribute, it is not used for any other purpose other than testing, which makes it a perfect candidate for testing and of course it makes our locators more quicker to find with less of an effort and time to figure out which selectors we should use.

4. **Improved Debugging:**

During test failures, data-test-id attributes make it easier to pinpoint the problematic element, streamlining the debugging process which saves us time and effort.

5. **Dynamic Addition and Removal:**

data-test-id attributes can be dynamically added or removed based on the environment using build tools, server-side rendering, or client-side JavaScript. This allows for their removal in production builds, addressing potential performance and security concerns (spoiler for some of the cons).

### The Case Against data-test-id

1. **Potential Clutter and Performance Impact:**

Leaving data-test-id attributes in production can increase the size of the DOM, potentially leading to slight performance degradation.

2. **Maintenance Overhead:**

Maintaining unique and meaningful data-test-id values can become challenging in large applications, requiring consistent naming conventions and careful management.

3. **Security Concerns:**

On some cases, if left in production, data-test-id attributes might inadvertently expose sensitive information about the application's structure or functionality for potential attackers.

4. **Scraping:**

Simply put, these attributes can make web scraping much easier. While true, it is not the only way to scrape a web application.

5. **Discourage of User Facing Locators:**

Using data-test-id encourages testing implementation details rather than user behavior.
For example, if you look at [Playwright's documentation, under best practices,](https://playwright.dev/docs/best-practices#prefer-user-facing-attributes-to-xpath-or-css-selectors) they encourage using selectors that are visible to the user, such as text content, and other user-visible attributes. Although we need to be fair and say, they were mainly aiming at the usage of CSS selectors, and XPath which these days are considered as unreliable.
You can find similar recommendations in the React Testing Library.

---

To conclude, let's go over of some of the **best practices** and considerations when using data-test-id attributes.

**Naming Conventions:** Establish clear and consistent naming conventions for data-test-id values (e.g., component-element-action).

**Environment-Specific Handling:** Use build tools or server-side rendering to remove data-test-id attributes in production.

**Balanced Approach:** Use data-test-id judiciously, complementing it with user-centric testing approaches that target user-visible attributes.

**Avoid Over-Reliance:** Do not rely solely on data-test-id. Test user flows and user visible information.


In this article, I will discuss the pros and cons of using test-ids in your web applications projects.

The Case For and Against test-id Usage


I'm using Mac for several years now as my daily driver at different workplaces, and during those years I've selected a few tools that goes with me anywhere.

I will skip the obvious ones such as code editors / terminals, etc and focus on the tools that I think are less known but can improve your productivity.

### Homebrew

Can't define [homebrew](https://brew.sh/) as less known, but I still think it's worth mentioning because its the first thing I install when I start working on a Mac.

Homebrew is a package manager for macOS (not only) that allows you to install and manage software packages from the command line effortlessly. By the way, it's also a great way to install tools that are not available in the App Store.
It is free and open source, and it's a must-have tool for any developer working on a Mac in my point of view.

Some of the tools recommended in this article can be installed using Homebrew.

### Docker Desktop

[Docker desktop](https://www.docker.com/products/docker-desktop/) is the easiest and most strait forward way I know to run containers, monitor and manage locally on your Mac.
It's a great tool for developers who want to run and test their applications in a containerized environment.
I use it daily to run databases, message brokers, and other services that I need for my development environment.

### Raycast

[Raycast](https://www.raycast.com/) is a productivity tool that helps you to perform tasks faster on your Mac. It's a great tool for developers who want to automate repetitive tasks and access their favorite tools and services quickly using custom scripts, hotkeys and more.

### Jumpcut

[Jumpcut](https://snark.github.io/jumpcut/) is a clipboard manager for macOS that allows you to access your clipboard history and paste previously copied items with ease. It's a great tool for developers who want to copy and paste multiple items quickly without losing track of their clipboard history.
You can browse your clipboard history using hotkeys, and it supports text, images, and other types of content.

### AltTab

[AltTab](https://alt-tab-macos.netlify.app/) is a macOS app that enhances the built-in app switcher with more features and customization options. It allows you to switch between apps and windows more efficiently using keyboard shortcuts and gestures. It's a great tool for developers who want to navigate between apps and windows quickly and easily.
Personally, I replaced the default macOS app switcher with AltTab, and I find it more intuitive and user-friendly.
For example, when you want to switch between windows of the same app, you can use the arrow keys to navigate and select the desired window while it provides you a preview of the window you're about to switch to.

### UTM

[UTM](https://mac.getutm.app/) is a macOS app that allows you to create and manage virtual machines on your Mac. It's a great tool for developers who want to run multiple operating systems and environments on their Mac for testing and development purposes. UTM supports a wide range of operating systems and platforms, and it provides one of the most user-friendly interfaces I encountered up until now for creating and managing virtual machines.

### TinkerTool

[TinkerTool](https://www.bresink.com/osx/TinkerTool.html) is a macOS app that allows you to customize and tweak various system settings and preferences on your Mac. It's a great tool for developers who want to personalize their Mac experience and optimize their workflow. TinkerTool provides a wide range of options and settings that are not available in the standard macOS preferences, and it allows you to customize your Mac to suit your needs and preferences.

### Stats

[Stats](https://github.com/exelban/stats) is a macOS system monitor that provides real-time information about your Mac's performance and resource usage. It's a great tool for developers who want to keep an eye on their system's performance and identify any bottlenecks or issues that may affect their work. Stats displays information about CPU, memory, disk, network, and battery usage in a user-friendly interface, and it allows you to monitor your Mac's performance at a glance while also providing the option to customize the display and layout of the information.

---

Let me know if you have any other tools that you think are worth mentioning, and I'll be happy to check them out!


In this blog post I will share some of the tools I use daily on my Mac to improve my productivity and efficiency as a developer.

Welcome toKazi's Dev Blog

Latest Articles