Skip to content

Commit 3a9c9e4

Browse files
vlad9719umapillaiks22UmaKPillai
authored
implement getCssPropertyValue method (#356)
* feat: introduce getCssPropertyValue * feat: extend getCssPropertyValue to accept selectors or elements * docs: add documentation for getCssPropertyValue * test: revert profile * feat: Implement getCssPropertyValue for ui5 namespace * docs: add example * tests: add error case for nonUi5 - getCssPropertyValue * Test: Add error case for getCssPropertyValue * chore: re-run npm install and update docs * fix: return null instead of empty object and change function return signature * feat: introduce expectCssPropertyValueToBe for nonUi5 namespace * refactor: Refactor expectCssPropertyValueToBe to accept both element and selector * test: add error cases * docs: add docs for expectCssPropertyValueToBe * feat: introduce expectCssPropertyValueToBe for ui5 namespace * test: add error case * docs: add docs for the new reuse function * feat: add index and timeout as function arguments * feat: add index and timeout arguments to expectCssPropertyValueToBe in ui5 namespace * test: move repeated data to shared scope * refactor: move repeated test data into shared scope (nonUi5 - expectCssPropertyValueToBe) * fix: grammar error * docs: regenerate --------- Co-authored-by: uma <umapillaiks22@gmail.com> Co-authored-by: UmaKPillai <umapillai@sap.com>
1 parent 2d250af commit 3a9c9e4

15 files changed

+12027
-11838
lines changed

‎docs/doc.md

+505-95
Large diffs are not rendered by default.

‎package-lock.json

+11,242-11,738
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/reuse/modules/nonUi5/assertion.ts

+16
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,22 @@ export class Assertion {
6666
await this.expectAttributeToBe(element, compareValue);
6767
}
6868

69+
/**
70+
* @function expectCssPropertyValueToBe
71+
* @memberOf nonUi5.assertion
72+
* @description Expects the CSS property value of the passed element to be the compare value.
73+
* @param {Element | string} elementOrSelector - The element or CSS selector describing the element.
74+
* @param {String} cssProperty - The CSS property of the element to compare with.
75+
* @param {String} compareValue - The compare value.
76+
* @example const element = await nonUi5.element.getById("button01");
77+
* await nonUi5.assertion.expectCssPropertyValueToBe(element, "color", "rgb(255, 0, 0)");
78+
*/
79+
async expectCssPropertyValueToBe(elementOrSelector: Element | string, cssProperty: string, compareValue: string): Promise<void> {
80+
const vl = this.vlf.initLog(this.expectCssPropertyValueToBe);
81+
const value = await nonUi5.element.getCssPropertyValue(elementOrSelector, cssProperty);
82+
return common.assertion.expectEqual(value, compareValue);
83+
}
84+
6985
// =================================== VISIBILITY ===================================
7086
/**
7187
* @function expectToBeVisible

‎src/reuse/modules/nonUi5/element.ts

+22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Element } from "../../../../@types/wdio";
22
import { VerboseLoggerFactory } from "../../helper/verboseLogger";
33
import ErrorHandler from "../../helper/errorHandler";
4+
import { resolveCssSelectorOrElement } from "../../helper/elementResolving";
45
/**
56
* @class element
67
* @memberof nonUi5
@@ -491,6 +492,27 @@ export class ElementModule {
491492
}
492493
}
493494

495+
/**
496+
* @function getCssPropertyValue
497+
* @memberOf nonUi5.element
498+
* @description Returns the value of the passed CSS property of the element.
499+
* @param {Element | string} elementOrSelector - The element or CSS selector describing the element.
500+
* @param {String} cssProperty - The CSS property of the element to get value.
501+
* @returns {String} The value of the CSS property.
502+
* @example const elem = await nonUi5.element.getById("elem01");
503+
* const color = await nonUi5.element.getCssPropertyValue(elem, "color");
504+
*/
505+
async getCssPropertyValue(elementOrSelector: Element | string, cssProperty: string): Promise<string> {
506+
const vl = this.vlf.initLog(this.getCssPropertyValue);
507+
try {
508+
const element = await resolveCssSelectorOrElement(elementOrSelector);
509+
const property = await element.getCSSProperty(cssProperty);
510+
return property.value;
511+
} catch (error) {
512+
return this.ErrorHandler.logException(error);
513+
}
514+
}
515+
494516
// =================================== SET VALUES ===================================
495517
/**
496518
* @function setInnerHTML

‎src/reuse/modules/ui5/assertion.ts

+23
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,29 @@ export class Assertion {
276276
return this.expectAttributeToBe(selector, "valueState", "None", index, timeout, loadPropertyTimeout);
277277
}
278278

279+
/**
280+
* @function expectCssPropertyValueToBe
281+
* @memberOf ui5.assertion
282+
* @description Expects the CSS property value of the passed element to be the compare value.
283+
* @param {Object} selector - The selector describing the element.
284+
* @param {String} cssProperty - The CSS property of the element to compare with.
285+
* @param {String} compareValue - The compare value.
286+
* @param {Number} [index=0] - The index of the selector (in case there is more than one element visible at the same time).
287+
* @param {Number} [timeout=30000] - The timeout to wait (ms).
288+
* @example await ui5.assertion.expectCssPropertyValueToBe(selector, "color", "rgb(255, 0, 0)");
289+
*/
290+
async expectCssPropertyValueToBe(
291+
selector: any,
292+
cssProperty: string,
293+
compareValue: string,
294+
index = 0,
295+
timeout: number = parseFloat(process.env.QMATE_CUSTOM_TIMEOUT!) || 30000
296+
) {
297+
const vl = this.vlf.initLog(this.expectCssPropertyValueToBe);
298+
const value = await ui5.element.getCssPropertyValue(selector, cssProperty, index, timeout);
299+
return common.assertion.expectEqual(value, compareValue);
300+
}
301+
279302
// =================================== BINDINGS ===================================
280303
/**
281304
* @function expectBindingPathToBe

‎src/reuse/modules/ui5/element.ts

+22
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,28 @@ export class ElementModule {
266266
return this.ErrorHandler.logException(error);
267267
}
268268
}
269+
270+
/**
271+
* @function getCssPropertyValue
272+
* @memberOf ui5.element
273+
* @description Returns the value of the passed CSS property of the element.
274+
* @param {Object} selector - The selector describing the element.
275+
* @param {String} cssProperty - The CSS property of the element to get value.
276+
* @param {Number} [index=0] - The index of the selector (in case there are more than one elements visible at the same time).
277+
* @param {Number} [timeout=30000] - The timeout to wait (ms).
278+
* @returns {String} The value of the CSS property.
279+
* @example const cssPropertyValue = await ui5.element.getCssPropertyValue(selector, "visibility");
280+
*/
281+
async getCssPropertyValue(selector:any, cssProperty: string, index = 0, timeout: number = parseFloat(process.env.QMATE_CUSTOM_TIMEOUT!) || 30000): Promise<string>{
282+
const vl = this.vlf.initLog(this.getCssPropertyValue);
283+
try{
284+
const elem = await this.getDisplayed(selector, index, timeout);
285+
const property = await elem.getCSSProperty(cssProperty);
286+
return property.value;
287+
} catch(error) {
288+
return this.ErrorHandler.logException(error);
289+
}
290+
}
269291

270292
/**
271293
* @function getBindingValue

‎src/scripts/dataExchange/dataExchangeUtil.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class DataExchangeUtil {
4444
* @return {object} - the JSON data
4545
* @throws {*} - throws an error if file is not readable, or if data is not valid JSON
4646
*/
47-
async readJson (filename: string): Promise<object> {
47+
async readJson (filename: string): Promise<object | null> {
4848
// handle empty files
4949
const data = await fs.readFile(filename, "utf-8");
5050
return data && data.trim() ? JSON.parse(data) : null;

‎test/reuse/nonUi5/assertion/expectCssPropertyValueToBe.spec.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
"use strict";
2+
const { handleCookiesConsent } = require("../../../helper/utils");
3+
4+
const selector = "//div[contains(text(),'Laptops')]";
5+
const cssProperty = "visibility";
6+
const compareValue = "visible";
7+
8+
describe("assertion - expectCssPropertyValueToBe - element", function () {
9+
it("Preparation", async function () {
10+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
11+
await handleCookiesConsent();
12+
});
13+
14+
it("Execution and Verification", async function () {
15+
const product = await nonUi5.element.getByXPath(selector);
16+
await nonUi5.assertion.expectCssPropertyValueToBe(product, cssProperty, compareValue);
17+
});
18+
});
19+
20+
describe("assertion - expectCssPropertyValueToBe - selector", function () {
21+
it("Preparation", async function () {
22+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
23+
await handleCookiesConsent();
24+
});
25+
26+
it("Execution and Verification", async function () {
27+
await nonUi5.assertion.expectCssPropertyValueToBe(selector, cssProperty, compareValue);
28+
});
29+
});
30+
31+
const errorRegexp = /Expected.*wrong.*|Received.*visible/;
32+
33+
describe("assertion - expectCssPropertyValueToBe - element - error", function () {
34+
it("Preparation", async function () {
35+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
36+
await handleCookiesConsent();
37+
});
38+
39+
it("Execution and Verification", async function () {
40+
const product = await nonUi5.element.getByXPath(selector);
41+
await expect(nonUi5.assertion.expectCssPropertyValueToBe(product, cssProperty, "wrong"))
42+
.rejects.toThrow(errorRegexp);
43+
});
44+
});
45+
46+
describe("assertion - expectCssPropertyValueToBe - selector - error", function () {
47+
it("Preparation", async function () {
48+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
49+
await handleCookiesConsent();
50+
});
51+
52+
it("Execution and Verification", async function () {
53+
await expect(nonUi5.assertion.expectCssPropertyValueToBe(selector, cssProperty, "wrong"))
54+
.rejects.toThrow(errorRegexp);
55+
});
56+
});

‎test/reuse/nonUi5/assertion/test.assertion.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ exports.config = merge(profile.config, {
1313
path.resolve(__dirname, "expectValueToBe.spec.js"),
1414
path.resolve(__dirname, "expectToBeNotVisible.spec.js"),
1515
path.resolve(__dirname, "expectAttributeToBe.spec.js"),
16-
path.resolve(__dirname, "expectAttributeToContain.spec.js")
16+
path.resolve(__dirname, "expectAttributeToContain.spec.js"),
17+
path.resolve(__dirname, "expectCssPropertyValueToBe.spec.js")
1718
],
1819

1920
services: [

‎test/reuse/nonUi5/element/getCssPropertyValue.spec.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
"use strict";
2+
const {
3+
handleCookiesConsent
4+
} = require("../../../helper/utils");
5+
6+
const selector = "//div[contains(text(),'Laptops')]";
7+
const cssProperty = "visibility";
8+
const valueExp = "visible";
9+
10+
describe("element - getCssPropertyValue - element", function () {
11+
let valueAct;
12+
13+
it("Preparation", async function () {
14+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
15+
await handleCookiesConsent();
16+
});
17+
18+
it("Execution", async function () {
19+
const product = await nonUi5.element.getByXPath(selector);
20+
valueAct = await nonUi5.element.getCssPropertyValue(product, cssProperty);
21+
});
22+
23+
it("Verification", async function () {
24+
await common.assertion.expectEqual(valueAct, valueExp);
25+
});
26+
});
27+
28+
describe("element - getCssPropertyValue - selector", function () {
29+
let valueAct;
30+
31+
it("Preparation", async function () {
32+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
33+
await handleCookiesConsent();
34+
});
35+
36+
it("Execution", async function () {
37+
valueAct = await nonUi5.element.getCssPropertyValue(selector, cssProperty);
38+
});
39+
40+
it("Verification", async function () {
41+
await common.assertion.expectEqual(valueAct, valueExp);
42+
});
43+
});
44+
45+
describe("element - getCssPropertyValue - error", function () {
46+
47+
it("Preparation", async function () {
48+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
49+
});
50+
51+
it("Execution & Verification", async function () {
52+
await expect(nonUi5.element.getCssPropertyValue()).rejects.toThrow("Function 'getCssPropertyValue' failed");
53+
});
54+
});

‎test/reuse/nonUi5/element/test.element.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ exports.config = merge(profile.config, {
2929
path.resolve(__dirname, "isPresent.spec.js"),
3030
path.resolve(__dirname, "isPresentByCss.spec.js"),
3131
path.resolve(__dirname, "isPresentByXPath.spec.js"),
32-
path.resolve(__dirname, "setInnerHTML.spec.js")
32+
path.resolve(__dirname, "setInnerHTML.spec.js"),
33+
path.resolve(__dirname, "getCssPropertyValue.spec.js"),
3334
],
3435

3536
services: [

‎test/reuse/ui5/assertion/expectCssPropertyValueToBe.spec.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use strict";
2+
const { handleCookiesConsent } = require("../../../helper/utils");
3+
4+
const selector = {
5+
elementProperties: {
6+
viewName: "sap.ui.demo.cart.view.Home",
7+
metadata: "sap.m.StandardListItem",
8+
bindingContextPath: "/ProductCategories*'LT')"
9+
}
10+
};
11+
const cssProperty = "visibility";
12+
const index = 0;
13+
const timeout = 30000;
14+
15+
describe("assertion - expectCssPropertyValueToBe", function () {
16+
it("Preparation", async function () {
17+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
18+
await handleCookiesConsent();
19+
});
20+
21+
it("Execution and Verification", async function () {
22+
const valueExp = "visible";
23+
await ui5.assertion.expectCssPropertyValueToBe(selector, cssProperty, valueExp, index, timeout);
24+
});
25+
});
26+
27+
describe("assertion - expectCssPropertyValueToBe - error", function () {
28+
it("Preparation", async function () {
29+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
30+
await handleCookiesConsent();
31+
});
32+
33+
it("Execution and Verification", async function () {
34+
const wrongValue = "wrong";
35+
await expect(ui5.assertion.expectCssPropertyValueToBe(selector, cssProperty, wrongValue, index, timeout))
36+
.rejects.toThrow(/Expected.*wrong.*|Received.*visible/);
37+
});
38+
});

‎test/reuse/ui5/assertion/test.assertion.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ exports.config = merge(profile.config, {
2323
path.resolve(__dirname, "expectToBeVisible.spec.js"),
2424
path.resolve(__dirname, "expectToBeNotVisible.spec.js"),
2525
path.resolve(__dirname, "expectToBeVisibleInViewport.spec.js"),
26-
path.resolve(__dirname, "expectMessageToastTextToBe.spec.js")
26+
path.resolve(__dirname, "expectMessageToastTextToBe.spec.js"),
27+
path.resolve(__dirname, "expectCssPropertyValueToBe.spec.js")
2728
]
2829
});

‎test/reuse/ui5/element/getCssPropertyValue.spec.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use strict";
2+
const { handleCookiesConsent } = require("../../../helper/utils");
3+
4+
describe("element - getCssPropertyValue", function () {
5+
let valueAct;
6+
7+
it("Preparation", async function () {
8+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
9+
await handleCookiesConsent();
10+
});
11+
12+
it("Execution", async function () {
13+
const selector = {
14+
elementProperties: {
15+
viewName: "sap.ui.demo.cart.view.Home",
16+
metadata: "sap.m.StandardListItem",
17+
bindingContextPath: "/ProductCategories*'LT')"
18+
}
19+
};
20+
const cssProperty = "visibility";
21+
const index = 0;
22+
const timeout = 30000;
23+
valueAct = await ui5.element.getCssPropertyValue(selector, cssProperty, index, timeout);
24+
});
25+
26+
it("Verification", async function () {
27+
const valueExp = "visible";
28+
await common.assertion.expectEqual(valueAct, valueExp);
29+
});
30+
});
31+
32+
describe("element - getCssPropertyValue - error", function () {
33+
it("Preparation", async function () {
34+
await common.navigation.navigateToUrl("https://sapui5.hana.ondemand.com/1.96.27/test-resources/sap/m/demokit/cart/webapp/index.html?sap-ui-theme=sap_fiori_3#/categories");
35+
});
36+
37+
it("Execution & Verification", async function () {
38+
await expect(ui5.element.getCssPropertyValue()).rejects.toThrow("Function 'getCssPropertyValue' failed");
39+
});
40+
});

‎test/reuse/ui5/element/test.element.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ exports.config = merge(profile.config, {
1818
path.resolve(__dirname, "getPropertyValue.spec.js"),
1919
path.resolve(__dirname, "highlight.spec.js"),
2020
path.resolve(__dirname, "isVisible.spec.js"),
21-
path.resolve(__dirname, "waitForAll.spec.js")
21+
path.resolve(__dirname, "waitForAll.spec.js"),
22+
path.resolve(__dirname, "getCssPropertyValue.spec.js")
2223
]
2324
});

0 commit comments

Comments
 (0)