reworked page object approach (#134)

.github/workflows/pull-request.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     branches:
       - main
+      - v2
+      - v1
 
 jobs:
   test:

CHANGELOG.md

@@ -5,13 +5,66 @@ All notable changes to the "@qavajs/steps-playwright" will be documented in this
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
 :rocket: - new feature
+
 :beetle: - bugfix
+
 :x: - deprecation/removal
+
 :pencil: - chore
+
 :microscope: - experimental
 
+## [2.0.0]
+- :pencil: added memory processor to playwrightLocator parameter type
+- :pencil: added page object end-to-end tests
+- :rocket: reworked page object approach
+- :rocket: added new function _locator_ to define page objects
+
+```typescript
+import { locator } from '@qavajs/steps-playwright/po';
+
+class App {
+  /**
+   * simple locator
+   * I click 'Simple'
+   */
+  Simple = locator('#simple');
+  /**
+   * dynamic locator by provided argument
+   * I click 'Template (some text)'
+   */
+  Template = locator.template(text => `div:has-text("${text}")`);
+  /**
+   * locator that uses native playwright capabilities
+   * I click 'Native'
+   */
+  Native = locator.native(({ page }) => page.locator('#native'));
+}
+```
+
+  - new way to define components
+```typescript
+import { locator } from '@qavajs/steps-playwright/po';
+
+class App {
+  /**
+   * I click 'Component > Child'
+   */
+  Component = locator('#parent').as(Component);
+}
+
+class Component {
+    Child = locator('#child')
+}
+```
+  - removed collection in favor of template locators
+
+- :x: - removed frame steps in favor of using frame locators
+- :x: - removed wait steps in favor of validation steps
+- :x: - removed multi-browser steps
+
 ## [1.0.0]
-- release
+- release 1.0.0
 
 ## [0.54.0]
 - :rocket: added _I save file to {string} by clicking {string}_ step

README.md

@@ -8,69 +8,63 @@ Step library to work with playwright in qavajs framework
 `npm install @qavajs/steps-playwright`
 
 ## Configuration
-```javascript
-const App = require('./page_object');
-module.exports = {
-    default: {
-        require: [
-            'node_modules/@qavajs/steps-playwright/index.js'
-        ],
-        browser: {
-            timeout: {
-                present: 10000,
-                visible: 20000,
-                page: 10000,
-                value: 5000, // expect value timeout
-                valueInterval: 500, // expect value interval
-                pageRefreshInterval: 2000 // refresh page for _I refresh page..._ steps
-            },
-            capabilities: {
-                browserName: 'chromium'
-            }
+```typescript
+import App from './page_object'
+export default {
+    require: [
+        'node_modules/@qavajs/steps-playwright/index.js'
+    ],
+    browser: {
+        timeout: {
+            present: 10000,
+            visible: 20000,
+            page: 10000,
+            value: 5000, // expect value timeout
+            valueInterval: 500, // expect value interval
+            pageRefreshInterval: 2000 // refresh page for _I refresh page..._ steps
         },
-        pageObject: new App()
-    }
+        capabilities: {
+            browserName: 'chromium'
+        }
+    },
+    pageObject: App
 }
 ```
 
-## Global variables
-@qavajs/steps-playwright exposes following global variables
+## Context variables
+@qavajs/steps-playwright exposes following to step context
 
-| variable         | type                             | description                                                   |
-|------------------|----------------------------------|---------------------------------------------------------------|
-| `browser`        | `Browser \| ElectronApplication` | browser instance                                              |
-| `driver`         | `Browser \| ElectronApplication` | browser instance (alias for browser)                          |
-| `context`        | `BrowserContext`                 | current browser context                                       |
-| `page`           | `Page`                           | current context page                                          |
-| `browserManager` | `BrowserManager`                 | manager to control all opened browsers and electron instances |
+| variable                  | type                             | description                          |
+|---------------------------|----------------------------------|--------------------------------------|
+| `this.playwright.browser` | `Browser \| ElectronApplication` | browser instance                     |
+| `this.playwright.driver`  | `Browser \| ElectronApplication` | browser instance (alias for browser) |
+| `this.playwright.context` | `BrowserContext`                 | current browser context              |
+| `this.playwright.page`    | `Page`                           | current context page                 |
 
 ## Connect to playwright server
 In order to connect to playwright server pass _wsEndpoint_ property in capabilities object
 ```typescript
-module.exports = {
-    default: {
-        browser: {
-            capabilities: {
-                browserName: 'chromium',
-                wsEndpoint: 'ws://127.0.0.1:60291/2bd48ce272de2b543e4c8c533f664b83'
-            }
-        },
-    }
+export default {
+    browser: {
+        capabilities: {
+            browserName: 'chromium',
+            wsEndpoint: 'ws://127.0.0.1:60291/2bd48ce272de2b543e4c8c533f664b83'
+        }
+    },
 }
+
 ```
 
 ## Connect to cdp endpoint
 In order to connect to CDP endpoint pass _cdpEndpoint_ property in capabilities object 
 ```typescript
-module.exports = {
-    default: {
-        browser: {
-            capabilities: {
-                browserName: 'chromium',
-                cdpEndpoint: 'http://localhost:9222/'
-            }
-        },
-    }
+export default {
+    browser: {
+        capabilities: {
+            browserName: 'chromium',
+            cdpEndpoint: 'http://localhost:9222/'
+        }
+    },
 }
 ```
 
@@ -82,17 +76,16 @@ Supported events:
 - beforeStep
 - afterStep
 
-```javascript
-module.exports = {
-    default: {
-        browser: {
-            screenshot: {
-                event: ['onFail'], //event to take screenshot
-                fullPage: true // option to take full page screenshot (default false)
-            }
+```typescript
+export default {
+    browser: {
+        screenshot: {
+            event: ['onFail'], //event to take screenshot
+            fullPage: true // option to take full page screenshot (default false)
         }
     }
 }
+
 ```
 
 ## Playwright traces
@@ -131,43 +124,29 @@ export default {
 }
 ```
 
-## Typescript
-To properly use globals exposed by @qavajs/steps-playwright add corresponding types to tsconfig.json
-```json
-{
-  "compilerOptions": {
-    "types": [
-      "@qavajs/steps-playwright/globals"
-    ]
-  }
-}
-```
-
 ## reuseSession
 reuseSession flag allows to share session between tests in frames of process. But setting of this flag
 transfers session control to user.
 
-```javascript
-module.exports = {
-    default: {
-        browser: {
-            reuseSession: true
-        }
+```typescript
+export default {
+    browser: {
+        reuseSession: true
     }
 }
+
 ```
 
 ## restartBrowser
 restartBrowser flag allows to restart browser between tests instead of default restarting context
 
-```javascript
-module.exports = {
-    default: {
-        browser: {
-            restartBrowser: true
-        }
+```typescript
+export default {
+    browser: {
+        restartBrowser: true
     }
 }
+
 ```
 
 
@@ -176,7 +155,7 @@ Install dependencies
 `npm install`
 
 Install playwright browsers
-`install:browsers`
+`npm install:browsers`
 
 Build lib
 `npm run build`

index.js

@@ -10,6 +10,5 @@ require('./lib/cookies.js');
 require('./lib/localSessionStorage.js');
 require('./lib/mock.js');
 require('./lib/poDefine.js');
-require('./lib/multiBrowser.js');
 require('./lib/mouseActions.js');
 require('./lib/keyboardActions.js');