ortonikc/playwright_cucumber_ts

Playwright + Cucumber BDD + Typescript, simple & easiest way to learn and implement

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

1. Awesome report with screenshots, videos & logs
2. Execute tests on multiple environments
3. Parallel execution
4. Rerun only failed features
5. Retry failed tests on CI
6. Github Actions integrated with downloadable report
7. Page object model

Sample report

Project structure

• .github -> yml file to execute the tests in GitHub Actions
• src -> Contains all the features & Typescript code
• test-results -> Contains all the reports related file

Reports

1. Mutilple Cucumber Report
2. Default Cucumber report
3. Logs
4. Screenshots of failure
5. Test videos of failure
6. Trace of failure

Get Started

Setup:

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

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

7. Use tags to run a specific or collection of specs

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

Folder structure

0. src\pages -> All the page (UI screen)
1. src\test\features -> write your features here
2. src\test\steps -> Your step definitions goes here
3. src\hooks\hooks.ts -> Browser setup and teardown logic
4. src\hooks\pageFixture.ts -> Simple way to share the page objects to steps
5. src\helper\env -> Multiple environments are handled
6. src\helper\types -> To get environment code suggestions
7. src\helper\report -> To generate the report
8. config/cucumber.js -> One file to do all the magic
9. package.json -> Contains all the dependencies
10. src\helper\auth -> Storage state (Auth file)
11. src\helper\util -> Read test data from json & logger

Tutorials

1. Learn Playwright - Playwright - TS
2. BDD in detail - TS binding

playwright_cucumber_ts's Issues

After following you instrction

npm ERR! Missing script: "test"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\DELL\AppData\Local\npm-cache_logs\2023-09-28T07_55_30_284Z-debug-0.log

Can you submit the latest code?

Hi Koushik,
It is very good framework you have developed and I have implemented the same in my project.
But can you submit the latest code. The repo code is old one.
There should be the methods in step definitions which we call from page classes but those are not updated.
May be, if you check the code then you will come to know it

Scenarios not executing on GitHub but in local working fine

Hi Kaushik..
First and foremost, thank you for all of your hard work in teaching us.
I notice that with the most recent GitHub activities, the scenario is not executing on GitHub, yet it is working perfectly locally.

Detail info is required for configure Playwright + cucumber + Allure

I tried to configure Playwright + cucumber + Allure, i could generate the report but it is not showing up all information under steps.
Example:
In the cucumber steps, i included multiple assertion, those information should be present under steps but it is not showing up

can we integrate this with cypress and typescript

I am currently using cypress and cypress-cucumber-preprocessor library. We have to execute tests parallelly, this library does everything. Would like to know if there is a way to integrate this with cypress and typescript. Thank you. Can you provide some examples.

How to print or attach the custom values to report

Scenario: Create a new sales order
Given launch the application.
When user creates the sales order
Then Verify sales order id is created
And Save the sales order id

this is the scenario and when ever i execute this, then I will get dynamic sales order id ex: 12345
I just want to attach this as text in the report under scenario. how can I do that?

Need to pass env variable from CLI

In my project, we have to use more env variable and those will be passed via CLI. how to pass the CLI