Playwright

If you used the CLI method to install Minze you can extend your environment with e2e tests quite quickly by using Playwright.

The following guide is based on a fresh Minze CLI installation.

Install dependencies.

npmyarnpnpmbun

bash

$ npm add -D @playwright/test

bash

$ yarn add -D @playwright/test

bash

$ pnpm add -D @playwright/test

bash

$ bun add -D @playwright/test

Initialize Playwright.

bash

npx playwright install

Add test scripts to package.json.

package.json

json

{
  "scripts": {
    // ...
    "test": "npx playwright test",
    "test-ui": "npx playwright test --ui",
    "test-debug": "npx playwright test --debug"
  }
}

Create and populate playwright.config.js and utils.js files. Wrap the preview code inside vite.js in a conditional.

filesplaywright.config.jssrc/utils.jssrc/vite.js

txt

├─ src/
|  ├─ ...
|  ├─ utils.js // [!code ++]
|  └─ vite.js // [!code warning]
├─ ...
└─ playwright.config.js // [!code ++]

import { defineConfig } from '@playwright/test'

export default defineConfig({
  webServer: {
    command: 'vite -m testing',
    port: 5173,
    reuseExistingServer: !process.env.CI
  }
})

export async function setup(page, html) {
  await page.goto('/')

  await page.evaluate((html) => {
    const app = document.querySelector('#app')
    if (app) app.innerHTML = html
  }, html)
}

import './assets/vite.css'

import { modules, defineAll } from './main'
defineAll(modules)

if (import.meta.env.MODE !== 'testing') {
  const previews = import.meta.glob('./*.html', { eager: true, query: '?raw', import: 'default' })
  const preview = previews['./preview.dev.html'] ?? previews['./preview.html']

  const app = document.querySelector('#app')
  if (app) app.innerHTML = preview
}

Create a my-button.test.js file inside the src/lib directory.

src/
└─ lib/
   ├─ ...
   ├─ my-button.js
   └─ my-button.test.js // [!code ++]

Add the following code to your newly created file:

src/lib/my-button.test.js

import { test, expect } from '@playwright/test'
import { setup } from '@/utils'

test.describe('my-button', () => {
  test.beforeEach(async ({ page }) => {
    await setup(page, '<my-button>Hello Minze!</my-button>')
  })

  test('html', async ({ page }) => {
    await expect(page.locator('my-button button')).toBeVisible()
  })

  // ...
})

Run the test script.

npmyarnpnpmbun

bash

$ npm test

bash

$ yarn test

bash

$ pnpm test

bash

$ bun test

TIP

For more details about Playwright refer to the Playwright docs.

Playwright ​

Playwright