### Start Svelte development server

Source: https://github.com/dnotes/quickpickle/blob/main/packages/svelte/README.md

After installing dependencies, run this command to start the development server. The -- --open flag will automatically open the app in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Setup quickpickle with Vitest Configuration

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Configure Vitest to recognize Gherkin feature files and specify setup files. This example is from the quickpickle documentation.

```typescript
import { quickpickle } from 'quickpickle';

export default {
  plugins: [
    quickpickle() // <-- Add the quickpickle plugin
  ],
  test: {
    include : [
      'features/*.feature', // <-- Add Gherkin feature files into "test" configuration
      // (you'll probably want other test files too, for unit tests etc.)
    ],
    setupFiles: ['./tests/tests.steps.ts'] // <-- specify each setupfile here
  },
};
```

--------------------------------

### Install quickpickle and @quickpickle/playwright

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Install the necessary packages as development dependencies.

```bash
npm install --save-dev quickpickle @quickpickle/playwright
```

--------------------------------

### Install QuickPickle and Vitest

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Install QuickPickle and Vitest as development dependencies for your project.

```sh
npm install --save-dev quickpickle vitest
```

--------------------------------

### Configure Vitest for Browser Component Testing

Source: https://github.com/dnotes/quickpickle/blob/main/packages/browser/README.md

Add the quickpickle plugin to your Vitest configuration. This example shows a setup for a SvelteKit project, including environment, include paths, setup files, and browser-specific configurations for Vitest.

```typescript
import quickpickle from "quickpickle";

export default [
  {
    plugins: [quickpickle()],
    extends: './vite.config.ts',
    test: {
      name: 'components',
      environment: 'browser',
      include: ['src/lib/**/*.feature'], // anticipates putting the .feature files next to components
      setupFiles: ['./tests/components.steps.ts'], // this file must be created (see step 3)
      // @ts-ignore
      quickpickle: {
        worldConfig: {
          componentDir: 'src/lib', // The directory where the components are kept
        }
      },
      browser: { // This is configuration for Vitest browser mode, and can be modified as appropriate
        enabled: true,
        screenshotFailures: true,
        name: 'chromium',
        provider: 'playwright',
        ui: true,
        instances: [
          { browser:'chromium' },
        ]
      }
    }
  },
]
```

--------------------------------

### Install @quickpickle/sv Add-on

Source: https://github.com/dnotes/quickpickle/blob/main/packages/sv/README.md

Use this command to install the QuickPickle and Playwright integrations for behavioral testing in your Svelte project.

```shell
npx sv add @quickpickle
```

--------------------------------

### Step Definition File Setup with Playwright Actions

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Set up your step definition file by importing actions and outcomes from '@quickpickle/playwright' and defining custom steps using the 'Given', 'When', 'Then' functions.

```typescript
// tests/example.steps.ts
import '@quickpickle/playwright/actions' // <-- import action step definitions from @quickpickle/playwright
import '@quickpickle/playwright/outcomes' // <-- import outcome step definitions from @quickpickle/playwright

import '@quickpickle/playwright/world' // <-- use the playwright world variable (optional)

import { Given, When, Then } from 'quickpickle' // <-- the functions to write step definitions

// Custom step definitions
Given('a/another number {int}', async (world) => {
  if (!world.numbers) world.numbers = []
  world.numbers.push(int)
})
```

--------------------------------

### QuickPickle Step Definitions

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

TypeScript example of step definitions for QuickPickle. These should be registered at the top level of the file and imported from 'quickpickle'.

```ts
// features/example.steps.ts
import { Given, Then } from 'quickpickle'

Given('a/another number {int}', (world, int) => {
  if (!world.numbers) world.numbers = [int]
  else world.numbers.push(int)
})

Then('the sum should be {int}', (world, int) => {
  expect(world.numbers.reduce((a,b) => a + b, 0)).toBe(int)
})
```

--------------------------------

### Custom World Constructor with SQLite

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Example of defining a custom world constructor in QuickPickle to initialize a SQLite database. Custom worlds extend QuickPickleWorld and can have an async `init` function.

