playwright-cucumber-steps 0.0.1 → 0.0.2

package/.editorconfig

@@ -11,5 +11,6 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 max_line_length = 120
 
-[*.yml]
+[*.{json,yml,feature}]
+indent_style = space
 indent_size = 2

package/CONTRIBUTING.md

@@ -0,0 +1,116 @@
+# Contributer's Guide
+We welcome contributions - thanks for taking the time to contribute! Here are
+some guidelines to help you get started. These are just guidelines, not rules,
+so use your best judgment and feel free to propose changes to this document in
+a pull request.
+
+## Discussion
+While not absolutely mandatory, it could be good if you first open an
+[issue](https://github.com/Marketionist/playwright-cucumber-steps/issues)
+for any bug or feature request. This allows discussion on the proper course of
+action to take before coding begins.
+
+## General rules
+Most of the information you need to start contributing code changes can be found
+[here](https://guides.github.com/activities/contributing-to-open-source/).
+In short: fork, make your changes and submit a pull request (PR).
+
+## Code Style Guide
+In case your editor does not respect `.editorconfig`, here is a summary of rules:
+
+- spacing - use spaces not tabs
+  - 4 spaces for `.ts` files
+  - 2 spaces for `.json`, `.yml`, `.feature` and other configuration files that start with a `.`
+- semicolons - mandatory
+- quotes - single-quote
+
+### Fork
+Fork the project [on Github](https://github.com/Marketionist/playwright-cucumber-steps)
+and check out your copy locally:
+
+```shell
+git clone git@github.com:Marketionist/playwright-cucumber-steps.git
+cd playwright-cucumber-steps
+```
+
+### Create your branch
+Create a feature branch and start hacking:
+
+```shell
+git checkout -b my-feature-branch origin/main
+```
+
+We practice HEAD-based development, which means all changes are applied
+directly on top of main.
+
+### Commit
+First make sure git knows your name and email address:
+
+```shell
+git config --global user.name 'John Doe'
+git config --global user.email 'john@example.com'
+```
+
+**Writing good commit message is important.** A commit message should be around
+50 characters or less and contain a short description of the change and
+reference issues fixed (if any). Include `Fixes #N`, where _N_ is the issue
+number the commit fixes, if any.
+
+### Rebase
+Use `git rebase` (not `git merge`) to sync your work with the core repository
+from time to time:
+
+```shell
+git remote add upstream https://github.com/Marketionist/playwright-cucumber-steps.git
+git fetch upstream
+git rebase upstream/main
+```
+
+### Install all dependencies
+```shell
+npm run install:test-dependencies:chrome
+```
+
+### Test
+New features **should have tests**. Look at other tests to see how
+they should be structured.
+
+This project makes use of code linting and e2e tests to make sure we don't break
+anything. Before you submit your pull request make sure you pass all the tests:
+
+You can run code linting with: `npm run lint`.
+You can run all the e2e tests with: `npm test`.
+
+Tests can be executed locally or remotely using Travis CI. Remote tests run is
+triggered by each pull request.
+
+### Push
+```shell
+git push origin my-feature-branch
+```
+
+Go to https://github.com/yourusername/playwright-cucumber-steps and press the
+_Pull request_ link and fill out the form.
+
+A good PR comment message can look like this:
+
+```text
+Explain PR normatively in one line
+
+Details (optional):
+Details of PR message are a few lines of text, explaining things
+in more detail, possibly giving some background about the issue
+being fixed, etc.
+
+Fixes #143
+```
+
+Pull requests are usually reviewed within a few days. If there are comments to
+address, apply your changes in new commits (preferably
+[fixups](http://git-scm.com/docs/git-commit)) and push to the same branch.
+
+### Integration
+When code review is complete, a reviewer will take your PR and integrate it to
+playwright-cucumber-steps main branch.
+
+That's it! Thanks a lot for your contribution!

package/README.md

@@ -1,2 +1,50 @@
 # playwright-cucumber-steps
 Cucumber steps (step definitions) written with Playwright for end-to-end (e2e) tests
+
+[![Actions Status](https://github.com/Marketionist/playwright-cucumber-steps/workflows/Build%20and%20Test/badge.svg)](https://github.com/Marketionist/playwright-cucumber-steps/actions)
+[![npm version](https://img.shields.io/npm/v/playwright-cucumber-steps.svg)](https://www.npmjs.com/package/playwright-cucumber-steps)
+[![NPM License](https://img.shields.io/npm/l/playwright-cucumber-steps.svg)](https://github.com/Marketionist/playwright-cucumber-steps/blob/main/LICENSE)
+
+## Supported versions
+<table>
+    <thead>
+        <tr>
+            <th><a href="https://nodejs.org/" rel="nofollow" target="_blank">Node.js</a></th>
+            <th><a href="https://github.com/microsoft/playwright" rel="nofollow" target="_blank">Playwright</a></th>
+            <th><a href="https://github.com/vitalets/playwright-bdd" rel="nofollow" target="_blank">Playwright-BDD</a></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>>=22.3.x</td>
+            <td>>=1.57.0</td>
+            <td>>=8.4.2</td>
+        </tr>
+    </tbody>
+</table>
+
+## List of predefined steps
+### Given steps
+1. `I/user go(es) to URL "..."` - open a site (by its URL provided in "" as a
+string - for example: `"https://github.com/Marketionist"`) in the current
+browser window/tab.
+2. `I/user go(es) to "..."."..."` - open a site (by its URL provided in
+**"page"."element"**) in the current browser window/tab.
+- `I/user go(es) to ... from ...` - open a site (by its URL provided in
+**element** from **page**) in the current browser window/tab.
+
+### Then steps
+3. `page title should be "..."` - verify that title of the current browser
+window/tab equals to the text (provided in "" as a string).
+4. `page title should contain "..."` - verify that title of the current browser
+window/tab contains the text (provided in "" as a string).
+
+## Contributing
+You are welcome to contribute to this repository - please see
+[CONTRIBUTING.md](https://github.com/Marketionist/playwright-cucumber-steps/blob/main/CONTRIBUTING.md)
+to help you get started. It is not set in stone, so you can just create a pull
+request and we will help you refine it along the way.
+
+## Thanks
+If this package was helpful to you - please give this repository a **★ Star** on
+[GitHub](https://github.com/Marketionist/playwright-cucumber-steps).

package/custom-types/testing-server.d.ts

@@ -0,0 +1,12 @@
+declare module 'node-testing-server' {
+    export let nodeTestingServer: {
+        config: {
+            hostname: string,
+            port: number,
+            logsEnabled: number,
+            pages: Record<string, string>,
+        },
+        start: () => Promise<void>,
+        stop: () => Promise<void>,
+    };
+}

package/fixtures.ts

@@ -0,0 +1,18 @@
+/* eslint @typescript-eslint/no-explicit-any: off */
+/* eslint no-empty-pattern: off */
+
+import { test as base, createBdd } from 'playwright-bdd';
+
+interface Fixtures {
+    ctx: Record<string, any>
+}
+
+export const test = base.extend<Fixtures>({
+    ctx: async ({}, use) => {
+        const ctx = {};
+
+        await use(ctx);
+    },
+});
+
+export const { Given, When, Then, } = createBdd(test);

package/index.ts

@@ -0,0 +1,33 @@
+/* eslint new-cap: off */ // Disable rule for Given, When, Then
+
+// #############################################################################
+
+import { expect } from '@playwright/test';
+import { Given, When, Then } from './fixtures.ts';
+import { pageObjects } from './utils/get-page-objects.ts';
+
+// #### Given steps ############################################################
+
+Given('I/user go(es) to URL {string}', async ({ page, }, url: string) => {
+    await page.goto(url);
+});
+
+Given('I/user go(es) to {string}.{string}', async ({ page, }, pageObject: string, element: string) => {
+    await page.goto(pageObjects[pageObject][element]);
+});
+
+Given('I/user go(es) to {word} from {word}( page)', async ({ page, }, element: string, pageObject: string) => {
+    await page.goto(pageObjects[pageObject][element]);
+});
+
+// #### Then steps #############################################################
+
+Then('page title should be {string}', async ({ page, }, text: string) => {
+    await expect(page).toHaveTitle(text);
+});
+
+Then('page title should contain {string}', async ({ page, }, text: string) => {
+    const regularExpression = new RegExp(`^.*${text}.*$`, 'g');
+
+    await expect(page).toHaveTitle(regularExpression);
+});

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "playwright-cucumber-steps",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Cucumber steps (step definitions) written with Playwright for end-to-end (e2e) tests",
   "main": "index.js",
   "engines": {
-    "node": ">=8.x.x"
+    "node": ">=22.3.x"
   },
+  "type": "module",
   "scripts": {
-    "install-all": "npm install && npm install cucumber@6.0.5 playwright --no-save",
-    "test": "",
+    "install:test-dependencies:firefox": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true npm install && npx playwright install firefox",
+    "install:test-dependencies:chrome": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true npm install && npx playwright install chrome",
+    "install:test-dependencies:all": "npm install && npx playwright install",
+    "lint": "node ./node_modules/.bin/eslint *.ts --ext .ts,.tsx .",
+    "prepare": "husky",
+    "start:test-server": "node tests/testing-server.ts",
+    "test": "npx bddgen && npx playwright test",
     "patch": "npm version patch -m \"Bump up package version to %s\" && git push && git push origin --tags && npm publish",
     "minor": "npm version minor -m \"Bump up package version to %s\" && git push && git push origin --tags && npm publish",
     "major": "npm version major -m \"Bump up package version to %s\" && git push && git push origin --tags && npm publish"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/Marketionist/playwright-cucumber-steps"
+    "url": "git+https://github.com/Marketionist/playwright-cucumber-steps.git"
   },
   "keywords": [
     "playwright cucumber",
@@ -40,11 +46,20 @@
   "author": "Dmytro Shpakovskyi",
   "license": "MIT",
   "dependencies": {
-    "js-automation-tools": "^1.0.5"
+    "js-automation-tools": "^3.1.3"
   },
   "peerDependencies": {
-    "cucumber": ">=5.1.0",
-    "playwright": ">=1.8.0"
+    "@playwright/test": ">=1.57.0",
+    "playwright-bdd": ">=8.4.2"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@playwright/test": "^1.58.0",
+    "playwright-bdd": "^8.4.2",
+    "@types/node": "^25.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "eslint": "^8.57.1",
+    "husky": "^9.1.7",
+    "node-testing-server": "^1.6.1"
+  }
 }

package/playwright.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig, devices } from '@playwright/test';
+import { defineBddConfig, cucumberReporter } from 'playwright-bdd';
+
+const testDir = defineBddConfig({
+    features: 'tests/features/*.feature',
+    steps: '*.ts',
+});
+
+export default defineConfig({
+    // Look for test files in the directory, relative to this configuration file
+    testDir,
+    // Each test is given 30 seconds to finish
+    timeout: 30000,
+
+    // Forbid test.only on CI
+    forbidOnly: !!process.env.CI,
+
+    // One retry for each test
+    retries: 1,
+    reporter: [
+        cucumberReporter('html', {
+            outputFile: 'cucumber-report/index.html',
+            externalAttachments: true,
+        }),
+    ],
+    use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome', // or 'chrome-beta'
+        headless: true,
+        viewport: { width: 1920, height: 1080, },
+        ignoreHTTPSErrors: true,
+        trace: 'on',
+        screenshot: 'on',
+        video: 'on-first-retry',
+    },
+    // Run local server with test pages before starting the tests
+    webServer: {
+        command: 'npm run start:test-server',
+        url: 'http://localhost:8001',
+        stdout: 'pipe',
+        stderr: 'pipe',
+    },
+});

package/tests/features/test1-user.feature

@@ -0,0 +1,19 @@
+@fast @user-steps @part1
+
+Feature: Test "user ..." steps - part 1
+  As a user of Playwright
+  I should be able to use Cucumber
+  to run my e2e tests
+
+  Scenario: 'user goes to URL' should open corresponding page, 'title should contain' should verify the title
+    Given user goes to URL "https://www.saucedemo.com"
+    Then page title should be "Swag Labs"
+    And page title should contain "ag Lab"
+
+  Scenario: 'user goes to page' should open corresponding page
+    Given user goes to "test1-page"."pageTest1"
+    Then page title should be "Test1 Page"
+
+  Scenario: 'user goes to page' should open corresponding page (text style step)
+    Given user goes to pageTest1 from test1-page
+    Then page title should be "Test1 Page"

package/tests/page-objects/test1-page.ts

@@ -0,0 +1,9 @@
+// #############################################################################
+
+const test1Page = {
+
+    pageTest1: 'http://localhost:8001/test1.html',
+
+};
+
+export default test1Page;

package/tests/testing-server.ts

@@ -0,0 +1,169 @@
+// Add testing server to provide pages for tests
+// import { NodeTestingServer } from './testing-server.d.ts';
+import { nodeTestingServer } from 'node-testing-server';
+
+// Settings for node testing server
+nodeTestingServer.config = {
+    hostname: 'localhost',
+    port: 8001,
+    logsEnabled: 0,
+    pages: {
+        '/test1.html': `<title>Test1 Page</title><a id="link-test2-page" href="
+            http://localhost:8001/test2.html">Test2 page</a>
+            <style>
+                #block-menu {
+                    width: 20%;
+                    height: 20%;
+                    z-index: 9999;
+                    background-color: #FFD700;
+                }
+            </style>
+            <script>
+                window.onload = function () {
+                    document.querySelector('h1').addEventListener("mouseover", function () {
+                        document.getElementById("text-test").innerHTML = 'Test 1 sample text';
+                    });
+                    document.querySelector('h1').addEventListener("mouseout", function () {
+                        document.getElementById("text-test").innerHTML = '';
+                    });
+                    document.querySelector('#button-menu-right-click').addEventListener("contextmenu", function () {
+                        document.getElementById("text-test").innerHTML = '';
+                        const blockMenuContainer = document.getElementById("block-menu-container");
+                        const blockMenu = document.createElement('div');
+
+                        blockMenu.setAttribute('id', 'block-menu');
+                        blockMenu.innerHTML = 'Menu goes here...';
+                        blockMenuContainer.insertBefore(blockMenu, blockMenuContainer.firstChild);
+                    });
+                }
+            </script>
+            <h1>Test1 page</h1>
+            <p id="text-test"></p>
+            <p>
+                <label for="image">Upload image:</label>
+                <input type="file" name="image" accept="image/png, .jpeg, .jpg, image/gif">
+                <input type="submit" value="Upload">
+            </p>
+            <p id="block-menu-container">
+                <button id="button-menu-right-click">Right click menu</button>
+            </p>`,
+        '/test2.html': `<title>Test2 Page</title>
+            <script>
+                window.onload = function () {
+                    document.getElementById("login").addEventListener("click", function () {
+                        document.getElementById("block-credentials").innerHTML = document
+                            .getElementById("input-username").value + document
+                            .getElementById("input-password").value;
+                    });
+                    document.getElementById("input-colors").addEventListener("input", function () {
+                        document.getElementById("block-input-color").innerHTML = document
+                            .getElementById("input-colors").value;
+                    });
+                    document.getElementById("dropdown-colors").addEventListener("change", function () {
+                        document.getElementById("block-dropdown-color").innerHTML = document
+                            .getElementById("dropdown-colors").value;
+                    });
+                }
+            </script>
+            <h1>Test2 page</h1>
+            <p>Credentials are: <span id="block-credentials"></span></p>
+            <form>
+                Sign in:<br>
+                <input id="input-username" type="text" name="input-username" placeholder="Username" value=""><br>
+                <input id="input-password" type="password" name="input-password" placeholder="Password" value=""><br>
+            </form>
+            <button id="login">Sign in</button>
+            <p>Typed in input color is: <span id="block-input-color"></span></p>
+            <form>
+                Colors:<br>
+                <input id="input-colors" type="text" value=""><br>
+                <input type="submit" value="Submit">
+            </form>
+            <p>Selected dropdown color is: <span id="block-dropdown-color"></span></p>
+            <select id="dropdown-colors" name="colors">
+                <option value="default color">Default color</option>
+                <option value="black">Black</option>
+                <option value="grey">Grey</option>
+                <option value="white">White</option>
+                <option value="red">Red</option>
+                <option value="crimson">Crimson</option>
+                <option value="magenta">Magenta</option>
+                <option value="blue">Blue</option>
+                <option value="aqua">Aqua</option>
+                <option value="cyan">Cyan</option>
+                <option value="indigo">Indigo</option>
+                <option value="green">Green</option>
+                <option value="yellow">Yellow</option>
+                <option value="Gold">Gold</option>
+                <option value="orange">Orange</option>
+            </select>`,
+        '/test-iframe.html': `<title>Test Page with iframe</title>
+            <h1>Test page with iframe</h1>
+            <iframe src="test1.html" id="iframe-test1" name="test iframe" width="400" height="300" align="left">
+                <p>Your browser does not support iframes</p>
+            </iframe>`,
+        '/test-alert.html': `<title>Test Page with alert</title>
+            <script>
+                window.onload = function () {
+                    document.getElementById("button-launch-alert").addEventListener("click", function () {
+                        let alertStatus;
+                        if (confirm("Accept (OK) or Dismiss (Cancel) - press a button!") == true) {
+                            alertStatus = "Alert was accepted!";
+                        } else {
+                            alertStatus = "Alert was canceled!";
+                        }
+                        document.getElementById("block-alert-status").innerHTML = alertStatus;
+                    });
+                }
+            </script>
+            <h1>Test page with alert</h1>
+            <button id="button-launch-alert">Launch alert</button>
+            <p id="block-alert-status"></p>`,
+        '/test-loader.html': `<title>Test Page with loader</title>
+            <style>
+                #loader {
+                    width: 70%;
+                    height: 70%;
+                    position: fixed;
+                    z-index: 9999;
+                    background-color: #FFD700;
+                }
+            </style>
+            <script>
+                function insertAfter(referenceNode, newNode) {
+                    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+                }
+                function showLoader (idValue, timeToSpin = 5000) {
+                    const blockLoader = document.createElement('div');
+
+                    blockLoader.setAttribute('id', idValue);
+                    document.body.insertBefore(blockLoader, document.body.firstChild);
+
+                    setTimeout(function () {
+                        document.getElementById(idValue).remove();
+                    }, timeToSpin);
+                }
+                function showContentWithDelay (timeDelay = 5000) {
+                    const title = document.querySelector('h1');
+                    let blockContent = document.createElement('p');
+                    blockContent.setAttribute('id', 'block-content');
+                    blockContent.innerHTML = 'This is a test content on a page with loader';
+
+                    setTimeout(function () {
+                        insertAfter(title, blockContent);
+                    }, timeDelay);
+                }
+                document.addEventListener('DOMContentLoaded', () => {
+                    const timeout1 = 6000;
+                    const timeout2 = 8000;
+
+                    showLoader('loader', timeout1);
+                    showContentWithDelay(timeout2);
+                });
+            </script>
+            <h1>Test page with loader</h1>`,
+    },
+};
+
+// Start node testing server
+await nodeTestingServer.start();

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "nodenext",
+    "outDir": "./dist",
+    "types": ["node", "@playwright/test"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "useUnknownInCatchVariables": false,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+  },
+  "include": [
+    "**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/utils/get-page-objects.ts

@@ -0,0 +1,100 @@
+// #############################################################################
+
+import { readdir, stat } from 'node:fs';
+import { promisify } from 'node:util';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const spacesToIndent = 4;
+
+const readdirP = promisify(readdir);
+const statP = promisify(stat);
+
+async function _readDirectory (
+    directory: string, allFiles?: string[]
+): Promise<string[]> {
+    const files = (await readdirP(directory)).map((filePath) => {
+        return path.join(directory, filePath);
+    });
+    const allFilesPaths = allFiles ?? [];
+
+    allFilesPaths.push(...files);
+    await Promise.all(
+        files.map(async (f) => {
+            return (await statP(f)).isDirectory() && _readDirectory(f, allFilesPaths);
+        })
+    );
+
+    return allFilesPaths;
+}
+
+async function readDirectories (directories: string[]): Promise<string[]> {
+    const allFilesPaths: string[] = [];
+
+    (await Promise.all(
+        directories.map(async (dir) => {
+            const files = await _readDirectory(dir);
+
+            return files;
+        })
+    )).map((value) => {
+        allFilesPaths.push(...value);
+    });
+
+    return allFilesPaths;
+}
+
+const isCalledExternally = __dirname.includes('node_modules');
+const pOFolderPath = process.env.PO_FOLDER_PATH!;
+
+const pageObjectsFolderPathes = 'PO_FOLDER_PATH' in process.env ?
+    pOFolderPath.replace(/\s+/g, '').split(',') :
+    [path.join('tests', 'page-objects'),];
+
+const fullPageObjectsFolderPathes = isCalledExternally ?
+    pageObjectsFolderPathes.map((pageObjectsFolderPath) => {
+        return path.join(__dirname, '..', '..', '..', pageObjectsFolderPath);
+    }) :
+    pageObjectsFolderPathes.map((pageObjectsFolderPath) => {
+        return path.join(__dirname, '..', pageObjectsFolderPath);
+    });
+
+// Require all Page Object files in directory
+type PageObject = Record<string, Record<string, string>>;
+const pageObjects: PageObject = {};
+
+async function requirePageObjects () {
+    const allPageObjectFiles = await readDirectories(
+        fullPageObjectsFolderPathes);
+    const allRequiredPageObjects = allPageObjectFiles.filter(
+        (value) => {
+            return value.includes('.ts');
+        }
+    );
+
+    await Promise.all(
+        allRequiredPageObjects.map(async (file) => {
+            const fileName = path.basename(file, '.ts');
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const fileContent: PageObject = await import(file);
+
+            pageObjects[fileName] = fileContent.default;
+
+            return file;
+        })
+    );
+
+    console.log(
+        '\nPage Objects from PO_FOLDER_PATH:',
+        `\n${JSON.stringify(pageObjects, null, spacesToIndent)}\n\n`
+    );
+
+    return pageObjects;
+}
+
+await requirePageObjects();
+
+export { pageObjects };