# @lowdefy/block-dev-e2e

> Lowdefy Block E2E Testing Tools

Latest version **5.6.0** (published 2026-08-28) · Apache-2.0 license · 582 weekly downloads

## Install

```sh
npm install @lowdefy/block-dev-e2e
pnpm add @lowdefy/block-dev-e2e
yarn add @lowdefy/block-dev-e2e
bun add @lowdefy/block-dev-e2e
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 5.6.0 |
| Published | 2026-08-28 |
| First published | 2026-02-02 |
| Weekly downloads | 582 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3005 |
| Maintainers | samtolmay, gervwyk, machielvdw |
| Keywords | lowdefy, utils, e2e, playwright |

## Links

- npm: https://www.npmjs.com/package/@lowdefy/block-dev-e2e
- Repository: https://github.com/lowdefy/lowdefy
- Homepage: https://lowdefy.com
- Issues: https://github.com/lowdefy/lowdefy/issues
- npm.io page: https://npm.io/package/@lowdefy/block-dev-e2e

## Dependencies (2)

- [@playwright/test](https://npm.io/package/@playwright/test.md) 1.50.1
- [@lowdefy/e2e-utils](https://npm.io/package/@lowdefy/e2e-utils.md) 5.6.0

## Alternatives

- [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads
- [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads
- [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads
- [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads
- [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads

## Recent versions

- 5.6.0 (latest) — 2026-08-28
- 0.0.0-experimental-20260908154018 (experimental) — 2026-09-08
- 0.0.0-experimental-20260908140341 — 2026-09-08
- 0.0.0-experimental-20260908113207 — 2026-09-08
- 0.0.0-experimental-20260908103554 — 2026-09-08
- 0.0.0-experimental-20260906143808 — 2026-09-06
- 0.0.0-experimental-20260905100314 — 2026-09-05
- 0.0.0-experimental-20260905094305 — 2026-09-05
- 0.0.0-experimental-20260904141432 — 2026-09-04
- 0.0.0-experimental-20260903174536 — 2026-09-03
- 0.0.0-experimental-20260903141334 — 2026-09-03
- 0.0.0-experimental-20260831092225 — 2026-08-31
- 0.0.0-experimental-20260831061457 — 2026-08-31
- 0.0.0-experimental-20260831053108 — 2026-08-31
- 0.0.0-experimental-20260830202815 — 2026-08-30
- … 231 more at https://npm.io/package/@lowdefy/block-dev-e2e/versions

## README

# @lowdefy/block-dev-e2e

Shared Playwright utilities for e2e testing Lowdefy block packages.

## Installation

Add to your block package's devDependencies:

```json
{
  "devDependencies": {
    "@lowdefy/block-dev-e2e": "4.5.2",
    "@playwright/test": "1.50.1"
  }
}
```

## Setup

### 1. Create Playwright config

Create `e2e/playwright.config.js`:

```javascript
import path from 'path';
import { fileURLToPath } from 'url';
import { createPlaywrightConfig } from '@lowdefy/block-dev-e2e';

const packageDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));

export default createPlaywrightConfig({
  packageDir,
  port: 3001, // Use unique port per block package
});
```

### 2. Create test app

Create `e2e/app/lowdefy.yaml`:

```yaml
lowdefy: local
name: my-blocks E2E Tests

pages:
  - _ref: ../../src/blocks/MyBlock/tests/MyBlock.e2e.yaml
```

### 3. Add test fixtures

Create `src/blocks/MyBlock/tests/MyBlock.e2e.yaml`:

```yaml
id: myblock
type: Box

blocks:
  - id: myblock_basic
    type: MyBlock
    properties:
      title: Test Title
```

### 4. Add e2e tests

Create `src/blocks/MyBlock/tests/MyBlock.e2e.spec.js`:

```javascript
import { test, expect } from '@playwright/test';
import { getBlock, navigateToTestPage } from '@lowdefy/block-dev-e2e';

// Helper: get framework wrapper, then locate Ant component inside
const getButton = (page, blockId) => getBlock(page, blockId).locator('.ant-btn');

test.describe('MyBlock', () => {
  test.beforeEach(async ({ page }) => {
    await navigateToTestPage(page, 'myblock');
  });

  test('renders block', async ({ page }) => {
    const block = getBlock(page, 'myblock_basic');
    await expect(block).toBeVisible();

    const button = getButton(page, 'myblock_basic');
    await expect(button).toHaveText('Test Title');
  });
});
```

### 5. Add scripts to package.json

```json
{
  "scripts": {
    "e2e": "playwright test --config e2e/playwright.config.js",
    "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
  }
}
```

## API

### createPlaywrightConfig({ packageDir, port, testMatch })

Creates a Playwright config for a block package.

- `packageDir` - Absolute path to the block package root
- `port` - Dev server port (default: 3001)
- `testMatch` - Glob pattern for test files (default: `**/tests/*.e2e.spec.js`)

### getBlock(page, blockId)

Returns a Playwright locator for a block's framework wrapper element (`#bl-{blockId}`). This wrapper is guaranteed to exist for all block types.

**Two-step pattern for targeting Ant Design components:**
```javascript
// 1. Get the framework wrapper
const block = getBlock(page, 'button_basic');
await expect(block).toBeVisible();

// 2. Locate the Ant Design component inside the wrapper
const button = block.locator('.ant-btn');
await expect(button).toHaveText('Click Me');
```

**Common helper patterns:**
```javascript
// Display blocks (Button, Alert, Badge, etc.)
const getButton = (page, blockId) => getBlock(page, blockId).locator('.ant-btn');

// Input blocks - use the input's specific ID
const getInput = (page, blockId) => page.locator(`#${blockId}_input`);

// Selector blocks - scope with input ID
const getSelector = (page, blockId) => page.locator(`.ant-select:has(#${blockId}_input)`);
```

### navigateToTestPage(page, pageId)

Navigates to a test page.

```javascript
await navigateToTestPage(page, 'box'); // Goes to /box
```

## Running Tests

```bash
pnpm e2e              # Run all e2e tests
pnpm e2e:ui           # Run with Playwright UI
pnpm e2e --headed     # Run with visible browser
pnpm e2e --debug      # Debug mode
```

## Port Assignments

Use unique ports to allow parallel test runs:

| Package | Port |
|---------|------|
| blocks-basic | 3001 |
| blocks-antd | 3002 |
| blocks-aggrid | 3003 |
| blocks-markdown | 3004 |

---
_Source: https://npm.io/package/@lowdefy/block-dev-e2e · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._