```ts
import { setWorldConstructor, QuickPickleWorld, QuickPickleWorldInterface } from 'quickpickle'
import sqlite3 from 'sqlite3'
import { Database, open } from 'sqlite'

class CustomWorld extends QuickPickleWorld {
  db?: Database;

  constructor(context: TestContext, info?: QuickPickleWorldInterface['info']) {
    super(context, info)
  }

  async init() {
    await super.init()
    this.db = await this.setupDatabase()
  }

  private async setupDatabase(): Promise<Database> {
    const db = await open({
      filename: ':memory:',
      driver: sqlite3.Database
    })

    await db.exec(`CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT)`)

    return db
  }
}

setWorldConstructor(CustomWorld)
```

--------------------------------

### Workspace Configuration for Multiple QuickPickle Setups

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Use vitest.workspace.ts to define separate configurations for different testing scenarios, such as e2e, component, or unit tests, each with its own QuickPickle settings.

```typescript
// vitest.workspace.ts
import { defineWorkspace } from 'vitest/config';
import type { QuickPickleConfigSetting } from 'quickpickle';

const options1:QuickPickleConfigSetting = {} // some settings for e.g. e2e tests
const options2:QuickPickleConfigSetting = {} // other settings for e.g. component tests

export default defineWorkspace([
  {
    extends: './vite.config.ts',
    test: {
      name: 'e2e',
      include: [ 'tests/*.feature' ],
      setupFiles: [ 'tests/tests.steps.ts' ],
      quickpickle: options1,
    },
  },
  {
    extends: './vite.config.ts',
    test: {
      name: 'components',
      include: [ 'src/lib/*.feature' ],
      setupFiles: [ 'tests/components.steps.ts' ],
      quickpickle: options2,
    },
  },
  {
    test: {
      name: 'unit',
      include: [ 'tests/*.test.ts' ],
    }
  }
])
```

--------------------------------

### Gherkin Feature File Example

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Example of a Gherkin feature file defining a simple scenario for adding numbers. Ensure feature files are included in your vite.config.ts.

```gherkin
# features/example.feature
Feature: A simple example

  Scenario: Adding numbers
    Given a number 1
    And a number 2
    And a number 3
    And another number 3
    Then the sum should be 9
```

--------------------------------

### Configure QuickPickle Plugin in vite.config.ts

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Add the quickpickle plugin to your Vite configuration and specify Gherkin feature files and step definition setup files.

```typescript
// vite.config.ts
import { quickpickle, type QuickPickleConfigSetting } from './src';
const qpOptions:QuickPickleConfigSetting = {}

export default {
  plugins: [
    quickpickle(qpOptions) // <-- Add the quickpickle plugin
  ],
  test: {
    include : [
      'features/*.feature', // <-- Add Gherkin feature files into "test" configuration
      // (you'll probably want other test files too, for unit tests etc.)
    ],
    setupFiles: ['./tests/tests.steps.ts'] // <-- specify each setupfile here
  },
};
```

--------------------------------

### Use Default PlaywrightWorld Constructor

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Import the default PlaywrightWorld constructor in one of your setup files to enable Playwright integration.

```typescript
import '@quickpickle/playwright/world'
```

--------------------------------

### Create a new Svelte project

Source: https://github.com/dnotes/quickpickle/blob/main/packages/svelte/README.md

Use this command to initialize a new Svelte project. It can create a project in the current directory or a specified directory name.

```bash
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### Build Svelte library

Source: https://github.com/dnotes/quickpickle/blob/main/packages/svelte/README.md

Execute this command to package your Svelte library for distribution.

```bash
npm run package
```

--------------------------------

### Build Svelte showcase app

Source: https://github.com/dnotes/quickpickle/blob/main/packages/svelte/README.md

This command creates a production-ready build of your Svelte showcase application.

```bash
npm run build
```

--------------------------------

### Configure PlaywrightWorld via Vite Plugin and Test Object

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Demonstrates configuring PlaywrightWorld by passing an object to the quickpickle Vite plugin builder and also by passing a quickpickle configuration object to the 'test' object. Only one configuration method is needed.

```typescript
// vite.config.ts
import { quickpickle } from 'quickpickle';

