├── tsconfig.json ├── features ├── homepage.feature └── steps │ ├── fixtures.ts │ └── index.ts ├── prettier.config.mjs ├── .gitignore ├── .github └── workflows │ └── test.yaml ├── playwright.config.ts ├── package.json └── README.md /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2021", 4 | "module": "nodenext", 5 | "strict": true, 6 | "noEmit": true 7 | }, 8 | "include": ["**/*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /features/homepage.feature: -------------------------------------------------------------------------------- 1 | Feature: Playwright Home Page 2 | 3 | Scenario: Check title 4 | Given I am on Playwright home page 5 | When I click link "Get started" 6 | Then I see in title "Installation" 7 | -------------------------------------------------------------------------------- /prettier.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | tabWidth: 2, 3 | useTabs: false, 4 | singleQuote: true, 5 | printWidth: 100, 6 | semi: true, 7 | trailingComma: 'all', 8 | bracketSpacing: true, 9 | plugins: ['prettier-plugin-gherkin'], 10 | }; 11 | -------------------------------------------------------------------------------- /features/steps/fixtures.ts: -------------------------------------------------------------------------------- 1 | import { test as base, createBdd } from 'playwright-bdd'; 2 | 3 | type Fixtures = { 4 | // set types of your fixtures 5 | }; 6 | 7 | export const test = base.extend({ 8 | // add your fixtures 9 | }); 10 | 11 | export const { Given, When, Then } = createBdd(test); 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode 3 | .idea 4 | 5 | # npm 6 | node_modules 7 | npm-debug.log 8 | 9 | # yarn 10 | .pnp.* 11 | .yarn 12 | 13 | # env 14 | .env 15 | 16 | # tests 17 | test-results 18 | playwright-report 19 | cucumber-report 20 | **/.features-gen/**/*.spec.js 21 | 22 | .nx 23 | 24 | build-archive.log 25 | /browserstack.yml 26 | /log 27 | /allure-results -------------------------------------------------------------------------------- /features/steps/index.ts: -------------------------------------------------------------------------------- 1 | import { expect } from '@playwright/test'; 2 | import { Given, When, Then } from './fixtures'; 3 | 4 | Given('I am on Playwright home page', async ({ page }) => { 5 | await page.goto('https://playwright.dev'); 6 | }); 7 | 8 | When('I click link {string}', async ({ page }, name: string) => { 9 | await page.getByRole('link', { name }).click(); 10 | }); 11 | 12 | Then('I see in title {string}', async ({ page }, text: string) => { 13 | await expect(page).toHaveTitle(new RegExp(text)); 14 | }); 15 | -------------------------------------------------------------------------------- /.github/workflows/test.yaml: -------------------------------------------------------------------------------- 1 | name: test 2 | 3 | on: 4 | push: 5 | 6 | jobs: 7 | test: 8 | runs-on: ubuntu-22.04 9 | steps: 10 | - uses: actions/checkout@v4 11 | - uses: actions/setup-node@v4 12 | with: 13 | node-version: 18 14 | - run: npm ci 15 | - run: npx playwright install --with-deps 16 | - run: npm test 17 | - uses: actions/upload-artifact@v4 18 | if: always() 19 | with: 20 | name: playwright-artifacts 21 | path: | 22 | playwright-report/ 23 | test-results/ 24 | retention-days: 1 25 | if-no-files-found: ignore 26 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from '@playwright/test'; 2 | import { defineBddConfig, cucumberReporter } from 'playwright-bdd'; 3 | 4 | const testDir = defineBddConfig({ 5 | features: 'features/*.feature', 6 | steps: 'features/steps/*.ts', 7 | }); 8 | 9 | export default defineConfig({ 10 | testDir, 11 | reporter: [ 12 | cucumberReporter('html', { 13 | outputFile: 'cucumber-report/index.html', 14 | externalAttachments: true, 15 | }), 16 | ['html', { open: 'never' }], 17 | ], 18 | use: { 19 | screenshot: 'on', 20 | trace: 'on', 21 | }, 22 | projects: [ 23 | { 24 | name: 'chromium', 25 | use: { ...devices['Desktop Chrome'] }, 26 | }, 27 | ], 28 | }); 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "playwright-bdd-example", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "test": "npx bddgen && npx playwright test", 6 | "report": "npx http-server ./cucumber-report -c-1 -a localhost -o index.html", 7 | "watch:bdd": "nodemon -w ./features -e feature,js,ts --exec \"npx bddgen\"", 8 | "watch:pw": "playwright test --ui", 9 | "watch": "run-p watch:*" 10 | }, 11 | "devDependencies": { 12 | "@playwright/test": "^1.56.1", 13 | "@types/node": "^20.9.4", 14 | "http-server": "14.1.1", 15 | "nodemon": "^3.1.9", 16 | "npm-run-all": "^4.1.5", 17 | "playwright-bdd": "^8.4.2", 18 | "prettier": "^3.6.2", 19 | "prettier-plugin-gherkin": "^3.1.3", 20 | "typescript": "^5.9.3" 21 | }, 22 | "license": "MIT" 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # playwright-bdd-example 2 | 3 | A minimal example project that uses [playwright-bdd](https://github.com/vitalets/playwright-bdd) to run BDD tests with Playwright. 4 | 5 | > [!IMPORTANT] 6 | > If you are using [Yarn Plug'n'Play](https://yarnpkg.com/features/pnp), please check out [yarn-pnp](https://github.com/vitalets/playwright-bdd-example/tree/yarn-pnp) branch. 7 | 8 | ## How to report a bug 9 | 10 | 1. [Fork](https://github.com/vitalets/playwright-bdd-example/fork) the repo! 11 | 2. Clone it to your local machine 12 | 13 | ``` 14 | git clone https://github.com/YOUR_GITHUB_USERNAME/playwright-bdd-example.git 15 | ``` 16 | 17 | 3. Change directory to `playwright-bdd-example` 18 | 19 | ``` 20 | cd playwright-bdd-example 21 | ``` 22 | 23 | 4. Install dependencies 24 | 25 | ``` 26 | npm install 27 | ``` 28 | 29 | 5. Install browsers 30 | 31 | ``` 32 | npx playwright install 33 | ``` 34 | 35 | 6. Run tests 36 | 37 | ``` 38 | npm test 39 | ``` 40 | 41 | Output: 42 | 43 | ``` 44 | Running 2 tests using 1 worker 45 | 2 passed (2.3s) 46 | ``` 47 | 48 | 7. Make changes reproducing a bug 49 | 50 | 8. Commit and push changes 51 | ``` 52 | git add . 53 | git commit -m'repro for playwright-bdd issue xxx' 54 | git push 55 | ``` 56 | 9. [Open a pull-request](https://github.com/vitalets/playwright-bdd-example/pulls) and share the link 57 | --------------------------------------------------------------------------------