Play-ts-cucumber NPM

Playwright (TS binding) + Cucumber (BDD)

Cucumber is a popular behavior-driven development (BDD) tool that allows developers and stakeholders to collaborate on defining and testing application requirements in a human-readable format. TypeScript is a powerful superset of JavaScript that adds optional static typing, making it easier to catch errors before runtime. By combining these two tools, we can create more reliable and maintainable tests.

Features

Awesome report with screenshots, videos & logs
Execute tests on multiple environments
Parallel execution
Rerun only failed features
Retry failed tests on CI
Github Actions integrated with downloadable report
Page object model

Sample report

Project structure

app -> Contains all the features & Step Definitions Typescript code
dist -> Contains all framework code output files
play-ts-cucumber/dist -> Contains all framework code source files
test-results -> Contains all the reports related file

Reports

Mutilple Cucumber Report
Default Cucumber report
Logs
Screenshots of failure
Test videos of failure
Trace of failure

Get Started

Setup:

Clone or download the project
Extract and open in the VS-Code
npm i to install the dependencies
npx playwright install to install the browsers
npm run test to execute the tests
To run a particular test change

  paths: [
            "src/test/features/featurename.feature"
         ]

Use tags to run a specific or collection of specs

npm run test --TAGS="@test or @add"

Folder structure - May not be up to Date until folder structure is finalized.

.vscode -> Settings for feature and step definition mapping
app -> Folder for application related code and files
app\env -> Multiple environments are handled
app\pom\objects -> Page Object Model classes to have Object Locators
app\pom\scripts -> Page Object Model classes to have custom methods related to the page
pom.ts -> Global Objects and Scripts
app\test-data -> Folder to have test data and test upload files
app\test\features\<folder>\ -> write your features here (format: featureName.feature. You can have folders based on need)
app\test\steps\<folder>\ -> Step definitions can be under the Feature folder here (format: featureName.step.ts)
dist -> Compiled application code files generated here. No need to update/change anything here
node_modules -> Dependency libraries are installed here
play-ts-cucumber -> Framework code files. Development or changes should be made here
test-results -> Folder to have execution reports and logs
test-results\default-report -> Cucumber default report
test-results\reports -> Multiple Cucumber report
test-results\reports\assets -> CSS and font files for Multiple Cucumber report
package.json -> Contains all the dependencies
tsconfig.json -> TypeScript configurations

Core Framework

actions -> Keyboard, Mouse and other user Action's on elements
1. custom -> Custom action like Alert handling and etc.
2. dropdown -> Dropdown actions
3. element -> Methods depends on Elements e.g. Wait till disappearance of some element
4. keyboard -> Keyboard actions
5. mouse -> Mouse actions
6. checkbox -> Check box actions
7. dropdown -> Dropdown actions
8. radiobutton -> Option button actions
9. fileupload -> File Upload actions
assertion -> Collection of Assertion
1. assertion -> Text and various Assertions
2. email -> Read email and assert email content
browser -> Manage browser invoke and teardown
1. browsermanager -> Manage browser items
config -> Configuration files
1. cucumber.js -> Cucumber profile configuration for test runner
helper -> Cross ENV and DotEnv configurations
1. env.ts -> Environment binding for Env variables
2. types -> Type definition for Env variables
hooks -> Cucumber hooks
1. `hooks' -> Cucumber hooks implementation
2. `pageFixture' -> Fixture and Page setup
report -> Report and logger configurations
1. 'custom_logger` -> Custom method for log generation
2. init.ts -> Report initialization
3. logger.ts -> Winston logger
4. report.ts -> Cucumber Report Configuration
global.ts -> Global access variables and class members and scripts
runner.ts -> Received command line arguments and execute steps as defined

Running Test through Terminal (Command Prompt)

Syntax: npm run ccs_run_test -- ENV={Env} --FEATURES={Feature} --BROWSER={Chrome|Firefox|Webkit} --CLIENT={client} PARALLEL_WORKER={PARALLEL_WORKER_Count} - ENV is mandatory (required) argument. Value can be any one of the following: dev, test, qa, stage, ct, uat, prod - If no FEATURES are specified then it will run all features - If no TAGS are specified then it will run all scenarios of applicable features irrespective of tag - If no BROWSER is specified then default would be Chrome. Value can be only Chrome or Firefox or Webkit - If HEADLESS parameter is not specified then default would be Headless as false - If CLIENT parameter is not specified then it will be ignored - If REPORT_PATH parameter is not specified then report will be generated at folder test-results/default-report. Otherwise Cucumber default report HTML and JSON files will b generated at the specified location - If PARALLEL_WORKER parameter is not specified then default would be 1. If specified then given number of parallel execution will occur

The following will not work as ENV variable is mandatory npm run ccs_run_test
To execute all of the features with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD
To execute all of the features with PROD environment variables with Chrome for a specific client npm run ccs_run_test -- --ENV=PROD --CLIENT=TransAmerica
To execute all of the features under loginPage folder with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD --FEATURES=app/test/features/loginPage
To execute all of the features under loginPage and booksPage folder with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD --FEATURES=app/test/features/loginPage,app/test/features/booksPage
To execute all of the features under loginPage folder which are tagged as @auth with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD --FEATURES=app/test/features/loginPage --TAGS="@auth"
To execute all of the features which are tagged as @auth with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD --TAGS="@auth"
To execute all of the features which are tagged as @auth or @add with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD --TAGS="@auth or @add"
To execute all of the features which are not tagged as @auth with PROD environment variables with Chrome npm run ccs_run_test -- --ENV=PROD --FEATURES=app/test/features/loginPage --TAGS="not @auth"
To execute all of the features with PROD environment variables with Firefox npm run ccs_run_test -- --ENV=PROD --BROWSER=Firefox
To execute all of the features with PROD environment variables with Webkit npm run ccs_run_test -- --ENV=PROD --BROWSER=Webkit
To execute all of the features with PROD environment variables with browser as Headless npm run ccs_run_test -- --ENV=PROD --BROWSER=Webkit --HEADLESS=true
To execute all of the features with PROD environment variables with browser as Headless and to generate the Report at downloads folder npm run ccs_run_test -- --ENV=PROD --BROWSER=Webkit --HEADLESS=true --REPORT_PATH=C:/users/Test/Downloads
To execute all of the features with PROD environment variables with browser as Headless in Parallel mode npm run ccs_run_test -- --ENV=PROD --BROWSER=Webkit --HEADLESS=true --PARALLEL_WORKER=2