export default {
  plugins: [
    quickpickle({

      // General quickpickle configuration
      explodeTags: [
        ['nojs','js'],
        ['dark','light'],
        ['chromium','firefox','webkit'],
        ['mobile','tablet','desktop','widescreen'],
      ],

      // PlaywrightWorld configuration
      worldConfig: {
        port: 5173, // sets the port
        slowMo: 50, // turns on "slowMo" for 50ms
      }

    })
  ],
  test: {
    include : [
      'features/*.feature',
    ],
    setupFiles: ['./tests/tests.steps.ts'],
    quickpickle: {

      // General quickpickle configuration
      explodeTags: [
        ['nojs','js'],
        ['dark','light'],
        ['chromium','firefox','webkit'],
        ['mobile','tablet','desktop','widescreen'],
      ],

      // PlaywrightWorld configuration
      worldConfig: {
        port: 5173, // sets the port
        slowMo: 50, // turns on "slowMo" for 50ms
      }

    }
  },

```

--------------------------------

### Run End-to-End Tests

Source: https://github.com/dnotes/quickpickle/blob/main/packages/sv/README.md

After applying the add-on, execute this command to run your end-to-end behavioral tests.

```shell
pnpm test:e2e
```

--------------------------------

### Publish Svelte library to npm

Source: https://github.com/dnotes/quickpickle/blob/main/packages/svelte/README.md

After configuring your package.json, use this command to publish your library to the npm registry.

```bash
npm publish
```

--------------------------------

### Import Provided Step Definitions

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Import step definition files to gain access to common browser actions and assertions for UI testing.

```typescript
import '@quickpickle/playwright/actions'
import '@quickpickle/playwright/outcomes'
```

--------------------------------

### QuickPickle vs CucumberJS Step Definition Context

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Illustrates the difference in context handling between QuickPickle (using a 'world' parameter) and CucumberJS (using 'this'). QuickPickle's approach supports modern JavaScript features like arrow functions.

```ts
// QuickPickle step definition
Given('a number {int}', function(world:QuickPickleWorldInterface, int:number) {
  if (!Array.isArray(world.numbers)) world.numbers = [int]
  else world.numbers.push(int)
})
```

```ts
// CucumberJS step definition
Given('a number {int}', function(int:number) {
  if (!Array.isArray(this.numbers)) this.numbers = [int]
  else this.numbers.push(int)
})
```

--------------------------------

### Run Vitest Tests

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Command to execute tests using the Vitest test runner.

```sh
npx vitest --run
```

--------------------------------

### Import Vitest Browser Actions and Outcomes

Source: https://github.com/dnotes/quickpickle/blob/main/packages/browser/README.md

Import necessary modules for component testing actions, outcomes, and framework-specific integrations (Svelte, React, or Vue) into your step definition file.

```typescript
import '@quickpickle/vitest-browser/actions';
import '@quickpickle/vitest-browser/outcomes';
import '@quickpickle/vitest-browser/svelte'; // OR react or vue
```

--------------------------------

### QuickPickle World Interface Definition

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Defines the structure of the `world` object passed to each QuickPickle test step, containing scenario information, Vitest context, and utility functions.

```typescript
export interface QuickPickleWorldInterface {
  info: {
    config: QuickPickleConfig   // the configuration for QuickPickle
    feature: string             // the Feature name (not file name)
    scenario: string            // the Scenario name
    tags: string[]              // the tags for the Scenario, including tags for the Feature and/or Rule
    steps: string[]             // an array of all Steps in the current Scenario
    stepIdx?: number            // the index of the current Step, starting from 1 (not 0)
    rule?: string               // the Rule name, if any
    step?: string               // the current Step
    line?: number               // the line number, in the file, of the current Step
    explodedIdx?: number        // the index of the test case, if exploded, starting from 1 (not 0)
    errors: any[]               // an array of errors that have occurred, if the Scenario is tagged for soft failure
  }
  context: TestContext,         // the Vitest context
  isComplete: boolean           // (read only) whether the Scenario is on the last step
  config: QuickPickleConfig                       // (read only) configuration for QuickPickle
  worldConfig: QuickPickleConfig['worldConfig']   // (read only) configuration for the World
  data: {[key:string]:any}      // Data limited to the current Scenario
  common: Common                // Common data shared across ALL tests in one Feature file --- USE SPARINGLY
  init: () => Promise<void>                       // function called by QuickPickle when the world is created
  tagsMatch(tags: string[]): string[]|null        // function to check if the Scenario tags match the given tags
  sanitizePath(path:string):string                // shim of npm module path-sanitizer
  fullPath(relativePath:string):string            // function to return the full path, relative to project root
}
```

--------------------------------

### VSCode Cucumber Plugin Configuration

Source: https://github.com/dnotes/quickpickle/blob/main/packages/main/README.md

Configure the VSCode 'Cucumber' plugin in your settings.json to recognize your step definition files for Gherkin feature autocompletion.

```json
// VSCode settings.json
"cucumber.glue": [
    "**/*.steps.{ts,js,mjs}",
    "**/steps/*.{ts,js,mjs}"
],
```

--------------------------------

### PlaywrightWorldConfigSetting Type Definition

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Defines the type for PlaywrightWorld configuration settings, including options for host, port, screenshots, tags, browser behavior, and more. This provides a comprehensive overview of all available configuration parameters.

```typescript
export type PlaywrightWorldConfigSetting = Partial<{
  host: string, // default host, including protocol (default: http://localhost)
  port: number, // port to which the browser should connect (default: undefined)
  screenshotDir: string, // directory in which to save screenshots (default: "screenshots")
  screenshotOptions: ScreenshotSetting // options for the screenshots, for clipping and masking, etc.
  nojsTags: string|string[] // tags for scenarios to run without javascript (default: @nojs, @noscript)
  showBrowserTags: string|string[] // tags for scenarios to run with browser visible (default: @browser, @show-browser, @showbrowser)
  slowMoTags: string|string[] // tags for scenarios to be run with slow motion enabled (default: @slowmo)
  darkModeTags: string|string[] // tags for scenarios to run in dark mode (default: @dark)
  lightModeTags: string|string[] // tags for scenarios to run in light mode (default: @light)
  headless: boolean // whether to run the browser in headless mode (default true)
  slowMo: boolean|number // whether to run the browser with slow motion enabled (default false)
  slowMoMs: number // the number of milliseconds to slow down the browser by (default 500)
  keyboardDelay: number // the number of milliseconds between key presses (default:20)
  defaultBrowser: 'chromium'|'firefox'|'webkit' // the default browser to use (default: chromium)
  browserSizes: Record<string,string> // the default browser sizes to use, in the form "widthxheight"
  // (default: { mobile: "480x640", tablet: "1024x768", desktop: "1920x1080", widescreen: "3440x1440" })
  defaultBrowserSize: string // the default browser size to use (default: desktop)
  accessibilityExcludes: string|string[] // any elements to exclude from accessibility testing
}>
```

--------------------------------

### Extend PlaywrightWorld Constructor

Source: https://github.com/dnotes/quickpickle/blob/main/packages/playwright/README.md

Create a custom PlaywrightWorld class to add specific initialization logic or custom properties and methods. Remember to set the custom world constructor.

```typescript
import { PlaywrightWorld, PlaywrightWorldConfig } from '@quickpickle/playwright';
import type { TestContext } from 'vitest';
import type { QuickPickleWorldInterface } from 'quickpickle';

export class CustomPlaywrightWorld extends PlaywrightWorld {
  customProperty: string;

  constructor(context: TestContext, info: QuickPickleWorldInterface['info'], worldConfig: Partial<PlaywrightWorldConfig> = {}) {
    super(context, info, worldConfig);
    this.customProperty = 'Custom value';
  }

  async init() {
    await super.init();
    // Add custom initialization logic here
    console.log('Custom world initialized');
  }

  customMethod() {
    console.log(`Custom method called with ${this.customProperty}`);
  }
}

// Don't forget to set the world constructor
import { setWorldConstructor } from 'quickpickle';
setWorldConstructor(CustomPlaywrightWorld);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.