Add step to verify element CSS properties #5586

vkepin · 2024-12-10T19:23:23Z

No description provided.

codecov · 2024-12-10T19:56:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.70%. Comparing base (125cef0) to head (1c4eb54).

Additional details and impacted files

@@            Coverage Diff            @@
##             master    #5586   +/-   ##
=========================================
  Coverage     97.69%   97.70%           
- Complexity     7124     7150   +26     
=========================================
  Files           987      992    +5     
  Lines         20674    20755   +81     
  Branches       1353     1353           
=========================================
+ Hits          20198    20279   +81     
  Misses          364      364           
  Partials        112      112

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

valfirst · 2024-12-11T10:23:43Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+
+[source,gherkin]
+----
+Then context element has CSS properties:$parameters


Suggested change

Then context element has CSS properties:$parameters

Then context element has CSS properties matching rules:$parameters

valfirst · 2024-12-11T10:23:55Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+----
+
+* `$parameters` - The xref:ROOT:glossary.adoc#_examplestable[ExamplesTable] containing the following columns:
+** [subs=+quotes]`*cssName*` - A name of the CSS property.


Suggested change

** [subs=+quotes]`*cssName*` - A name of the CSS property.

** [subs=+quotes]`*cssProperty*` - A name of the CSS property.

valfirst · 2024-12-11T10:24:29Z

vividus-extension-web-app/src/main/resources/templates/css_validation_result.ftl

+    <meta charset="utf-8">
+    <title>CSS properties validation results table</title>
+    <link rel="stylesheet" href="../../styles.css"/>
+    <link rel="stylesheet" href="../../webjars/bootstrap/3.4.1/css/bootstrap.min.css"/>


please use bootstrap 5 (it's also available in webjars)

valfirst · 2024-12-11T10:26:08Z

vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ElementCssSteps.java

+     * @param parameters The parameters of the expected CSS properties to set as ExamplesTable
+     */
+    @Then("context element has CSS properties:$parameters")
+    public void doesElementHasCssProperties(ExamplesTable parameters)


does it make sense to use POJO instead of ExamplesTable?

valfirst · 2024-12-11T10:26:57Z

vividus-tests/src/main/resources/story/integration/ElementCssStepsTests.story

@@ -0,0 +1,34 @@
+Description: Integration tests for ElementSteps class.


Suggested change

Description: Integration tests for ElementSteps class.

Description: Integration tests for features working with CSS properties.

valfirst · 2024-12-11T12:14:05Z

...lugin-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementSteps.java

+     *
+     * @param parameters The parameters of the expected CSS properties to set as ExamplesTable
+     */
+    @Then("context element has CSS properties:$parameters")


Also it makes sense to move this step ElementCssSteps class (to keep consistency with Selenium plugin)

uarlouski · 2024-12-11T12:21:32Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+[source,gherkin]
+----
+When I change context to element located by `id(block)`
+Then context element has CSS properties:


as practice shows steps that consume locator are more flexible, e.g. Then element located by ... has CSS properties..., if you need to check against context then you can just pass xpath(.) locator

doubtful at the current moment

uarlouski · 2024-12-11T12:30:23Z

...lugin-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementSteps.java

+     * @param parameters The parameters of the expected CSS properties to set as ExamplesTable
+     */
+    @Then("context element has CSS properties:$parameters")
+    public void doesElementHasCssProperties(ExamplesTable parameters)


does have :)

uarlouski · 2024-12-11T12:31:21Z

...lugin-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementSteps.java

+            StringComparisonRule comparisonRule = params.valueAs("comparisonRule", StringComparisonRule.class);
+
+            String actualCssValue = getCssValue(elementCss, cssName);
+            boolean passed = softAssert.assertThat(String.format(ELEMENT_CSS_CONTAINING_VALUE, cssName, expectedValue),


ELEMENT_CSS_CONTAINING_VALUE, its not only containing as you use comparison rule

uarlouski · 2024-12-11T12:42:14Z

vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ElementCssSteps.java

+            Map<String, String> values = params.values();
+            String cssName = values.get("cssName");
+            String expectedValue = values.get("expectedValue");
+            StringComparisonRule comparisonRule = params.valueAs("comparisonRule", StringComparisonRule.class);


does it make sense to map params directly to pojo having css name, exp val and comp rule?

valfirst · 2024-12-11T13:06:37Z

vividus-extension-web-app/src/main/java/org/vividus/steps/ui/web/CssValidationResult.java

+
+import org.vividus.steps.StringComparisonRule;
+
+public class CssValidationResult extends CssValidationParameters


use composition over inheritance

valfirst · 2024-12-12T08:17:24Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+
+[source,gherkin]
+----
+Then context element does have CSS properties matching rules:$parameters


why does have but not has?

valfirst · 2024-12-12T08:18:35Z

vividus-extension-web-app/src/main/resources/templates/css_validation_result.ftl

+    <table class="table table-hover table-bordered table-condensed fixedHeader">
+        <thead>
+            <tr>
+                <th>Css Property</th>


Suggested change

<th>Css Property</th>

<th>CSS Property</th>

valfirst · 2024-12-12T08:19:17Z

vividus-extension-web-app/src/main/resources/templates/css_validation_result.ftl

+                <th>Actual Value</th>
+                <th>Comparison Rule</th>
+                <th>Expected</th>
+                <th>Result</th>


the title for this column can be omitted and it makes sense to make this column first

valfirst · 2024-12-12T08:20:23Z

...in-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementCssSteps.java

+    public void doesElementHasCssProperties(List<CssValidationParameters> parameters)
+    {
+        String getAllCssScript =
+                org.vividus.util.ResourceUtils.loadResource("org/vividus/ui/web/get-element-computed-css-func.js");


just use import instead of fully-qualified name

valfirst · 2024-12-12T08:24:03Z

...in-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementCssSteps.java

+            boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",
+                            cssName, comparisonRule, expectedValue),


Suggested change

boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",

cssName, comparisonRule, expectedValue),

