add BeforeStep / AfterStep hooks

.github/CONTRIBUTING.md

@@ -46,18 +46,27 @@ To contribute code:
 ## Development Setup
 
 1. Install dependencies:
-    ```
+    ```sh
     cd playwright-bdd
     npm install
     ```
 2. Install Playwright browsers:
-    ```
+    ```sh
     npx playwright install chromium
     ```
 3. Run tests:
-    ```
+    ```sh
     npm t
+    # run specific test
+    npm run only test/<test-name-in-directory>
+    ```
+4. Run examples:
+    ```sh
+    npm run examples
+    # run specific example
+    npm run examples examples/<example-name-in-directory>
     ```
+    note: you may need to run `npm run examples` before commiting, as some pre-commit checks rely on its generated output.
 
 ## Useful Dev Commands
 

.gitignore

@@ -25,4 +25,6 @@ blob-report
 /test/reporter-cucumber-merge/check-report
 /test/reporter-cucumber-merge/.features-gen/features/sample.feature.spec.js-snapshots
 
-/examples/**/playwright/.auth
+/examples/**/playwright/.auth
+
+.prototools

docs/writing-steps/hooks.md

@@ -314,7 +314,7 @@ import { createBdd } from 'playwright-bdd';
 const { BeforeStep } = createBdd();
 ```
 
-Since Playwright-BDD **v8** you can target scenario hook to particular features/scenarios by `tags`:
+You can target step hook to the steps of the specific feature/scenario by `tags`:
 
 ```ts
 BeforeStep({ tags: '@mobile and not @slow' }, async function () {
@@ -355,30 +355,6 @@ BeforeStep({ name: 'my hook', timeout: 5000 }, async function () {
 The hook function can accept **1 argument** - [test-scoped fixtures](https://playwright.dev/docs/test-fixtures#built-in-fixtures).
 You can access [$testInfo](https://playwright.dev/docs/api/class-testinfo), [$tags](writing-steps/bdd-fixtures.md#tags) and any built-in or custom fixtures. See more details in [BeforeScenario / Before API](api.md#beforescenario-before).
 
-#### Example of using `BeforeStep` with custom fixture
-
-Imagine you have defined a custom fixture `myFixture`:
-```ts
-import { test as base, createBdd } from 'playwright-bdd';
-
-export const test = base.extend<{ myFixture: MyFixture }>({
-  myFixture: async ({ page }, use) => {
-    // ... setup myFixture
-  }
-});
-
-export const { BeforeStep } = createBdd(test);
-```
-
-Now you can use `myFixture` in the produced hooks:
-```ts
-import { BeforeStep } from './fixtures';
-
-BeforeStep(async ({ myFixture }) => {
-  // ... use myFixture in the hook
-});
-```
-
 ## AfterStep
 
 > Consider using [fixtures](#fixtures) instead of hooks.
@@ -398,4 +374,25 @@ AfterStep(async () => {
 });
 ```
 
-All options and behavior are similar to [BeforeStep](#beforestep).
+All options and behavior are similar to [BeforeStep](#beforestep).
+
+#### Example of using `AfterStep` to capture screenshot after each step
+
+Create `fixtures.ts`:
+```ts
+export const { AfterStep } = createBdd(test);
+```
+
+Import `fixture.ts` in step definition
+```ts
+import { AfterStep } from './fixtures';
+
+AfterStep(async ({ page, $testInfo, $step }) => {
+  await $testInfo.attach(`screenshot after ${$step.title}`, {
+    contentType: 'image/png',
+    body: await page.screenshot()
+  });
+});
+
+// ...rest of the step definitions
+```