add page object e2e tests

CHANGELOG.md

@@ -15,8 +15,9 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 :microscope: - experimental
 
 ## [2.0.0]
+- :pencil: added page object end-to-end tests
 - :rocket: reworked page object approach
-  - new function _locator_ to define page objects
+- :rocket: added new function _locator_ to define page objects
 
 ```typescript
 import { locator } from '@qavajs/steps-playwright/po';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {

src/pageObject.ts

@@ -44,7 +44,7 @@ export interface LocatorDefinition {
     template: (selector: (argument: string) => string) => Selector;
 
     /**
-     * Define selector using native wdio API
+     * Define selector using native playwright API
      * @param {(argument: string) => string} selector - selector function
      */
     native: (selector: (params: NativeSelectorParams) => Locator) => Selector;

test-e2e/features/actions.feature

@@ -1,4 +1,3 @@
-@debug
 Feature: actions
 
   Background:

test-e2e/features/pageObject.feature

@@ -0,0 +1,19 @@
+Feature: page object
+
+  Background:
+    When I open '$valuesPage' url
+
+  Scenario: template
+    Then I expect text of 'Body Component Template (body) > List Item (3)' to be equal 'third value'
+
+  Scenario: native
+    Then I expect text of 'Simple Text Element Native' to be equal 'text value'
+
+  Scenario: simple component
+    Then I expect text of 'Body Component > Text Element' to be equal 'text value'
+
+  Scenario: template component
+    Then I expect text of 'Body Component Template (body) > Text Element' to be equal 'text value'
+
+  Scenario: native component
+    Then I expect text of 'Body Component Native > Text Element' to be equal 'text value'

test-e2e/page_object/index.ts

@@ -1,6 +1,8 @@
 import { locator } from '../../po';
 export default class App {
     SimpleTextElement = locator('#textValue');
+    SimpleTextElementTemplate = locator.template(selector => selector);
+    SimpleTextElementNative = locator.native(({ page }) => page.locator('#textValue'));
     SimpleTextListItems = locator('#textValueList li');
     SimpleTextListItemByIndex = locator.template(idx => `#textValueList li:nth-child(${idx})`);
     SimpleTextListItemByText = locator.template(text => `#textValueList li:has-text('${text}')`);
@@ -64,11 +66,20 @@ export default class App {
     LocationButton = locator('#location');
     DownloadButton = locator('#download');
 
+    BodyComponent = locator('body').as(BodyComponent);
+    BodyComponentTemplate = locator.template((selector: string) => selector).as(BodyComponent);
+    BodyComponentNative = locator.native(({ page }) => page.locator('body')).as(BodyComponent);
+
     // Electron
     OpenNewWindowElectronButton = locator('#electronButton');
     CloseCurrentWindowElectronButton = locator('#closeCurrentWindow');
 
     //JS Selector
     SimpleTextElementByJS = locator('js=document.querySelectorAll("#textValue")');
     SimpleTextListItemsByJS = locator('js=document.querySelectorAll("#textValueList li")');
-}
+}
+
+class BodyComponent {
+    TextElement = locator('#textValue');
+    ListItem = locator.template(index => `#textValueList > li:nth-child(${index})`);
+}