boolean passed = softAssert.assertThat(String.format("CSS property '%s' value",

cssName),

valfirst · 2024-12-12T08:25:42Z

vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ElementCssSteps.java

+    private List<CssValidationResult> validateElementCss(List<CssValidationParameters> parameters,
+                                                         Map<String, String> elementCss)
+    {
+        List<CssValidationResult> cssResults = new ArrayList<>();
+        parameters.forEach(param ->
+        {
+            String cssName = param.getCssProperty();
+            String expectedValue = param.getExpectedValue();
+            StringComparisonRule comparisonRule = param.getComparisonRule();
+
+            String actualCssValue = getCssValue(elementCss, cssName);
+            boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",
+                            cssName, comparisonRule, expectedValue),
+                    actualCssValue, comparisonRule.createMatcher(expectedValue));
+            cssResults.add(new CssValidationResult(param, expectedValue, passed));
+        });
+        return cssResults;
+    }
+
+    private String getCssValue(Map<String, String> cssMap, String cssName)
+    {
+        return Optional.ofNullable(cssMap.get(cssName)).orElseGet(() -> {
+            String cssValueAsCamelCase = CaseUtils.toCamelCase(StringUtils.removeStart(cssName, '-'), false, '-');
+            return cssMap.get(cssValueAsCamelCase);
+        });
+    }


it makes sense to introduce CssValidations class, move this logic to it and re-use in both places

vividus-tests/src/main/resources/story/integration/ElementCssStepsTests.story

vkepin force-pushed the check_css_step branch 2 times, most recently from 8ca7cdb to e6ac923 Compare December 10, 2024 19:30

vkepin marked this pull request as ready for review December 10, 2024 19:30

vkepin requested a review from a team as a code owner December 10, 2024 19:30

vkepin requested review from valfirst, ikalinin1 and uarlouski December 10, 2024 19:30

vkepin force-pushed the check_css_step branch 2 times, most recently from 489be47 to c36fc43 Compare December 10, 2024 19:50

valfirst requested changes Dec 11, 2024

View reviewed changes

valfirst reviewed Dec 11, 2024

View reviewed changes

uarlouski reviewed Dec 11, 2024

View reviewed changes

vkepin force-pushed the check_css_step branch from e3f93c6 to 8fa473a Compare December 11, 2024 12:52

valfirst reviewed Dec 11, 2024

View reviewed changes

valfirst requested changes Dec 12, 2024

View reviewed changes

vkepin force-pushed the check_css_step branch from 055e186 to 99357d4 Compare December 16, 2024 12:30

valfirst reviewed Dec 16, 2024

View reviewed changes

vividus-tests/src/main/resources/story/integration/ElementCssStepsTests.story Show resolved Hide resolved

valfirst force-pushed the check_css_step branch from d6156f1 to 06e2c7b Compare January 15, 2025 11:53

vkepin and others added 3 commits January 16, 2025 17:47

Add step to verify element CSS properties

3826a7d

Update story

be361f9

Bump Year in license header

1c4eb54

valfirst force-pushed the check_css_step branch from 6fb528b to 1c4eb54 Compare January 16, 2025 14:47

	Then context element has CSS properties:$parameters
	Then context element has CSS properties matching rules:$parameters

	** [subs=+quotes]`cssName` - A name of the CSS property.
	** [subs=+quotes]`cssProperty` - A name of the CSS property.

		@@ -0,0 +1,34 @@
		Description: Integration tests for ElementSteps class.

	Description: Integration tests for ElementSteps class.
	Description: Integration tests for features working with CSS properties.


		import org.vividus.steps.StringComparisonRule;

		public class CssValidationResult extends CssValidationParameters

		boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",
		cssName, comparisonRule, expectedValue),

Uh oh!

Add step to verify element CSS properties #5586

Are you sure you want to change the base?

Add step to verify element CSS properties #5586

Uh oh!

Conversation

vkepin commented Dec 10, 2024

Uh oh!

codecov bot commented Dec 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Dec 10, 2024 •

edited

Loading