Implement e2e tests using playwright-js

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

README.md

@@ -16,3 +16,12 @@ You will also see any lint errors in the console.
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
+
+### for running e2e tests
+
+Start the project
+- `yarn start` 
+
+Run the tests
+ - to run all the feature: `yarn test:e2e tests/acceptance/feature` 
+ - to run specific scenario of a feature: `yarn test:e2e tests/acceptance/feature/<name-of-feature-file>:<line-number-of-the-scenario>

cucumber.config.js

@@ -0,0 +1,34 @@
+const { Before, BeforeAll, AfterAll, After } = require("@cucumber/cucumber");
+const { chromium } = require("playwright");
+const { expect } = require("@playwright/test");
+
+// playwright expect to global
+global.expect = expect;
+
+BeforeAll(async function () {
+    // Browsers are expensive in Playwright so only create 1
+    global.browser = await chromium.launch({
+        // Not headless so we can watch test runs
+        headless: false,
+        // Slow so we can see things happening
+        // slowMo: 50,
+    });
+
+});
+
+AfterAll(async function () {
+
+    await global.browser.close();
+});
+
+// Create a new browser context and page per scenario
+Before(async function () {
+    global.context = await global.browser.newContext();
+    global.page = await global.context.newPage();
+});
+
+// Cleanup after each scenario
+After(async function () {
+    await global.page.close();
+    await global.context.close();
+});