added I expect {value} css property of every element in {playwrightLocator} collection {validation} {value} step (#144)

Author: AlexGalichenko

CHANGELOG.md

@@ -14,6 +14,9 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 :microscope: - experimental
 
+## [2.3.0]
+- :rocket: added `I expect {value} css property of every element in {playwrightLocator} collection {validation} {value}` step
+
 ## [2.2.1]
 - :rocket: added capability to pass page object as instance
 

package-lock.json

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

package.json

@@ -252,6 +252,34 @@ Then(
     }
 );
 
+/**
+ * Verify that css property of every element in collection satisfies condition
+ * @param {string} property - property to verify
+ * @param {string} alias - collection to verify
+ * @param {string} validationType - validation
+ * @param {string} value - expected value
+ * @example I expect 'color' css property of every element in 'Table > Rows' collection to be equal 'rgb(42, 42, 42)'
+ * @example I expect 'font-family' css property of every element in 'Labels' to contain 'Fira'
+ */
+Then(
+    'I expect {value} css property of every element in {playwrightLocator} collection {validation} {value}',
+    async function (property: MemoryValue, collection: Locator, validation: Validation, expected: MemoryValue) {
+        const propertyName = await property.value();
+        const expectedValue = await expected.value();
+        for (let i = 0; i < await collection.count(); i++) {
+            const locator = collection.nth(i);
+            const actualValue = () => locator.evaluate(
+                (node: Element, propertyName: string) => getComputedStyle(node).getPropertyValue(propertyName),
+                propertyName
+            );
+            await validation.poll(actualValue, expectedValue, {
+                timeout: this.config.browser.timeout.value,
+                interval: this.config.browser.timeout.valueInterval
+            });
+        }
+    }
+);
+
 /**
  * Verify that text of an alert meets expectation
  * @param {string} validationType - validation

src/validations.ts

@@ -64,3 +64,6 @@ Feature: validations
     Examples:
       | collection         | condition     |
       | Present Collection | to be present |
+@debug
+  Scenario: collection css property
+    Then I expect 'background-color' css property of every element in 'Simple Text List Items' collection to be equal 'rgba(0, 0, 0, 0)'